Добрый день, уважаемые коллеги!

Помогите, пожалуйста, решить следующую задачу: в реестре записей мобильного приложения в зависимости от значения определенного поля надо выделять строки жирным шрифтом либо подсвечивать. Т.е. требуется форматирование стиля строки по условию.

Попыталась поискать решение по материалам сообщества, но так и не разобралась, можно ли реализовать такую потребность и каким образом.

https://community.terrasoft.ru/articles/susestvuet-li-v-79-sposob-zadat-cvet-stroke-v-reestre-mobilnogo-prilozenia

https://community.terrasoft.ru/questions/napisanie-stilei-dla-mobilnoi-versii

https://community.terrasoft.ru/articles/kak-v-mobilnoi-versii-prilozenia-vyvesti-dopolnitelnye-kolonki-v-reestra-razdela

 

Подскажите, пожалуйста, понять как работает Terrasoft.util.writeStyles:

  1. можно ли и как в данном случае использовать Terrasoft.util.writeStyles (сложилось впечатление, что стиль определяется для реестра/схемы в целом)?
  2. Если реализация возможна, то на каком типе схемы для реестра надо обращаться к Terrasoft.util.writeStyles ?

Благодарю за помощь

Нравится

4 комментария
Лучший ответ

Марина, это немного нетривиальная задача, но она реализуема.

 

Как подобное можно реализовать. Для этого нужно по сути реализовать свой компонент реестра\грида, расширив базовый компонент list. Именно так сделано в разделе «Лента»\”Feed” (см. MobileFeedList, MobileSocialMessageGridPageView).

  1. Создать свой компонент, расширив базовый list. Например, если нужно менять стиль только основного выводимого поля, то можно реализовать в нем только метод getApplyItemTplPrimaryColumnFn. Что-то типа:

 

Ext.define("Terrasoft.configuration.MyList", {
   extend: "Ext.Terrasoft.List",
   xtype: "cfmylist",
 
   getApplyItemTplPrimaryColumnFn: function() {
      return function(values) {
         var config = this.primaryColumnConfig;
         var value = this.getValueByConfig(config, values);
         var typeId = values["Type"];
         var isRed = false;
         if (typeId === "some_type_value") {
            isRed = true;
         }
         if (value) {
            return "<div class=\"x-list-title\" " + isRed ? "style=\"color: red;\"" : "" + ">" + value + "</div>";
         }
         return "";
      };
   }
 
});

 

  1. Во view страницы реестра своего раздела указать в качестве используемого компонента свой разработанный компонент из п.1.
Ext.define("Terrasoft.configuration.view.ContactGridPage", {
   extend: "Terrasoft.view.BaseGridPage.View",
   xtype: "contactgridpageview",
   config: {
      grid: {
         xtype: "cfmylist",
      },
   },
  1. Прописать в манифесте в CustomSchemas схему, в которой реализовали свой компонент.

Марина, это немного нетривиальная задача, но она реализуема.

 

Как подобное можно реализовать. Для этого нужно по сути реализовать свой компонент реестра\грида, расширив базовый компонент list. Именно так сделано в разделе «Лента»\”Feed” (см. MobileFeedList, MobileSocialMessageGridPageView).

  1. Создать свой компонент, расширив базовый list. Например, если нужно менять стиль только основного выводимого поля, то можно реализовать в нем только метод getApplyItemTplPrimaryColumnFn. Что-то типа:

 

Ext.define("Terrasoft.configuration.MyList", {
   extend: "Ext.Terrasoft.List",
   xtype: "cfmylist",
 
   getApplyItemTplPrimaryColumnFn: function() {
      return function(values) {
         var config = this.primaryColumnConfig;
         var value = this.getValueByConfig(config, values);
         var typeId = values["Type"];
         var isRed = false;
         if (typeId === "some_type_value") {
            isRed = true;
         }
         if (value) {
            return "<div class=\"x-list-title\" " + isRed ? "style=\"color: red;\"" : "" + ">" + value + "</div>";
         }
         return "";
      };
   }
 
});

 

  1. Во view страницы реестра своего раздела указать в качестве используемого компонента свой разработанный компонент из п.1.
Ext.define("Terrasoft.configuration.view.ContactGridPage", {
   extend: "Terrasoft.view.BaseGridPage.View",
   xtype: "contactgridpageview",
   config: {
      grid: {
         xtype: "cfmylist",
      },
   },
  1. Прописать в манифесте в CustomSchemas схему, в которой реализовали свой компонент.

Зверев Александр,

 

Александр, огромное спасибо за подробное описание алгоритма с примерами. Стала пытаться реализовать алгоритм и столкнулась с проблемой во 2-м пункте :)

 

В конкретной ситуации рассматривается реестр Контрагентов. Сейчас отображается MobileAccountGridPage, который надо изменить и в коде которого:

Ext.define("AccountGridPage.View", {
	extend: "Terrasoft.view.BaseGridPage.View",
	xtype: "accountgridpage",
	config: {
		id: "AccountGridPage",
		navigationPanel: {
			id: "AccountGridPage_navigationPanel",
			title: LocalizableStrings["AccountGridPage_navigationPanel_title"]
		},
		grid: {
			id: "AccountGridPage_grid",
			iconCls: "user",
			store: "AccountGridPage.Store"
		}
	}
});

Так как здесь я не могу вносить изменения, то пытаюсь реализовать либо как:

- расширение от вышеуказанного класса "AccountGridPage.View", но в этом случае возникает ошибка - Uncaught Error: [Ext.Loader] Failed loading 'AccountGridPage/View.js', please verify that the file exists

- расширение от класса "Terrasoft.view.AccountGridPage.View" , возникает ошибка - sencha-touch-all-debug.js:8634 Uncaught Error: [Ext.Loader] Failed loading 'app/view/AccountGridPage/View.js', please verify that the file exists,

- расширение от "Terrasoft.view.BaseGridPage.View", но в этом случае ничего не происходит.

Ext.define("Terrasoft.configuration.view.UsrAccountGridPage", {
 // extend: "Terrasoft.view.AccountGridPage.View", //  Failed loading 'app/view/AccountGridPage/View.js'
 // extend: "AccountGridPage.View", // ошибка Failed loading 'AccountGridPage/View.js
  extend: "Terrasoft.view.BaseGridPage.View", // ничего не происходит
   xtype: "usraccountgridpage",
   config: {
      grid: {
         xtype: "cfmylist",
      },
   }
});

Как правильно выполнить расширение в данном случае? Благодарю за помощь

Можно скопировать текст текущей view (MobileAccountGridPage, если не ошибаюсь), создать свою схему, вставить туда скопированный текст, у свойства grid указать свой новый xtype компонента грида и не забыть указать эту схему в манифесте в свойстве Grid у модели Account.

Зверев Александр,

 

Александр, попробую. Благодарю Вас за ценные рекомендации

Показать все комментарии