EXTJS 3.4 items alignment issues in panel

Question

Team I am facing two issues with item alignment in ext js panel. I am using extjs version 3.4.

Basically I want to align panel text boxes horizontally two in each line but as of now only one is coming per row.

also it seems there is no space coming between panel and first text box. Is there any way we can do this in EXTJS 3.4

code :

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
</head>

<body>
<script type="text/javascript">


    Ext.onReady(function(){
        var tab2 = new Ext.FormPanel({
            labelAlign: 'left',
            labelStyle: 'font-weight:bold;',
            labelWidth: 85,
            title: 'formname',
            bodyStyle:'padding:5px',
            scrollable:'true',
            border:'true',
            width: 1200,
            height:600,
            items: [{
                xtype:'panel',
                height:200,
                autoScroll:true,            
                defaults: {flex: 1, layout: 'form', border: false},
                layout:'hbox',
                items:[{
                title:'Personal Details',
                defaultType: 'textfield',   
                    items: [

                        {   
                            fieldLabel: 'First Name',
                            name: 'first',
                            width:200,
                            allowBlank:false,
                            value: 'Jack'
                        },{
                            fieldLabel: 'Last Name',
                            name: 'last',
                            width:200,
                            value: 'Slocum'

                        },{ 
                            xtype:'combo',
                            fieldLabel: 'Company',
                            name: 'company',
                            width:200,
                            value: 'Ext JS'
                        }, {
                            fieldLabel: 'Email',
                            name: 'email',
                            width:200,
                            vtype:'email'
                        }]

                }]
                }],
            buttons: [{
            text: 'Save'
            },{
            text: 'Cancel'
            }]
        });

    tab2.render(document.body); 


});
</script> 

</div>
</body>
</html>

Krzysztof Krzysztof · Accepted Answer · 2012-12-24T09:06:50

IMO easiest way is to use FormLayout and modify positioning by CSS. Each field in FormLayout is wrapped in div.x-form-item, so you can set float: left style for it. If width of fields is adjusted to the width of panel this is all you need to do. Othwerwise you will have to set clear: left on every seconond field.

Working sample: http://jsfiddle.net/wC5hZ/2/

You can also use TableLayout but it would be more code.

EXTJS 3.4 items alignment issues in panel

1 Answers