Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    249
    Vote Rating
    1
    Answers
    2
    Ex_Soft is an unknown quantity at this point

      0  

    Default Answered: [4.1.1] How to align textfield with combobox/datefield?

    Answered: [4.1.1] How to align textfield with combobox/datefield?


    Textfield isn't aligned with combobox/datefield:
    Code:
    Ext.onReady(function() {
        Ext.QuickTips.init();
    
        Ext.create("Ext.window.Window", {
            title: "Test Ext.layout.container.Anchor",
            autoShow: true,
            layout: "fit",
            border: 0,
            items:[{
                xtype: "form",
                frame: true,
                bodyStyle: "padding: 5px 0 0 0",
                items: [{
                    xtype: "textfield",
                    fieldLabel: "textfield",
                    anchor: "100%"
                }, {
                    xtype: "combobox",
                    fieldLabel: "combobox",
                    anchor: "100%"
                }, {
                    xtype: "datefield",
                    fieldLabel: "datefield",
                    anchor: "100%"
                }]
            }]
        });
    });
    http://jsfiddle.net/ZgcAS/1/

    P.S. BTW, textfield is aligned if window will be resized.

  2. Hi Ext_soft,

    Give width config to the window container.

  3. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    Answers
    124
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi Ext_soft,

    Give width config to the window container.
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  4. #3
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Try this:
    Code:
    Ext.onReady(function(){
        Ext.create("Ext.window.Window", {
            title: "Test Ext.layout.container.Anchor",
            autoShow: true,
            layout: "fit",
            border: 0,
            items:[{
                xtype: "form",
                frame: true,
                bodyStyle: "padding: 5px 0 0 0",
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: "textfield",
                    fieldLabel: "textfield",
                    //anchor: "100%"
                }, {
                    xtype: "combobox",
                    fieldLabel: "combobox",
                    //anchor: "100%"
                }, {
                    xtype: "datefield",
                    fieldLabel: "datefield",
                    //anchor: "100%"
                }]
            }]
        });
    });

  5. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    249
    Vote Rating
    1
    Answers
    2
    Ex_Soft is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by vietits View Post
    Try this:
    Code:
               ...
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
               ...
    This is simple example. I've been trying to use this layout. But in real application, where form is more complex, it doesn't work.

Thread Participants: 2