PDA

View Full Version : NestedList in a Panel ?



myput
19 Sep 2011, 7:02 AM
Hey,

i would like to create a nestedList in a panel but some bugs come.
i have my viewDirectoryList:


WPApp.views.viewDirectoryList = {
xtype: 'panel',
id: 'directory',
layout: 'card',
title: 'Annuaire',
iconCls: 'home',
items: [{
xtype: 'list',
title: 'Directory',
layout: 'fit',
id: 'directorypanel',
store: WPApp.storeDirectoryList,
}],
dockedItems: [{
xtype: 'toolbar',
title: 'Annuaire',
}],
listeners: {
activate: function(){
WPApp.controllers.restoreActiveItem();
}
}
}

but xtype: 'list', or xtype: 'nestedList' don't work.
I have seen some examples with that, but mine don't work ... i don't really know Why.
And it's a nestedList not a List i would like, then i don't know if 'list' is good.
Or is there an another way?

I think the rest is good:
StoreDirectoryList:


Ext.ns('WPApp.stores');


WPApp.stores.storeDirectoryList = new Ext.data.Store({
model: 'modelDirectoryList',
data : [
{Name: 'ltgrfed'},
{Name: 'rdftgyhu'},
]
});

And the model:


Ext.ns('WPApp.models');


Ext.regModel('modelDirectoryList', {
idProperty: 'modelDirectoryList',
fields: [ {name: 'Name', type: 'string'},
]
});



Can you help me please?

existdissolve
19 Sep 2011, 5:46 PM
Hi @myput--

If you're wanting to use a NestedList, you probably don't need to nest it inside of another panel. Unlike Ext.List, Ext.NestedList extends Ext.Panel, so all of the things you're wanting from Panel (title, iconCls, etc.) will be available on NestedList.

Also, I think you might have a typo in the store assignment in the list. I think you want:

store: WPApp.stores.storeDirectoryList
instead of

store: WPApp.storeDirectoryList

Hope this helps!

myput
19 Sep 2011, 11:15 PM
Oh Okey, then i don't need to extend xtype in list or something, panel is good ? thanks good point.

And thank you for the bug, yes i saw it; but i have a white page when i correct like that ... maybe there is errors in the store.

myput
20 Sep 2011, 6:12 AM
Thanks the post is resolved.

I put my files if you want:

NavigationList View:


var data = {
text: '0',
items: [{
text: 'Restaurants',
items: [{
Name: 'Domino Pizza',
leaf: true
},{
Name: 'La plazza',
leaf: true
},{
Name: 'Le chef doeuvre',
leaf: true
}]
},{
text: 'Pub',
items: [{
Name: 'Ayers Boat',
leaf: true
},{
Name: 'Ayers Rock',
leaf: true
},{
Name: 'Le mont blanc',
leaf: true
},{
Name: 'pub de chez nous',
leaf: true
},{
Name: 'bar des amis',
leaf: true
},{
Name: 'chez regis',
leaf: true
}]
},{
text: 'Hotel',
items: [{
Name: 'Le Buibui',
leaf: true
},{
Name: 'autre',
leaf: true
},{
Name: 'Le chef doeuvre',
leaf: true
}]
}]
};


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


var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
},
});


var inputPanel;
var inputToolbar = new Ext.Toolbar({
dock : 'top',
title: 'Description',
items: [
{
ui:'back',
text:'Back',
handler: function () {
nestedList.show({type:'slide',direction:'right'});
inputPanel.hide();
}
}
]
});


var nestedList = new Ext.NestedList({
title: 'Navigation',
fullscreen: true,
getItemTextTpl: function(recordnode) {
return '<div>{text} {Name}</div>';
},
store: store,
//store: WPApp.stores.NavigationListStore,
listeners: {
itemdoubletap: function(n){
var Name = this.getActiveItem().getSelectedRecords()[0].get('Name');
inputPanel = new Ext.Panel({
fullscreen: true,
dockedItems: [inputToolbar],
items: [{
html: 'Nom: '+ Name,
}],
});
inputPanel.show();
this.hide();
}
}
});


WPApp.views.NavigationListView = Ext.extend(Ext.Panel, {
title: 'Navigation',
iconCls: 'home',
layout: "card",
items: [nestedList],
initComponent: function() {
WPApp.views.NavigationListView.superclass.initComponent.call(this);
},
});


Ext.reg('NavigationListView', WPApp.views.NavigationListView);



And for the Viewport:


WPApp.views.Viewport = Ext.extend(Ext.TabPanel,{
fullscreen: true,
layout: "card",
id: "main",
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
cardSwitchAnimation: {
type: 'slide'
},
defaults: {
scroll: 'vertical'
},
initComponent: function() {
Ext.apply(WPApp.views, {
NavigationListView: new WPApp.views.NavigationListView(),
SearchFormView: new WPApp.views.SearchFormView(),
CreditViewView: new WPApp.views.CreditView(),
});
this.items = [
WPApp.views.NavigationListView,
new Ext.Panel({
dockedItems: {
title: "Search",
dock: "top",
xtype: "toolbar"
},
layout: "card",
iconCls: "search",
title: "Search",
id: "searchcard",
fullscreen: true,
items: WPApp.views.SearchFormView
}),
new Ext.Panel({
dockedItems: {
title: "Credits",
dock: "top",
xtype: "toolbar"
},
layout: "card",
iconCls: "more",
title: "Credits",
fullscreen: true,
items: WPApp.views.CreditView
})
];
WPApp.views.Viewport.superclass.initComponent.call(this);
this.doComponentLayout();
}
})




Hop, that's all, a nestedList in a Panel
I must still arrange the code in multiples file, cause it's dirty, but it's working.

Thanks everybody :D