Стиль строки в реестре мобильного приложения в зависимости от поля записи

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

Как подобное можно реализовать. Для этого нужно по сути реализовать свой компонент реестра\грида, расширив базовый компонент 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 "";
      };
   }
 
});

2. Во view страницы реестра своего раздела указать в качестве используемого компонента свой разработанный компонент из п.1.

Ext.define("Terrasoft.configuration.view.ContactGridPage", {
   extend: "Terrasoft.view.BaseGridPage.View",
   xtype: "contactgridpageview",
   config: {
      grid: {
         xtype: "cfmylist",
      },
   },

3. Прописать в манифесте в 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.

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

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