How to place button just after textfield - extjs

Question

I am using a Fieldset of extjs which have text, buttons and dropdown using extjs.
my code for fieldset is as follow
ds=Ext.create('Ext.form.FieldSet', {
title: 'System Input',
width:500,
style: {
marginLeft: '5px',
marginTop:'10px'
},
labelWidth: 75,
items :[{xtype: 'displayfield', value: 'Modify the inputs below to run another simulation'},roofarea,clss,roofslider,pvtech,rate,pvsyssize,systypebuild,elecrate,tiltang,scclsbtn,scclsbtncls]
});
now i have text field(i.e. roofarea) and button(i.e.clss) in this fieldset, i want button just after text field just beside, my code for this is as follow but button come just below text field:
roofarea = Ext.create('Ext.form.field.Text', {
width: 300,
autoScroll :true,
labelWidth: 160,
style: {
marginLeft:'10px',
marginTop: '10px',
marginBottom:'10px'
},
fieldLabel: 'Total Roof Area(Sq. Meter):',
readOnly: true,
value:faread
});
var clss =Ext.create('Ext.Button', {
text: 'Close',
width:15,
handler: function() {
smWindow.hide();
}
});
but other items should be down of text field and button.
Please help me for this?

Answer 1

It is just a matter of layout. I added both text field and button in a hbox layout and this fieldset (closeFieldSet), I added to your ds.
Below is the code snippet :
roofarea = Ext.create('Ext.form.field.Text', {
width: 300,
autoScroll: true,
labelWidth: 160,
style: {
marginLeft: '10px',
marginTop: '10px',
marginBottom:'10px'
},
fieldLabel: 'Total Roof Area(Sq. Meter):',
readOnly: true,
value: 20
});
var clss = Ext.create('Ext.Button', {
text: 'X',
width: 50,
style: {
marginTop: '10px'
},
handler: function() {
smWindow.hide();
}
});
var closeFieldSet = Ext.create('Ext.form.FieldSet', {
title: 'System ',
layout: 'hbox',
width: 500,
labelWidth: 75,
items: [roofarea,clss]
});
var ds = Ext.create('Ext.form.FieldSet', {
title: 'System Input',
width:500,
style: {
marginLeft: '5px',
marginTop:'10px'
},
labelWidth: 75,
// items: [{xtype: 'displayfield', value: 'Modify the inputs below to run another simulation'},roofarea,clss,roofslider,pvtech,rate,pvsyssize,systypebuild,elecrate,tiltang,scclsbtn,scclsbtncls]
items: [
closeFieldSet,
{
xtype: 'displayfield',
value: 'Modify the inputs below to run another simulation'
}
]
});

Answer 2

Have a look at this links.. Hope this helps you
http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.ComboBox
http://dev.sencha.com/deploy/dev/docs/?class=Ext.form.CompositeField

Answer 3

sample code here
this.form= new Ext.FormPanel({
title:'New Developer',
renderTo: 'frame',
defaults:{xtype:'textfield'},
bodyStyle:'padding: 10px',
items:[
name,
{
fieldLabel:'Email',
name:'txt-email',
value:'default#quizzpot.com',
id:"id-email"
},{
xtype: 'checkbox',
fieldLabel: 'Active',
name: 'chk-active',
id: 'id-active'
},
{
xtype:'hidden',
name:'h-type',
value:'developer'
}
],
buttons:[{text:'Save'},{text:'Cancel'}] //<-- button of the form
});