Пожалуйста приведите пример работы 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. |