Пожалуйста приведите пример работы ExtJS 4 с TreeStore с загрузкой данных с сервера

[Allan Stark]

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

[DjDiablo]

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 можно почитать здесь

[Allan Stark]

Прошу прощения, отдыхал.
Так получается для стореджа тристора модели сценарием нужно специфически формировать данные и кроме того явно передавать "директивы" построения дерева в json ?

[DjDiablo]

children- дочерние элементы узла
"expanded"- раскрыт/закрыт узел

возможно эти "директивы можно переопределить", но я привёл пример по умолчанию

[Allan Stark]

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 не ложится

[Ex_Soft]

php файл грузится, json с него вроде парсится, ошибок нигде нет

А в store данные есть?

[Allan Stark]

А в store данные есть?

Извините за глупый вопрос, а как проверить ? Считать их из стореджа в консоль ? Или может есть какое-то дополнение к хрому/файерфоксу, отображающее состояние стореджей ?

[Ex_Soft]

Считать их из стореджа в консоль ?

Можно и в консоль вывести...

Или может есть какое-то дополнение к хрому/файерфоксу, отображающее состояние стореджей ?

FF: Firebug
GC: Tools -> Developer Tools (Ctrl+Shift+I)
Ставим breakpoin и смотрим в Watch...

[Allan Stark]

Я пытался отлаживать через встроенный в Хром дебаггер, но не разобрался как достучаться к переменным и массивам MVC приложения.
Все контроллеры, стореджы, вью и т.п. - динамические дефайны, в них нельзя поставить точки останова.
А через поставленный в app.js брикпоинт не смог "провалиться" до уровня конкретного созданного массива чтобы посадить его в вотч переменных.

[Ex_Soft]

Ну, дык, в консоль выведите...