Сообщение об ошибке

  • Deprecated function: Function create_function() is deprecated в функции _geshifilter_prepare() (строка 126 в файле /var/www/lsoft/sites/all/modules/geshifilter/geshifilter.pages.inc).
  • Deprecated function: Function create_function() is deprecated в функции _geshifilter_prepare() (строка 131 в файле /var/www/lsoft/sites/all/modules/geshifilter/geshifilter.pages.inc).
  • Deprecated function: Function create_function() is deprecated в функции _geshifilter_process() (строка 231 в файле /var/www/lsoft/sites/all/modules/geshifilter/geshifilter.pages.inc).

ExtJS 4: Отображение связанных моделей в сетке(Grid) Перевод

test

Примечание переводчика

Буквально пару дней назад я делал перевод статьи о том как использовать контроллеры и представления в ExtJS согласно архитектуре MVC. Но в ней не было использования моделей, хотя основы использования фреймворка вполне прекрасно обозначались. И вот новый перевод, небольшой но достаточно содержательный. Мы рассмотрим как использовать связанные модели и отображать их в сетке. Думаю это далеко не последний мой перевод по теме ExtJS, лишь текущий.

Если кому не понравиться перевод, можете смело читать в оригинале: Rendere association values in a grid panel

Перевод

ExtJS 4 предоставляет отличный механизм моделей данных. Важным аспектом в Ассоциациях является определение отношения между разными моделями в вашем приложении. Это важная возможность с всего парой побочных эффектов.

Вы не можете использовать данные ассоциации в шаблонах XTemplate потому что соответствующие данные не в формате массива. Опять же, отображение ассоциативных данных в сетке не являются интуитивно понятными. Последнее мы и рассмотрим в этой статье.

В моем примере у меня есть Документы(Documents) связанные с Компонентами(Components). В нашем натуральном языке обработки[NLP] модель строит приложение, каждый документ может быть использован в разных аспектах модели. В любом случае, Компоненты могут быть изменены, удалены из системы, или добавлены новые, по этому я отслеживаю их как отдельные обьекты и ассоциирую их с обьектом Документ.

/**
*  Простая модель документа.
*/
Ext.define("BigData.Document", {
   extend: "Ext.data.Model",
   fields: [
      { name: "id",            type: "int" },
      { name: "filetype",      type: "string" },
      { name: "filename",      type: "string" },
      { name: "size",          type: "int" }
   ],
   hasMany: { model: "Component", name: "components" }
});

/**
*  Каждый документ содержит n Компонентов,
* численность и значение которых может меняться,
* так что я не буду жестко кодировать поля прямо в документе
*/
Ext.define("BigData.Component", {
   extend: "Ext.data.Model",
   fields: [
      {name: "id",       type: "int"},
      {name: "name",     type: "string"}
   ]
});

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

/*
*  Создаем хранилище SimpleDocumentStore
*/
SimpleDocumentStore = Ext.create("Ext.data.Store", {
    model: "Document",
    proxy: { type: "memory", reader: { type: "json" } }
});

Теперь, когда модели и хранилище созданы, мы можем создать Документ и прилинковать один или более компонентов к нему.

/**
*  Создаем документ
*/
var SimpleDocument = BigData.Document.create({ id: 1, filename: "sample.txt", filetype: "user-defined", size: 10221 });

/**
*  Создаем экземпляр для компонентов документа
*/
var DocComponents = SimpleDocument.components();

/**
*  Добавим некоторые компоненты документу
*/
var TitleComponent = BigData.Component.create({ id: 23, name: "Title" });
var BodyComponent  = BigData.Component.create({ id: 23, name: "Body" });

DocComponents.add([TitleComponent, BodyComponent]);

// Сохраним документ в хранилище
SimpleDocumentStore.add(SimpleDocument);

Теперь я хочу отобразить сетку, отображающую список документов из хранилища, но так же колонки для каждого компонента и отобразить какие компоненты подключены к какому документу. Для этого я обьявил колонку для каждого Компонента и обьявил собственное отображение для привязанных к документу компонентов. Функция отображения смотрит ассоциации Компонентов и Документов в хранилище и просто помечает ячейку ‘X’.

/**
*  Теперь когда мы хотим отобразить эти компоненты в сетке,
* нам нужно создать собственную функцию отображения,
* потому что компоненты не включены напрямую в Документ
*/
xtype: "grid",
store: SimpleDocumentStore,
columns:[{
   header: "Name",
   dataIndex: name,
   width: 100
},{
   header: "Title",
   width: 60,
   renderer : function (value, cell, doc, idx) {
      var components;

      if (doc.hasOwnProperty("componentsStore")) {
         components = doc.componentsStore;

         if (components.findExact("id", "Title") !== -1) {
            return "X";
         }
      }
   }
},{
   header: "Body",
   width: 90,
   renderer : function (value, cell, doc, idx) {
      var components;

      if (doc.hasOwnProperty("componentsStore")) {
         components = doc.componentsStore;

         if (components.findExact("id", "Body") !== -1) {
            return "X";
         }
      }
   }
}]

Категория: 
Share/Save

Делитесь с друзьями в социальных сетях! Оставляйте комментарии!

Share/Save

Это Вам так же может быть интересно!