Results 1 to 4 of 4

Thread: Add new tab after onclick with form inside

  1. #1

    Question Add new tab after onclick with form inside

    Hello everybody,

    I'm pretty new to extjs, but I'm allready building my first simple application. After a lot of searching and sweat I've created a Viewport with a tabpanel insode of it.

    After that I created a addTab funtion to add new tabs to my tabpanel. This function looks like this:

    Code:
        function addTab(module,link){
            tabs.add({
                title: module,
                autoScroll: true,
                iconCls: 'icon',
                autoLoad: link,
                closable:true
            }).show();
        }
    As you can see t opens a new tab with a html file or whatever the web link gives you.


    What I would like to have


    I would like to create a new function called addForm() that creates a new tab with a form that looks like form 5 from this link: http://www.extjs.com/deploy/dev/examples/form/dynamic.html

    I suppose I have to dd this form as an item to the tabs.add function?!?

    Can someone please help making this work?

    The code form the form is like this:

    Code:
        var tab2 = new Ext.FormPanel({
            labelWidth: 95,
            frame:true,
            title: 'Inner Tabs',
            bodyStyle:'padding:5px',
            width: '90%',
            height: '90%',
            items: [{
                layout:'column',
                border:false,
                items:[{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'First Name',
                        name: 'first',
                        anchor:'95%'
                    }, {
                        xtype:'textfield',
                        fieldLabel: 'Company',
                        name: 'company',
                        anchor:'95%'
                    }]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Last Name',
                        name: 'last',
                        anchor:'95%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        anchor:'95%'
                    }]
                }]
            },{
                xtype:'tabpanel',
                plain:true,
                activeTab: 0,
                height:235,
                defaults:{bodyStyle:'padding:10px'},
                items:[{
                    title:'Personal Details',
                    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:'Phone Numbers',
                    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:'Biography',
                    layout:'fit',
                    items: {
                        xtype:'htmleditor',
                        id:'bio2',
                        fieldLabel:'Biography'
                    }
                }]
            }],
    
            buttons: [{
                text: 'Opslaan'
            },{
                text: 'Annuleren'
            }]
        });
    Any more question or sourcecode needed to solve my question? Please ask!

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    simply add to that code:

    yourTabPanel.add(tab2);
    yourTabPanel.activate(tab2);

  3. #3

    Talking Thanx you for your time!

    Thank you very much! My function opens a new tab and tries to display the form.

    The strange thing is it doesn't display correctly. Now it looks like this:



    instead of like this:




    Do you know why this happends?
    Last edited by binadit; 14 May 2008 at 5:12 AM. Reason: too many images

  4. #4
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    get rid of your relative widths and set your tabPanel to layout:'fit'

Posting Permissions

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