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

标签 extjs

我有一个窗口,其中有如下图所示的项目。我想在字段之间留出间隙 enter image description here

代码:

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

最佳答案

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

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

我们也可以添加代替上面的代码

{
     height:10
}

两者都可以工作!

添加此代码之前:

enter image description here

添加代码后:

enter image description here

关于extjs - 如何增加 EXTJS 中字段之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30069803/

相关文章:

licensing - 关于 ExtJS 许可证的问题

extjs - Pimcore Extjs 如何覆盖不同插件中的相同方法

javascript - Sencha 现代应用程序 View Controller 未绑定(bind)被调用?

JavaScript "me"= "this",为什么?

javascript - 使用 extjs 拖放

javascript - 分机号 : tpl config is ignoring html in Panel

extjs - 如何在服务器上部署/托管 sencha touch 应用程序

javascript - 如何在 ExtJS 4.2.1 中禁用组合框中的特定数据

javascript - 如何在Panel内部调用Ext.Define类?

css - Sencha Architect ExtJs 应用程序中的 Icomoon 字形无法正常工作