PDA

View Full Version : Splitting form between multiple tabs



hallikpapa
10 Aug 2009, 6:40 AM
I have a tabpanel with 3 tabs, which contains 3 forms and data for them. All generated from php / meta-data plugin.


new Ext.TabPanel({
id: 'meta-form',
border: false, // already wrapped so don't add another border
activeTab: 0, // second tab initially active
tabPosition: 'bottom',
listeners: {
tabchange: function(tabPanel,newTab){
var thisObj = newTab.getUpdater();
console.log(thisObj);
if(thisObj) thisObj.refresh();
}
},
items: [{
title:'Details',
id: 'user-user-form',
title:'Info',
xtype:'metaform',
//url:'extjs.php?details=user'
url:'extjs.php?user_details=user-user-form'
}, {
id: 'user-permission-form',
title:'Permissions',
xtype:'metaform',
columnCount: 1,
//url:'extjs.php?details=services'
url:'extjs.php?user_details=user-permission-form'
}, {
id: 'user-meta-form',
title:'Meta Data',
xtype:'metaform',
//url:'extjs.php?details=meta'
url:'extjs.php?user_details=user-meta-form'
}]
})
}, {

Notice the tabChange listener. So when I click on a row in a grid, the activeTab is updated with new data.

listeners: {
rowselect: function(smObj, rowIndex, record) {
selRecordStore = record;
var form = Ext.getCmp('meta-form').activeTab;
form.load({params:{user_id: record.id}});
But changing between the other two tabs do not update with that currently selected user's data. I can see why, but I am curious as to how I can do a form.load like I am in my grid listener to update a tab with the currently selected row?

I am wondering if I have my url's in the wrong place, and should just do one load of the whole form, and return 3 id's from the PHP meta-form config so it's all loaded at once and no more remote calls are made on tab click?

Trying the last option I mention directly above gives me an error:
uncaught exception: [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIXMLHttpRequest.open]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: http://dev.com/scripts/ext-base.js :: i :: line 7" data: no]

So I figured that has to do with the meta form and my best option would be to pass the user id somehow to the new form tab when it's clicked.

Thanks for any tips.

Animal
10 Aug 2009, 7:01 AM
Use deferredRender: false on your TabPanel so that inactive tabs get rendered.

You'll also need to then configure them with hideMode: 'offsets'

hallikpapa
10 Aug 2009, 7:48 AM
What purposedoes hideMode: offsets do on each item in the tab panel?

Thanks.

Animal
10 Aug 2009, 8:02 AM
Hides by moving offscreen instead of using display: none which breaks layouts.

hallikpapa
10 Aug 2009, 8:07 AM
thank you.