如何增加EXTJS中字段之间的空间

Question

我有一个窗口，我有如下图所示的项目。我想在文件之间给出差距

代码：

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();
                                                }
                                            }
                                        },

Answer 1

我得到了解决方案 我在字段之间写了下面的行

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

我们也可以添加代码而不是代码

{
     height:10
}

两者都有效！

添加此代码之前：

添加代码后

：

Answer 2

您需要为字段设置边距。 检查这个小提琴 - https://fiddle.sencha.com/#fiddle/md1 小提琴在5.1中，但配置也在4.x中可用。

Answer 3

每行使用layout:'hbox'。

但是，看起来你应该使用type: 'label'而不是在textfield组件中设置标签。

这是一个小提琴：https://fiddle.sencha.com/#fiddle/md3

我的布局：

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
            }]
        }],