Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.06.2012, 11:57
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

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

Последний раз редактировалось Allan Stark, 27.06.2012 в 14:20.
Ответить с цитированием
  #2 (permalink)  
Старый 27.06.2012, 18:04
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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 можно почитать здесь
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 27.06.2012 в 18:30.
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2012, 13:09
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

Прошу прощения, отдыхал.
Так получается для стореджа тристора модели сценарием нужно специфически формировать данные и кроме того явно передавать "директивы" построения дерева в json ?
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2012, 15:14
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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

возможно эти "директивы можно переопределить", но я привёл пример по умолчанию
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Ответить с цитированием
  #5 (permalink)  
Старый 26.07.2012, 18:20
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

Сообщение от DjDiablo Посмотреть сообщение
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 не ложится

Последний раз редактировалось Allan Stark, 26.07.2012 в 18:28.
Ответить с цитированием
  #6 (permalink)  
Старый 26.07.2012, 18:38
Аватар для Ex_Soft
Профессор
Отправить личное сообщение для Ex_Soft Посмотреть профиль Найти все сообщения от Ex_Soft
 
Регистрация: 19.12.2009
Сообщений: 164

Сообщение от Allan Stark Посмотреть сообщение
php файл грузится, json с него вроде парсится, ошибок нигде нет
А в store данные есть?
__________________
"Helo, word!" - 17 errors 56 warnings
Ответить с цитированием
  #7 (permalink)  
Старый 26.07.2012, 18:59
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

Сообщение от Ex_Soft Посмотреть сообщение
А в store данные есть?
Извините за глупый вопрос, а как проверить ? Считать их из стореджа в консоль ? Или может есть какое-то дополнение к хрому/файерфоксу, отображающее состояние стореджей ?
Ответить с цитированием
  #8 (permalink)  
Старый 26.07.2012, 21:33
Аватар для Ex_Soft
Профессор
Отправить личное сообщение для Ex_Soft Посмотреть профиль Найти все сообщения от Ex_Soft
 
Регистрация: 19.12.2009
Сообщений: 164

Сообщение от Allan Stark Посмотреть сообщение
Считать их из стореджа в консоль ?
Можно и в консоль вывести...
Сообщение от Allan Stark Посмотреть сообщение
Или может есть какое-то дополнение к хрому/файерфоксу, отображающее состояние стореджей ?
FF: Firebug
GC: Tools -> Developer Tools (Ctrl+Shift+I)
Ставим breakpoin и смотрим в Watch...
__________________
"Helo, word!" - 17 errors 56 warnings
Ответить с цитированием
  #9 (permalink)  
Старый 27.07.2012, 11:31
Аспирант
Отправить личное сообщение для Allan Stark Посмотреть профиль Найти все сообщения от Allan Stark
 
Регистрация: 24.04.2010
Сообщений: 87

Я пытался отлаживать через встроенный в Хром дебаггер, но не разобрался как достучаться к переменным и массивам MVC приложения.
Все контроллеры, стореджы, вью и т.п. - динамические дефайны, в них нельзя поставить точки останова.
А через поставленный в app.js брикпоинт не смог "провалиться" до уровня конкретного созданного массива чтобы посадить его в вотч переменных.
Ответить с цитированием
  #10 (permalink)  
Старый 27.07.2012, 14:17
Аватар для Ex_Soft
Профессор
Отправить личное сообщение для Ex_Soft Посмотреть профиль Найти все сообщения от Ex_Soft
 
Регистрация: 19.12.2009
Сообщений: 164

Ну, дык, в консоль выведите...
__________________
"Helo, word!" - 17 errors 56 warnings
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
"success" и "failure" приём данных с сервера ??? potkin ExtJS 8 30.05.2012 09:27