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
    140
    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 User
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    293
    Vote Rating
    4
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi