PDA

View Full Version : Nested List in a popup panel



hemant1
14 Jun 2011, 4:17 AM
Hi How can i add a nested list to the Popup Panel ?


Ext.setup({
onReady: function() {

var pnlMain = new Ext.Panel({
fullscreen: true,
html: 'This is an example',
dockedItems: [{
xtype: 'toolbar',
title: 'Example',
items: [{
text: 'Show PopUp',
handler: function(){
popup.show();
}
}]
}]
});

var popup = new Ext.Panel({
floating: true,
centered: true,
modal: true,
width: 300,
height: 400,
styleHtmlContent: true,
html: 'Hello! I\'m a PopUp',
dockedItems: [{
xtype: 'toolbar',
title: 'PopUp',
items: [{
xtype: 'spacer'
},{
text: 'Close',
handler: function(){
popup.hide();
}
}]
}]
});
}
});

bclinton
14 Jun 2011, 4:39 AM
You would add it to an items array in your popup panel, much like you added the button to the toolbar of your main panel.

hemant1
14 Jun 2011, 5:09 AM
Thank you so much for the reply

As u say i add the menu in popup item array but it doen't work
if possible pls give your guidence
how can i display the nested list in it.




var popup = new Ext.Panel({
floating: true,
centered: true,
modal: true,
width: 300,
height: 400,
styleHtmlContent: true,
//html: 'Hello! I\'m a PopUp',
dockedItems: [{
xtype: 'toolbar',
title: 'PopUp',
items: [{
xtype: 'spacer'
},{
text:'Main Menu',
items:[{
text:'submenu'
}]
},{
text: 'Close',
handler: function(){
popup.hide();
}
}]
}]
});


Thanks,

bclinton
14 Jun 2011, 7:20 AM
Not sure what you're doing there. It looks like you tried adding it to the items array of the dockedItems rather than the panel items.

I meant put it in like this:


var popup = new Ext.Panel({
floating: true,
centered: true,
modal: true,
width: 300,
height: 400,
styleHtmlContent: true,
html: 'Hello! I\'m a PopUp',
dockedItems: [{
xtype: 'toolbar',
title: 'PopUp',
items: [{
xtype: 'spacer'
},{
text: 'Close',
handler: function(){
popup.hide();
}
}]
}],
items : [
my_list
]
});

hemant1
14 Jun 2011, 9:56 PM
Hi,

Thanks agian,

Now i created the list like this
but it also doesn't work



var popup = new Ext.Panel({
floating: true,
centered: true,
modal: true,
width: 300,
height: 400,
styleHtmlContent: true,
//html: 'Hello! I\'m a PopUp',

dockedItems: [{
xtype: 'toolbar',
title: 'PopUp',
items: [{
xtype: 'spacer'
},{
text: 'Close',
handler: function(){
popup.hide();
}
}],
items:[nestedList]
}]


});

var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
leaf:true
},{
text: 'Coffee',
leaf: true
},{
text: 'Espresso',
leaf: true
},{
text: 'Redbull',
leaf: true
},{
text: 'Coke',
leaf: true
},{
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
title:'Test',
displayField: 'text',
store: store
});

hemant1
14 Jun 2011, 10:01 PM
sorry like this



var popup = new Ext.Panel({
floating: true,
centered: true,
modal: true,
width: 300,
height: 400,
styleHtmlContent: true,
//html: 'Hello! I\'m a PopUp',

dockedItems: [{
xtype: 'toolbar',
title: 'PopUp',
items: [{
xtype: 'spacer'
},{
text: 'Close',
handler: function(){
popup.hide();
}
}]

}],
items:[nestedList]


});

var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
leaf:true
},{
text: 'Coffee',
leaf: true
},{
text: 'Espresso',
leaf: true
},{
text: 'Redbull',
leaf: true
},{
text: 'Coke',
leaf: true
},{
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
title:'Test',
displayField: 'text',
store: store
});

bclinton
14 Jun 2011, 11:30 PM
If your code is in that order you are adding the nested list to the panel before you create it.

hemant1
15 Jun 2011, 12:28 AM
Now its working,
i got the object of nested list

but the problem is popup panel shows only title i.e.'Test'
it doesn't display the list on popup panel

thanks

bclinton
15 Jun 2011, 12:37 AM
Your store definition is off.

Where you have root: data, you want data: data.

Take a closer look at the config options in Ext.data.store: http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.Store


data : Array
Optional array of Model instances or data objects to load locally. See "Inline data" above for details.

hemant1
15 Jun 2011, 1:07 AM
hi,

list is displaying properly
but in the nested list i give the fullscreen:true
so the my list is displaying like this
26582

how can i give the height and width of the nested list so i can display the list properly in popup panel