TAP PANEL MULTIPLE FORMS MULTICOLUN

**jalberghini** · 10 Oct 2008 6:27 AM

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>

**garraS** · 10 Oct 2008 6:36 AM

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

**jalberghini** · 10 Oct 2008 6:55 AM

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

**Animal** · 10 Oct 2008 7:31 AM

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.

**Condor** · 10 Oct 2008 7:33 AM

Add hideMode:'offsets' to the tabs.

**jalberghini** · 10 Oct 2008 7:50 AM

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

**Condor** · 10 Oct 2008 7:58 AM

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]
});

**jalberghini** · 10 Oct 2008 10:12 AM

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

**Animal** · 10 Oct 2008 11:11 AM

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/

TAP PANEL MULTIPLE FORMS MULTICOLUN

Thread Tools

Search Thread

Display

TAP PANEL MULTIPLE FORMS MULTICOLUN

TAP PANEL MULTIPLE FORMS MULTICOLUN

Code tags fixed.

Code tags fixed.

hideMode:'offsets' DOES NOT WORK.

hideMode:'offsets' DOES NOT WORK.

Thanks, It worked.

Thanks, It worked.