Results 1 to 3 of 3

Thread: TabPanel simple question.

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Moscow
    Posts
    137

    Default TabPanel simple question.

    I have TabPanel with already created Tab there, then some time later I need to create form and show it in this specific Tab.

    Code:
    {xtype:'tabpanel',
                   id:'tab_test',
                   activeTab: 0,
                   enableTabScroll:true,
                   height:100,
                   anchor:'100%',
                   defaults:{bodyStyle:'padding:2px',closable:false},
                   items:[{
                            title: 'Test',
                            id: 'test_tab',
                            iconCls: 'tabs',
                            layout:'fit',
                            html: 'Loading ...'
                         },{
                            title: 'Data',
                            id: 'data_tab',
                            iconCls: 'tabs',
                            layout:'fit',
                            html: 'Loading data...'
                         }]
    How can I put manually created form into tab which has id 'data_tab'? One more thing, is it possible to remove form from that tab and set there any form created later?

  2. #2
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    sounds like you're overnesting.

    a tab is nothing more than a Panel.
    a FormPanel is a subclass of a Panel, so just add a FormPanel directly to the TabPanel.

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Moscow
    Posts
    137

    Default

    I just need to show form with all the tabs on the tabpanel and then load code, create form and only then add this form to the tab. The thing is, that tab must show before the code of the form will be known and it must be at some specific position in a tabpanel.

    It works like autoload feature in tabpanel, but I have to modify code received from server before adding it to tabpanel.

    This what I'm trying to do:
    Code:
          Ext.onReady(function(){
            var _form = new Ext.FormPanel({
                             title:'Test Form',
                             labelAlign: 'right',
    
                             items: {xtype:'tabpanel',
                                     id:'tab_test',
                                     activeTab: 0,
                                     enableTabScroll:true,
                                     height:100,
                                     anchor:'100%',
                                     defaults:{bodyStyle:'padding:2px',closable:false},
                                     items:[{
                                             title: 'Test',                                         
                                             iconCls: 'tabs',
                                             layout:'fit',
                                             html: 'Loading ...'
                                    },{
                                             title: 'Data',
                                             id: 'data_tab',
                                             iconCls: 'tabs',
                                             layout:'fit',
                                             html: 'Loading data...'
                                    }]
                             }
            });
    
            var _loaded_form = new Ext.FormPanel({
                             title: 'Loaded panel...',
                             labelAlign: 'right',
                             defaultType: 'textfield',
                             items:[{
                                     fieldLabel: 'First Name',
                                     name: 'first'
                                    },{
                                     fieldLabel: 'Last Name',
                                     name: 'last'
                                    }]
            });
    
            var _window = new Ext.Window({
                          layout: 'fit',
                          width: 500,
                          height: 300,
                          plain: true,
                          items: _form,
                          iconCls: '',
                          title: 'Test',
                          modal:true,
                          hideBorders:true,
                          buttons: [{ text: 'Close',
                                      handler: function() {
                                      this.ownerCt.close();
                                    }
                                    },{
                                      text: 'Testing',
                                      handler: function(){
                                        var _tab = Ext.getCmp('data_tab');
                                        _tab = _loaded_form;
    
                                        Ext.getCmp('tab_test').doLayout();
                                      }
                                    }]
            });              
            _window.show();
          });
    How can it be done?

Posting Permissions

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