PDA

View Full Version : How to align textboxes horizontally 2 per row in EXTJS inner panel



MMKUMAR
22 Dec 2012, 6:31 AM
Team I am have formpanel inside that I have inner panel with 4 text boxes.

I want to align text boxes 2 per row inside inner panel how can I do this. I am using EXTJS 3.4




<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>

sword-it
25 Dec 2012, 5:35 AM
Hi MMkumar,

For alignment issue you can use hbox layout to put form item in single row. like-


items: [{
xtype:'panel',
height:200,
autoScroll:true,
defaults: {flex: 1, layout: 'form', border: false},
layout:'hbox',
items:[{
title:'Personal Details',
defaultType: 'textfield',
items: [
{
xtype:'container'
, layout: 'hbox'
, items:[
{
fieldLabel: 'First Name',
name: 'first',
width:200,
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
width:200,
value: 'Slocum'

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


For more info read API docs- http://docs.sencha.com/ext-js/3-4/#!/api/Ext.layout.HBoxLayout

hmdsharaiti
13 May 2016, 9:29 PM
and how can I scale two filed relative to container width?:-/

sword-it
15 May 2016, 9:53 PM
You can use flex property to scale field relative to parent container see -http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.TextField-cfg-flex