Three days, that's right, three days I've been googling and wrestling with this problem. How do I put a form, inside a tabpanel, inside a form, inside a tabpanel? No, I didn't write that too many times, what I'm after is a set of components inside a tabpanel inside a parent tabpanel. It's simply tabs inside tabs. Not something that I think is good practice, however, something I needed to do.
I pulled it apart to it's most primary issue, a form with a tabpanel in it with components inside a tab page. Here's the thing, YOU CAN'T. Well, not that I could find. The secret is, add the tabpanel to a panel NOT a formpanel. Apparently you can not nest form panels inside form panels. A FormPanel is a mixture of a Panel with form layout and a BasicForm object. You can only have one BasicForm in a hierarchy, so you need to just use normal panels in a form layout in children.
var ParentForm = new Ext.Panel({
labelAlign: 'side',
border: false,
frame: true,
autoHeight:true,
layout: 'column'});
var MyTabPanel = new Ext.TabPanel({
width:400,
height:300,
frame:true,
deferredRender:false
});
var MyTabSheet = new Ext.Panel({
title: 'New Tab',
autoHeight: true });
var MyTabSheetForm = new Ext.FormPanel({
labelAlign: 'side',
border: false,
frame: true,
width: 300,
layout: 'column',
height: 300,
items:[{
xtype:'textfield',
fieldLabel: 'Office Switch',
name: 'switch',
anchor:'95%'}]
});
// ---- add the tab sheet to the tab panel
MyTabPanel.add(MyTabSheet);
// ---- set the active tab
MyTabPanel.setActiveTab(0);
// ---- add the formpanel to the tabsheet
MyTabSheet.add(MyTabSheetForm);
Thursday, June 11, 2009
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment