NestedList and TreeStore with ajax proxy

[lukasz_b]

All,

I have a problem with NestedList component which reads data from a remote URL using TreeStore.

I created model:


Ext.regModel('ListItem', {
fields: [{ name: 'text', type: 'string' }, { name: 'menuItemId', type: 'int' }, { name: 'leaf', type: 'bool'}],
hasMany: { model: 'ListItem', name: 'items' }
});

which is a model which is generated and returned from my backend (url-based proxy).

My TreeStore definition looks like this:


this.store = new Ext.data.TreeStore({
model: 'ListItem',
idProperty: 'menuItemId',
proxy:
{
type: 'ajax',
url: 'MobileDashboard/MenuItems?periodId=4'
}
});

the nested list component is generated, but only top-level items are displayed (all items in all sub-menus are returned) - can we change treestore or nestedlist to parse the complete JSON response and generate complete tree instead just the top-level menu?

I also noticed that when I tap each menu item, a new request is fired, with node parameter always set to empty string: "node=". Maybe if I could get the node thing working I could rewrite by backend code to return only sub-menus (but to be perfectly honest, I'm more interested in sending the complete ListItems only once - see my question above).

thanks,
Łukasz

[gcallaghan]

I have a treestore that consumes a nested json object in one call. it looks like...



Ext.regModel('PartCategoryModel',{
fields:[
'id',
'text',
'type',
'tease'
]
});

parts.store = new Ext.data.TreeStore({

model: 'PartCategoryModel',
id:'parts-store',
clearOnPageLoad:false,
proxy:{
type: 'ajax',
url:'fixup/categories',
reader:{
type: 'tree',
root: 'items'
}
}

});

parts.List = Ext.extend(Ext.NestedList,{
title:'Parts',
scroll:'none',
store:'parts-store',
getItemTextTpl:function(){
return [
'<div>',
'<div>',
'{text}',
'</div>',
'<div>',
'{tease}',
'</div>',
'</div>'
].join('');
}
});
Ext.reg('parts-list',.parts.List);


This is my early foray into the data package as well, so I'm no expert yet. But this works for me.

[lukasz_b]

the reader object did the trick!

thanks,
Lukasz

[f4ils0me]

I have an additional question to this example.
Let's assume I have a model with a fixed depth like the following one:


Ext.regModel('Page', {
fields:[
{name: 'titel', type: 'string'},
{name: 'id', type: 'int'}
],
//belongsTo: 'Survey',
hasMany: [
{model: 'Question', name: 'questions'}
]
});

var surveyStore = new Ext.data.Store({
model: 'Page',
autoLoad: true,
storeId: 'surveyStore',
proxy: {
type: 'ajax',
url: '/json/survey/',
reader: {
type: 'json',
root: 'survey'
}
}
});

Ext.regModel("Question", {
fields: [
{name: "id", type: "int"},
{name: "ident", type: "string"},
{name: "text", type: "string"},
{name: "value", type: "string"},
//{name: "trigger", type: "string"},
//{name: "trigger_value", type: "string"},
{name: "page_id", type: "int"},
{name: "xtype", type: "string"},
],
belongsTo: 'Page',
hasMany: [
{model: 'AnswerOpt', name: 'options'}
]
});

Ext.regModel("AnswerOpt", {
fields: [
{name: "text", type: "string"}
],
belongsTo: 'Question'
});


I can load this into a regular Store, access all pages and their related questions via the questions() accessor.
The top level component, in this example the Page does not get changed, but the value field of Question will contain the answer of that specific question.
Now i'd like to sync the data back to the server via the sync() method of the topLevel Store.
This results in a POST request to the proxy containing only informations of the Page object.
Do I need to use a TreeStore to get a POST request that also contains the related data?
Also I noticed that all items in the related store are marked as dirty right after loading them into the store.
So that can't be good either...
Any suggestions?
Thank you verry much!