PDA

View Full Version : How to get a NestedList to show in panel



grahamsimmons
20 Jan 2011, 3:32 PM
Hi all,

I have a TabPanel with 3 items (I think these 3 are called panels are they not?) and when the 3rd panel is clicked I want to show a list and when a list item is selected, a sub-list slides in and have a toolbar show a back button and a breadcrumb. A sub-list can have many other sub-lists. At some point an item will not have a sub-list and thus I want to show that items details in another panel.

I have grabbed code from elsewhere to try and get the 3rd panel to load the list and sub-lists and the final panel showing the last selected item details, but I have no idea how to do any of this once the 3rd panel is clicked. :-/ Below is the JSON and code I have so far.

I've tried looking at the Kitchensink\User Interface\Nested List example but cannot get my head around it.

Please help :((



JSON


{
"text": "Cars",
"items": [{
"text": "Asia",
"items": [{
"text": "Japan",
"items": [{
"text": "Acura",
"leaf": true
},{
"text": "Honda",
"leaf": true
},{
"text": "Infiniti",
"leaf": true
},{
"text": "Mitsubishi",
"leaf": true
},{
"text": "Nissan",
"leaf": true
},{
"text": "Scion",
"leaf": true
},{
"text": "Subaru",
"leaf": true
},{
"text": "Toyota",
"leaf": true
}]
},{
"text": "Korea",
"items": [{
"text": "Hyundai",
"leaf": true
},{
"text": "Kia",
"leaf": true
}]
}]
},{
"text": "United Kingdom",
"items": [{
"text": "Aston Martin",
"leaf": true
},{
"text": "Bentley",
"leaf": true
},{
"text": "TVR",
"leaf": true
},{
"text": "Land Rover",
"leaf": true
}]
},{
"text": "Europe",
"items": [{
"text": "Germany",
"items": [{
"text": "Audi",
"leaf": true
},{
"text": "BMW",
"leaf": true
},{
"text": "Opel",
"leaf": true
},{
"text": "Porsche",
"leaf": true
},{
"text": "Volkswagen",
"leaf": true
}]
},{
"text": "France",
"items": [{
"text": "CitroŽn",
"leaf": true
},{
"text": "Renault",
"leaf": true
},{
"text": "Peugeot",
"leaf": true
}]
}]
},{
"text": "United States",
"items": [{
"text": "Buick",
"leaf": true
},{
"text": "Cadillac",
"leaf": true
},{
"text": "Chevrolet",
"leaf": true
},{
"text": "Chrysler",
"leaf": true
},{
"text": "Ford",
"leaf": true
},{
"text": "Jeep",
"leaf": true
},{
"text": "Oldsmobile",
"leaf": true
},{
"text": "Saturn",
"leaf": true
},{
"text": "Tesla",
"leaf": true
}]
}]
}


JS


Ext.setup({
tabletStartupScreen: 'images/tablet_startup.png',
phoneStartupScreen: 'images/phone_startup_oas.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
//------------------------------------------------------------
// Global variables
//------------------------------------------------------------

var panelHome, panelPrice, panelProduct, toolbarTop, panelRoot;

//------------------------------------------------------------
// Child panels
//------------------------------------------------------------

panelHome = {
title: 'Home',
iconCls: 'home',
html: 'This is the home page.'
}

//------------------------------

panelPrice = {
title: 'Prices',
iconCls: 'star',
html: 'This is the prices page.'
}

//------------------------------

Ext.regModel('Cars', {
fields: [
{name: 'text', type: 'string'}
]
});

var store = new Ext.data.TreeStore({
model: 'Cars',
proxy: {
type: 'ajax',
url: 'http://www.grahamsimmons.co.uk/sencha/play/php/carregions.json',
reader: {
type: 'tree',
root: 'items'
}
}
});

var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Cars',
displayField: 'text',
store: store
});
panelProduct = {
title: 'Products',
iconCls: 'bookmarks',
html: 'Show level 1 of JSON result as a list. Then once level 1 item clicked slide its sub-level list in .. and so on until the last level is selected then we slide in another panel and show details of that item. Every panel that slides in needs a back button and a title in a toolbar to show what we are looking at.'
}
//------------------------------------------------------------
// Root panel
//------------------------------------------------------------

toolbarTop = new Ext.Toolbar({
dock: 'top',
title: 'Offord & Sons'
});

panelRoot = new Ext.TabPanel({
id: 'rootPanel',
fullscreen: true,
animation: {
type: 'slide',
cover: true
},
defaults: {
scroll: 'vertical',
bodyPadding: 5
},
dockedItems: [toolbarTop],
tabBarDock: 'bottom',
items: [panelHome, panelPrice, panelProduct]
});

}

});