1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    22
    Vote Rating
    0
    idefix is on a distinguished road

      0  

    Default Form with nested Tab Panels and nested textfields

    Form with nested Tab Panels and nested textfields


    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:
    Code:
    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!
    Attached Images
    Matthias

  2. #2
    Sencha User MiamiCoder's Avatar
    Join Date
    Mar 2009
    Location
    Miami, FL
    Posts
    141
    Vote Rating
    2
    MiamiCoder is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    329
    Vote Rating
    12
    Stuart-SwarmOnline will become famous soon enough Stuart-SwarmOnline will become famous soon enough

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    22
    Vote Rating
    0
    idefix is on a distinguished road

      0  

    Default


    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):
    Code:
    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();
    });
    Matthias