Пожалуйста приведите пример работы ExtJS 4 с TreeStore с загрузкой данных с сервера
Пожалуйста приведите пример работы ExtJS 4 с TreeStore с загрузкой данных с сервера.
Задача. создать treestore, с моделью данных типа двухуровневого дерева вложенных папок с произвольным кол-вом элементов в втором уровне: '01.01.2012' -> '1111' ----> 1.1 ----> 1.2 ----> 1.3 ----> 1.4 -> '2222' ----> 2.1 ----> 2.2 '02.01.2012' -> '3333' ----> 3.1 При этом прокси должен находиться в модели (как рекомендуют для MVC), загрузка с сервера - через ajax/json, сценарий php (сам сценарий давно готов, отдает корректный json_encode данные json). Сейчас споткнулся на описании полей типов данных в модели - тип данных array там не описан, а у меня кол-во элементов в массиве ("папке" в дереве) - произвольное... Куски сценария. контроллер: Ext.define('ECS2.controller.controller_invoices', { extend: 'Ext.app.Controller', views: 'view_invoices_list', stores: [ 'treestore_invoices' ] }); модель: Ext.define('ECS2.model.treestore_model_invoices', { extend: 'Ext.data.model', fields: [ {name: 'invoicedate', type: 'date'}, {name: 'number', type: 'array'}, // а типа массива ведь нету... {name: 'items', type: 'array'} // а типа массива ведь нету... ], proxy: { type: 'ajax', url: '/load_invoices.php', reader: { type: 'json', root: 'Root' } } }); тристор: Ext.define('ECS2.store.treestore_invoices', { extend: 'Ext.data.TreeStore', model: 'treestore_model_invoices', autoLoad: true }); Ругани нет, сценарий php грузится, отдает данные, но дерево не отображается... |
TreeStore это не тоже самое что store, и в качестве источника данных ему нужен специализированный json файл.
Посмотри как сделанов официальном Example Образец json [{ "text": "To Do", "cls": "folder", "expanded": true, "children": [{ "text": "Go jogging", "leaf": true, "checked": true },{ "text": "Take a nap", "leaf": true, "checked": false },{ "text": "Climb Everest", "leaf": true, "checked": false }] }, образец TreeStore. var store = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: 'check-nodes.json' } //здесь можно было бы указать порядок сортировки, но делать это не обязательно }); Для tree нет необходимости обьявлять модель, хоть и возможно. Прокси строго в STORE. Гайд по TREESTORE можно почитать здесь |
Прошу прощения, отдыхал.
Так получается для стореджа тристора модели сценарием нужно специфически формировать данные и кроме того явно передавать "директивы" построения дерева в json ? |
children- дочерние элементы узла
"expanded"- раскрыт/закрыт узел возможно эти "директивы можно переопределить", но я привёл пример по умолчанию |
Цитата:
Все сделал, как Вы сказали - заработало, дерево отобразилось. Теперь пытаюсь загнать деревья в таблицу (с последующей возможностью сортировки) и ничего не выходит. Все же работа с MVC имеет свои явные отличия, сложнее там все... Делаю согласно примеров: http://docs.sencha.com/ext-js/4-1/#!...n_architecture http://dev.sencha.com/deploy/ext-4.1.../treegrid.html Контроллер отображения инвойсов: Ext.define('ECS2.controller.controller_invoices', { extend: 'Ext.app.Controller', views: 'view_invoices_list', stores: ['treestore_invoices'], models: ['model_treestore_invoices'] }); Модель: Ext.define('ECS2.model.model_treestore_invoices', { extend: 'Ext.data.Model', fields: [ {name: 'invoice_date', type: 'date'}, {name: 'invoice_number', type: 'string'}, {name: 'invoice_item', type: 'string'} ] }); Сторедж: Ext.define('ECS2.store.treestore_invoices', { extend: 'Ext.data.TreeStore', rootVisible: false, model: 'ECS2.model.model_treestore_invoices', proxy: { type: 'ajax', url: 'load_invoices.php' }, autoLoad: true }); Вью: Ext.define('ECS2.view.view_invoices_list.js' ,{ extend: 'Ext.tree.Panel', alias : 'widget.view_invoices_list', title: 'Список накладных', store: 'treestore_invoices', model: 'ECS2.model.model_treestore_invoices', rootVisible: false, columns: [{ xtype: 'treecolumn', text: 'invoice_date', dataIndex: 'invoice_date', flex:2 },{ //xtype: 'treecolumn', text: 'invoice_number', dataIndex: 'invoice_number', flex:1 },{ //xtype: 'treecolumn', text: 'invoice_item', dataIndex: 'invoice_item', flex:1 }], dockedItems: [{ xtype: 'form', dock: 'top', bodyStyle: 'padding:2px 2px 2px 42px', frame: true, layout: 'hbox', height: 35, items: [{ xtype: 'datefield', fieldLabel: 'Дата с', name: 'log_date_start', width: 140, labelWidth: 50, margin: '0 10 0 0' },{ xtype: 'datefield', fieldLabel: 'Дата по', name: 'log_date_end', width: 140, labelWidth: 50, margin: '0 10 0 0' }] }] }); Сам php файл сценария выдачи данных интереса не представляет, там простое эхо (калька с примера офф. документации): echo " {'text':'.','children': [ invoice_date:'22.01.2012', invoice_number:'11111', invoice_item':'test1', expanded: true, children:[{ invoice_date:'22222', invoice_number:'22222', invoice_item:'test2', children:[{ invoice_date:'33333', invoice_number:'33333', invoice_item:'test3', leaf':true },{ invoice_date:'44444', invoice_number:'44444', invoice_item:'test4', leaf:true }] }] ]} "; Все js файлы раскиданы по папкам в соотв. с спецификацией. Все отображается окромя дерева во вью, php файл грузится, json с него вроде парсится, ошибок нигде нет. А вот само дерево не отображается. Второй день бьюсь, все никак дерево в MVC не ложится :-E |
Цитата:
|
Цитата:
|
Цитата:
Цитата:
GC: Tools -> Developer Tools (Ctrl+Shift+I) Ставим breakpoin и смотрим в Watch... |
Я пытался отлаживать через встроенный в Хром дебаггер, но не разобрался как достучаться к переменным и массивам MVC приложения.
Все контроллеры, стореджы, вью и т.п. - динамические дефайны, в них нельзя поставить точки останова. А через поставленный в app.js брикпоинт не смог "провалиться" до уровня конкретного созданного массива чтобы посадить его в вотч переменных. |
Ну, дык, в консоль выведите...
|
Часовой пояс GMT +3, время: 07:36. |