PDA

View Full Version : Is it possible to use a NestedList in a formPanel?



profunctional
14 Jul 2010, 7:41 AM
I just tried to add a nestedList into a formPanel with no success.

My goal is to allow the user to select from the list, much like the native iPhone apps, instead of using a drop-down list. Is this type of nesting possible?

evant
14 Jul 2010, 7:49 AM
Yup:



Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function(){

var nestedList = new Ext.NestedList({
width: 200,
height: 200,
items: [{
text: 'Option A',
items: [{
text: 'Option A.1',
customAttribute: 123,
items: [{
text: 'Option A.1.a'
},{
text: 'Option A.1.b'
}]
},{
text: 'Option A.2',
customAttribute: 389
}]
},{
text: 'Option B',
items: [{
text: 'Option B.1',
customAttribute: 233
},{
text: 'Option B.2',
customAttribute: 2390
}]
},{
text: 'Option C',
items: [{
text: 'Option C.1',
customAttribute: 903
},{
text: 'Option C.2',
customAttribute: 77
}]
}]
});

var foo = new Ext.form.FormPanel({
items: {
xtype: 'fieldset',
title: 'Favorite color',
items: nestedList
}
});

new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [{
xtype: 'container',
title: 'Tab 1',
layout: 'fit',
items: foo
}, {
title: 'Tab 2',
html: '2',
cls: 'card2'
}, {
title: 'Tab 3',
html: '3',
cls: 'card3'
}]
});
}
});

profunctional
14 Jul 2010, 8:01 AM
Thanks for all the quick responses Evan. Using your code, the list rendered a thin line. I have attached a screenshot. Is something missing?

evant
14 Jul 2010, 8:06 AM
Not if you copied it exactly... chances are you're missing dimensions somewhere.

profunctional
14 Jul 2010, 8:23 AM
Thanks Evan, worked my way backwards using your code and it works just fine. Is it possible to hide the Toolbar?

Thanks again.

evant
14 Jul 2010, 8:26 AM
Not without modifying the class, but if you have a look it's pretty trivial.