CODEWITHSUNDEEP
extjs
user2181567
user2181567

Reputation: 51

How can I Increase space between fields in EXTJS

I have a window where I have items as in below image.I want give gap between fileds enter image description here

code:

new Ext.Window({
        title : bundle.getMsg('add.camera'),
            id:'win-add-camera',
            closable:true,
            autoHeight:true,
            modal:true,
            defaults : {
                labelWidth: 60,
                labelAlign: 'left',
                margin: '0 0 20 0'
            },
            items: [{
                xtype:'form',
                layoutConfig: {
                    trackLabels: true
                },

            id: 'form-camera',

            autoHeight:true,
             autoScroll:true,
             items:[
                    {
                        layout:'column',
                        items:[
                            {  
                                columnWidth: .50,
                                bodyPadding:30,
                                margin: '0 0 20 0',
                                layout: 'form',
                                defaults:{anchor:'80%'},
                                items: [  {
                                    id:'cam-name-id',
                                    fieldLabel : bundle.getMsg('camera.name'),
                                    name : 'cameraName',
                                    margin: '0 0 20 0',
                                    xtype:'textfield',
                                    width:450,
                                    emptyText : bundle.getMsg('enter.camName'),
                                    maxLength:10,
                                    enforceMaxLength:true
                                        ,required:true,
                                },

                                        {
                                            id:'url-id',
                                            fieldLabel :  bundle.getMsg('url'),
                                            name : 'cameraWebUrl',
                                            xtype:'textfield',
                                            width:450,
                                            margin: '0 0 20 0',
                                            emptyText : bundle.getMsg('enter.url')
                                                ,
                                                maxLength:10,enforceMaxLength:true,required:true,
                                        },
                                        {
                                            id:'place-id',
                                            fieldLabel : bundle.getMsg('place.name'),
                                            maxLength:35,
                                            name : 'cameraPlaceName',
                                            xtype:'textfield',
                                                width:450,
                                                emptyText : bundle.getMsg('enter.place'),required:true
                                        },

                                        {
                                            id:'latitude-id',
                                            fieldLabel :bundle.getMsg('lattitude'),
                                            name : 'cameraLatitude',xtype:'textfield',
                                                width:450,emptyText :bundle.getMsg('enter.lattitude'), growMax: 500,required:true
                                        },
                                        {
                                            id:'longitude-id',
                                            fieldLabel : bundle.getMsg('longitude'),
                                            name : 'cameraLongitude',xtype:'textfield',
                                                width:450,emptyText : bundle.getMsg('enter.long'),required:true
                                        },

                                        {
                                            xtype:'combo',
                                            id: 'camera-combo-id',
                                            name:'cameraStatus',
                                            store : new Ext.data.ArrayStore({
                                                data:[["Enable","1"],["Disable","2"]],
                                                fields : ['cameraStatus','no']
                                            }),
                                            fieldLabel : bundle.getMsg('camera.status'),
                                            displayField :'cameraStatus',
                                            emptyText : bundle.getMsg('advice.select'),
                                            valueField : 'no',
                                            selectOnFocus:true,
                                            allowBlank: false,
                                            autoSelect:false,
                                            mode:'local',
                                            listeners:{
                                                'select': function(){

                                                    camera_status_combo_value=Ext.getCmp('camera-combo-id').getValue();
                                                    camera_status_combo_value_name = Ext.getCmp('camera-combo-id').getRawValue();
                                                    alert(camera_status_combo_value)
                                                    alert(camera_status_combo_value_name)
                                                },
                                                'afterrender':function(){
                                                    this.getStore().load();
                                                }
                                            }

                                        },
                                          { 
                                            xtype : 'combo',
                                            id: 'police-station-name-id',
                                            name:'policeStationName',
                                            width:450,
                                            store : police_station_store,
                                            fieldLabel : bundle.getMsg('policestation'),required:true,
                                            displayField :'policeStationName',
                                            emptyText : bundle.getMsg('selectpolicestation'),
                                            valueField : 'gid',
                                            triggerAction:"all",
                                            selectOnFocus:true,
                                            forceSelection: true,
                                            queryMode : 'local',
                                            listeners:{
                                                'select': function(){

                                                    police_stn_id=Ext.getCmp('police-station-name-id').getValue();
                                                    police_station_combo=Ext.getCmp('police-station-name-id').getValue();

                                                },
                                                'afterrender':function(){
                                                    this.getStore().load();
                                                }
                                            }
                                        },

Upvotes: 2

Views: 6064

Answers (3)

user2181567
user2181567

Reputation: 51

I got the solution I have written below line in between fields 

{
  xtype: 'tbspacer',
  height:10
},

and also we can add instead of above code 

{
     height:10
}

both will work !

Before Adding this code:

enter image description here

after adding the code:

enter image description here

Upvotes: 2

Nikolai Lopin
Nikolai Lopin

Reputation: 692

Use layout:'hbox' for every row.

But, looks like you should use type: 'label' instead of setting label right in the textfield component.

Here is a fiddle for you: https://fiddle.sencha.com/#fiddle/md3

My layout:

layout: {
            type: 'vbox',
            align: 'stretch'
        },
        width: 400,
        defaults: {
            layout: 'hbox',
            margin: 10
        },
        items: [{
            items: [{
                xtype: 'label',
                text: 'Market',
                forId: 'test-1',
                flex: 1
            }, {
                xtype: 'combo',
                inputId: 'test-1',
                allowBlank: false,
                store: store,
                queryMode: 'local',
                displayField: 'MarketName',
                forceSelection: true,
                valueField: 'Id',
                flex: 3
            }]
        }, {
            items: [{
                xtype: 'label',
                text: 'Name',
                forId: 'test-2',
                flex: 1
            }, {
                xtype: 'textfield',
                inputId: 'test-2',
                flex: 3
            }]
        }],

Upvotes: 0

Yellen
Yellen

Reputation: 1780

You need to set margin for the fields. Check this fiddle - https://fiddle.sencha.com/#fiddle/md1 The fiddle is in 5.1 but the config is available in 4.x as well.

Upvotes: 0

Related Questions