CODEWITHSUNDEEP
extjsextjs4
Pari
Pari

Reputation: 339

How to place button just after textfield

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?

Upvotes: 0

Views: 7400

Answers (3)

vajrakumar
vajrakumar

Reputation: 758

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

Upvotes: 2

Punitha
Punitha

Reputation: 152

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:'[email protected]', 
                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
    });

Upvotes: 0

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

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

Upvotes: 1

Related Questions