Form with nested Tab Panels and nested textfields

[idefix]

Hi,

I'm new to EXT JS but I played now a little bit with it and read a lot of documentation and tutorials and I think I understood the main idea.
I will try to migrate now one of my old php project to EXT JS using AJAX with PHP to get a little speed and flexibility to the application.

I try now to create a window to create new records in a ldap database but I have problem on defining the layout with the help of EXT JS.
For a picture how it should look like please see attached screenshot.

The nested Tabbing environment is working, but I'm not able to get two textfields into one row.

Here the code I have so far:

Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';

Ext.onReady(function() {
    Ext.QuickTips.init();

    //Ext.form.Field.prototype.msgTarget = 'side';

    var win = new Ext.Window({
    id: 'tabsinform-win'
    ,width: 600
    ,minWidth: 240
    ,height: 428
    ,minHeight: 160
    ,layout: 'fit'
    ,title: Ext.get('page-title').dom.innerHTML
    ,closable: false

    // form
    ,items: [{
        xtype: 'form'
        ,id: 'tabsinform-form'
        ,border: false
        ,url: 'tabs.php'
        ,width: 350

        // tabpanel
        ,items: [{
        xtype: 'tabpanel'
        ,activeItem: 0
        ,border: false
        ,anchor: '100% 100%'
        ,deferredRender: false
        
        // tabs
        ,defaults: {
            layout: 'form'
            ,labelWidth: 80
            ,defaultType: 'textfield'
            ,bodyStyle: 'padding:5px'
            ,hideMode: 'offsets'
        }
        ,items: [{
            // tab
            title: 'General'
            ,layout: 'form'
            ,autoScroll: true
            ,defaults: { anchor: '-20'}

            // fields
            ,items: [{
            // field
            fieldLabel: 'Text'
            ,xtype: 'textfield'
            },{
            // field
            layout: 'column'

            ,items: [{
                // left column
                xtype: 'combo'
                ,fieldLabel: 'Test 1'
                ,columnWidth: 0.5
                ,store:['Item 1', 'Item 2']
            },{
                // right column
                xtype: 'textfield'
                ,anchor: '100% 100%'
                ,columnWidth: 0.5
                ,fieldLabel: 'Test 2'
            }]
            }]
        }]
        }]
    }]
    });
    win.show();
});

Thanks a lot for your tips!

[MiamiCoder]

Check out the "A little more complex" form example at http://www.extjs.com/deploy/dev/exam...m/dynamic.html for an idea on the areas you need to learn more about to accomplish this.

[Stoot98]

You might want to try the Composite Fields in the new 3.2-beta release...

http://www.extjs.com/deploy/ext-3.2-...ite-field.html

[idefix]

thank you both for your answers.
I think my fault was that I had to add one more level of items inside the column layout.
If someone sees a bad coding, please let me know .

The following is now working like I want it (it seems that copy and paste removed some idention):

Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';

Ext.onReady(function() {
    Ext.QuickTips.init();

    //Ext.form.Field.prototype.msgTarget = 'side';

    var win = new Ext.Window({
    id: 'tabsinform-win'
    ,width: 600
    ,minWidth: 240
    ,height: 428
    ,minHeight: 160
    ,layout: 'fit'
    ,title: Ext.get('page-title').dom.innerHTML
    ,closable: false
    ,defaults: {
        labelWidth: 100
        ,hideMode: 'offsets'
        ,defaultType: 'textfield'
    }

    // form
    ,items: [{ // Create a form on this level because save should transfer all tabs to the script
        xtype: 'form'
        ,id: 'tabsinform-form'
        ,border: false
        ,url: 'tabs.php'
        ,frame: true

        // tabpanel
        ,items: [{ // tabpanel container
        xtype: 'tabpanel'
        ,activeItem: 0
        ,anchor: '100% 100%' // tabpanel should use complete space not only what is used by additional components
        ,deferredRender: false // transfer all fields to the url defined in the form
        
        ,items: [{ // First tab
            title: 'General'
            ,layout: 'form' // Layout in the tab is form
            ,defaults: {
            width: 350 // default width for all fields
            }

            ,items: [{ // first field
            fieldLabel: 'Text'
            ,xtype: 'textfield'
            },{ // second line, should consists of two fields with two fieldLabels
            layout: 'column'
            ,autoWidth: true
            ,items: [{
                // left column
                layout: 'form'
                ,items: [{
                xtype: 'textfield'
                ,width: 45
                ,fieldLabel: 'Postal Code'
                }]
            },{
                // right column
                layout: 'form'
                ,labelWidth: 30
                ,items: [{
                xtype: 'textfield'
                ,width: 270
                ,hideLabel: false
                ,fieldLabel: 'City'
                }]
            }]
            }]
        },{
            title: 'Tab 2'
            ,items: [{
            xtype: 'tabpanel'
            ,activeTab: 0
            ,items: [{
                title: 'tab2, subtab1'
            },{
                title: 'tab2, subtab2'
            }]
            }]
        }]
        }]
    }]
    });
    win.show();
});