Results 1 to 5 of 5

Thread: Splitting form between multiple tabs

  1. #1
    Sencha User
    Join Date
    Jun 2007
    Posts
    266

    Default Splitting form between multiple tabs

    I have a tabpanel with 3 tabs, which contains 3 forms and data for them. All generated from php / meta-data plugin.

    Code:
    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.
    Code:
    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.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Use deferredRender: false on your TabPanel so that inactive tabs get rendered.

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

  3. #3
    Sencha User
    Join Date
    Jun 2007
    Posts
    266

    Default

    What purposedoes hideMode: offsets do on each item in the tab panel?

    Thanks.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Hides by moving offscreen instead of using display: none which breaks layouts.

  5. #5
    Sencha User
    Join Date
    Jun 2007
    Posts
    266

    Default

    thank you.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •