PDA

View Full Version : NestedList help selection items no showing



supermonchi
27 Mar 2011, 10:23 PM
Not having much luck with this NestedList business.

Can anyone tell me why this is giving me a blank?

For the Store I tried using direct structure and with JSON url. Neither worked.

If I append "fullscreen: true" in the app.js NestedList parameter like so:

this.navPanel = new Ext.NestedList({
fullscreen: true,
store: expense.categoriesStore,
title: 'Expenses Title'
});
This renders the title "Expenses Title" and nothing else.

Here's my code.

app.js
Ext.ns('expense');

Ext.setup({
onReady: function() {
this.ui = new expense.ContainerPanel({
});
}
});

expense.ContainerPanel = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
initComponent: function() {
this.navPanel = new Ext.NestedList({
store: expense.categoriesStore,
title: 'Expenses Title'
});

expense.ContainerPanel.superclass.initComponent.call(this);
}
});
categories_model.js
Ext.regModel('CategoriesModel', {
fields: [{
name: 'text',
type: 'string'
}]
}
);
categories_store.js
/*
expense.Structure = [{
text: 'Test',
items: [{
text: 'Test a',
items: [],
leaf: true
}, {
text: 'Test b',
items: [],
leaf: true
}]
}, {
text: 'Test 2',
items: [],
leaf: true
}];
*/
expense.categoriesStore = new Ext.data.TreeStore({
model: 'CategoriesModel',
/* root: {
items: expense.Structure
},
*/ proxy: {
type: 'ajax',
url: 'app/json/categories.json',
reader: {
type: 'tree',
root: 'items'
}
}
}
);


categories.json
{
"text": "Expenses",
"items":
[
{
"text": "Food",
"items":
[
{
"text": "Groceries",
"items": [],
"leaf": true
},
{
"text": "Eating out",
"items": [],
"leaf": true
}
]
},
{
"text": "Entertainment",
"items":
[
{
"text": "Events",
"items": [],
"leaf": true
},
{
"text": "Movies",
"items": [],
"leaf": true
},
{
"text": "Hobbies",
"items": [],
"leaf": true
}
]
},
{
"text": "Transport",
"items":
[
{
"text": "Fuel",
"items": [],
"leaf": true
},
{
"text": "Public Transport",
"items": [],
"leaf": true
}
]
}
]
}