1. #1
    Ext User
    Join Date
    Oct 2008
    Posts
    4
    Vote Rating
    0
    jalberghini is on a distinguished road

      0  

    Default TAP PANEL MULTIPLE FORMS MULTICOLUN

    TAP PANEL MULTIPLE FORMS MULTICOLUN


    I want to do something that should be very simple. I have a 2 panel tab panel rendered to a div. Each tab has it's own form and that has multiple columns. The tab that is not active always displays wrong .I cannot get it to work and have tried all the things on the net.

    deferredRender:false,
    layoutOnTabChange:true,
    anchor:'100%'
    hideMode:'offsets'

    I am using 2.1.0 of extjs.
    The column layout is all
    messed up.
    Try it with and without this param. hideMode
    :'offsets'
    Here is a simple standalone sample.
    I need it in a div , because in the app that it's displayed in contains an Iframe of a larger app we are slowly converting.
    Please help
    Thanks
    Code:
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="/library/ext/2.1.0/resources/css/ext-all.css" />
        <script type="text/javascript" src="/library/ext/2.1.0/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/library/ext/2.1.0/ext-all.js"></script>
    
    
    <script type="text/javascript" language="javascript">  
             
    Ext.onReady(function(){
        // basic tabs 1, built from existing content
        var tabs = new Ext.TabPanel({
            renderTo: 'tabs1',
            activeTab: 0,
            deferredRender:false, 
            layoutOnTabChange:true,       
            defaults:{defaultType:'textfield' ,hideMode:'offsets',bodyStyle:'padding:5px' ,anchor:'100%',autoHeight: true},
            items:[{
                    title: 'Email Send',
                    contentEl: 'subscriber'
                },{
                    title: 'Subscriber Lists',
                    contentEl: 'EmailSend',   
                }
            ]
        });
        Ext.QuickTips.init();
    
        // turn on validation errors beside the field globally
        Ext.form.Field.prototype.msgTarget = 'side';
        var eMailForm = new Ext.FormPanel({
            labelAlign: 'top',
            title: 'Email Send',
            bodyStyle:'padding:5px',
            items: [{
                layout:'column',
                border:false,
                items:[{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Batch Name',
                        name: 'batchname',
                        allowBlank:false,
                        emptyText: 'Enter a Batch Name.',
                        anchor:'55%'
    
                    }, {
                        xtype:'textfield',
                        fieldLabel: 'Batch Name',
                        name: 'batchname2',
                        allowBlank:false,
                        emptyText: 'Enter a Batch Name.',
                        anchor:'55%'
                    } ]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Email to Send',
                        name: 'last',
                        anchor:'55%'
                     },{
                        xtype:'textfield',
                        fieldLabel: 'Subscriber List',
                        name: 'email',
                        vtype:'email',
                        anchor:'55%'
                    }]
                }]
            },{
                xtype:'tabpanel',
                plain:true,
                activeTab: 0,
                layoutOnTabChange:true,
                deferredRender:false,            
                height:235,
                defaults:{bodyStyle:'padding:10px'},
                items:[{
                    title:'Subscriber List',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',
    
                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false,
                        value: 'Jack'
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: 'Slocum'
                    },{
                        fieldLabel: 'Company',
                        name: 'company',
                        value: 'Ext JS'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }]
                },{
                    title:'Results',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',
    
                    items: [{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }]
                },{
                    cls:'x-plain',
                    title:'Preview',
                    layout:'fit',
                    items: {
                        xtype:'htmleditor',
                        id:'preview',
                        fieldLabel:'Preview'
                    }
                }]
            }],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });   
         var subscriberForm = new Ext.FormPanel({
            labelAlign: 'top',
            title: 'Subsciber Lists',
            bodyStyle:'padding:5px',  
            items: [{
                layout:'column',
                border:false,
                items:[{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Batch Name',
                        name: 'Abatchname',
                        allowBlank:false,
                        emptyText: 'Enter a Batch Name.',
                        anchor:'55%'
                    }, {
                        xtype:'textfield',
                        fieldLabel: 'Batch Name',
                        name: 'Abatchdname',
                        allowBlank:false,
                        emptyText: 'Enter a Batch Name.',
                        anchor:'55%'
                    }]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Email to Send',
                        name: 'alast',
                        anchor:'55%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Subscriber List',
                        name: 'aemail',
                        vtype:'email',
                        anchor:'55%'
                    }]
                }]
            }],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        eMailForm.render('EmailSend');
        subscriberForm.render('subscriber');
    });
    
    </script>
    <script type="text/javascript" src="emailsend.js"></script>      
    </head>
    <body>
    
    <div class='bold BG_mediumBlue' style='padding: 10px; border-bottom: 1px solid black; margin-bottom: 10px; font-size: 20px'>
    Marketing Email Command Center
    </div>
    
        <div id="tabs1">
            <div id="EmailSend" >
            </div>
            <div id="subscriber" >
            </div>
        </div>
    
    </body>
    </html>

  2. #2
    Sencha User garraS's Avatar
    Join Date
    Oct 2007
    Location
    Argentina
    Posts
    203
    Vote Rating
    0
    garraS is on a distinguished road

      0  

    Default


    I think that nobody want to answer your problem becouse you don't use code tags.

  3. #3
    Ext User
    Join Date
    Oct 2008
    Posts
    4
    Vote Rating
    0
    jalberghini is on a distinguished road

      0  

    Default Code tags fixed.

    Code tags fixed.


    I fixed it thanks alot.
    if anyone can help, it would be appreciated if we cannot solve this we will be dropping extjs.
    The sample run by it's self and is small and simple.

    Thanks.
    Jon

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Configure the non-active Panels of the TabPanel with hideMode: 'offsets'

    This is not on the TabPanel, but on the child Panels of it which may be hidden.

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Add hideMode:'offsets' to the tabs.

  6. #6
    Ext User
    Join Date
    Oct 2008
    Posts
    4
    Vote Rating
    0
    jalberghini is on a distinguished road

      0  

    Default hideMode:'offsets' DOES NOT WORK.

    hideMode:'offsets' DOES NOT WORK.


    I tried hideMode:'offsets' on the formpanel and tabpanel items and the columns. If you could just please show me where it should be put.

    Thanks Jon

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    1. hideMode:'offsets' should be used in the tabpanel items.
    2. Why are you RENDERING inside a layout? What is wrong with:
    Code:
    var tabs = new Ext.TabPanel({
      ...
      items:[subscriberForm, eMailForm]
    });

  8. #8
    Ext User
    Join Date
    Oct 2008
    Posts
    4
    Vote Rating
    0
    jalberghini is on a distinguished road

      0  

    Default Thanks, It worked.

    Thanks, It worked.


    RENDERING inside a layout was what was causing the problem. It works great now . I am new to this is there any article you could send me to about item and layouts.
    Code:
         var tabs = new Ext.TabPanel({
            renderTo: 'tabs1',
            activeTab: 0,
            deferredRender:false, 
            layoutOnTabChange:true,       
            defaults:{defaultType:'textfield' ,hideMode:'offsets',bodyStyle:'padding:5px' ,anchor:'100%',autoHeight: true},
            items:[eMailForm,subscriberForm]
        });
    Thanks again,
    Jon

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The API docs contain lots of explanation.

    http://extjs.com/deploy/dev/docs/?class=Ext.Container

    And there's lots here: http://extjs.com/learn/

Thread Participants: 3