How to place button just after textfield

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'
        }
    ]
});