关于extjs中的items布局问题

Question

如上图，能不能把整体的items往右移一点？右边空的太多，不好看。Ext JS布局

Answer 1

右移的方法很多，你得把这个panel的代码贴出来，我才能确定到底用什么办法去改布局。

Answer 2

    var gridForm = Ext.create('Ext.form.Panel', {
        items: [{
         frame : true,
     buttonAlign : 'center',
     title : '查询条件',
     renderTo : 'search-from',
     width : Ext.getBody().getViewSize().width,
     autoHeight : true,
     bodyBorder : true,
     fieldDefaults : {
     labelAlign : 'center',
     xtype : 'textfield',
     labelWidth : 100,
     anchor : '95%'
     },
     defaults : {
     border : false,
     flex : 1,
     layout : 'anchor'
     },
     layout : 'hbox',
            items:[{
             items:[{
             xtype:'combobox',
                    displayField: 'areaName',
                    emptyText:'请选择...',
                    valueField: 'areaCode',
                    fieldLabel: '消费方区域名称',
                    name: 'areaCode',
                    store:areaCodeStore1,
                    queryMode: 'local',
                    typeAhead: true,
                    id:'areaCode1',
                 listeners : {
select : function(combo, record, index) {
Ext.getCmp('servManCode').clearValue();
servManCodeStore1.setProxy({
type : 'ajax',
url : './getServManCode?areaCode='+combo.value,
actionMethods : {
read : 'POST'
},
reader : {
type : 'json'
}
}),
servManCodeStore1.load();
}
}
             },{
             xtype:'combobox',
                    displayField: 'servManName',
                    emptyText:'请选择...',
                    valueField: 'servManCode',
                    fieldLabel: '服务消费方',
                    name: 'servManCode',
                    store:servManCodeStore1,
                    queryMode: 'local',
                    typeAhead: true,
                    id:'servManCode'
             },
             {
             xtype:'combobox',
                 displayField: 'areaName',
                 emptyText:'请选择...',
                 valueField: 'areaCode',
                 fieldLabel: '提供方区域名称',
                 store:areaCodeStore2,
                 name: 'areaCode',
                 queryMode: 'local',
                 typeAhead: true,
                 id:'areaCode2',
                 listeners : {
select : function(combo, record, index) {
Ext.getCmp('receiver').clearValue();
servManCodeStore2.setProxy({
type : 'ajax',
url : './getServManCode?areaCode='+combo.value,
actionMethods : {
read : 'POST'
},
reader : {
type : 'json'
}
}),
servManCodeStore2.load();
}
}
             },{
             xtype:'combobox',
                    displayField: 'servManName',
                    emptyText:'请选择...',
                    valueField: 'servManCode',
                    fieldLabel: '服务提供方',
                    name: 'receiver',
                    store:servManCodeStore2,
                    queryMode: 'local',
                    typeAhead: true,
                    id:'receiver'
             }]
            },{
             items:[{
             xtype:'combobox',
                    fieldLabel: '指标名称',
                    displayField: 'name',
                    emptyText:'请选择...',
                    value:'0',
                    valueField: 'id',
                    name: 'code',
                    id:'flag',
                        store: {
                         autoDestroy: true,
                            model: 'State',
                            data: Flag
                        } ,
                        queryMode: 'local',
                        typeAhead: true
             },{
             id:'top',
              xtype: 'numberfield',
                    fieldLabel: '选择排名',
                    emptyText:'请选择',
                    name: 'limit',
                    value: 10,
                    step:1,
                    minValue: 1,
                    maxValue: 30
             },{
                 xtype: 'datefield',
                  format: 'Y-m-d',
                  fieldLabel: '开始时间',
                  afterLabelTextTpl: required,
                    emptyText:'请输入...',
                    name: 'beginTime',
                    value:new Date(new Date().getTime()-1000*60*60*24),
                    allowBlank: false,
                    id:'beginTime',
                    itemId: 'beginTime',
                    endDateField: 'endTime',
                    vtype : 'daterange'
             },{
              xtype: 'datefield',
                   format: 'Y-m-d',
                   fieldLabel: '结束时间',
                    afterLabelTextTpl: required,
                     emptyText:'请输入...',
                     name: 'endTime',
                     id:'endTime',
                     value:new Date(),
                     allowBlank: false,
                     itemId: 'endTime',
                     startDateField: 'beginTime',
                     vtype : 'daterange'
             }]
            }],
            buttons: [{
                text: '查询',
                formBind: true, //only enabled once the form is valid
                disabled: true,
                handler: function() {
                    var form = this.up('form').getForm();
                    if(Ext.getCmp('areaCode1').getValue()!=null && Ext.getCmp('servManCode').getValue()==null){
                     var config = {
                     title:'提示',
                     msg:'请选择服务消费方'
                     }
                     Ext.Msg.show(config);
                    }
                    else if(Ext.getCmp('areaCode2').getValue()!=null && Ext.getCmp('receiver').getValue()==null){
                     var config = {
                     title:'提示',
                     msg:'请选择服务提供方'
                     }
                     Ext.Msg.show(config);
                    }
                    else if(Ext.getCmp('top').getValue()==null){
                     store.removeAll();
                     chartStore.removeAll();
                    }
                    else if (form.isValid()) {
                     store.loadPage(1);
                     chartStore.loadPage(1);
                    }
                   
                }
            }, {
                text: '重置',
                handler: function() {
                    this.up('form').getForm().reset();
                    servManCodeStore1.setProxy({
type : 'ajax',
url : './getServManCode',
actionMethods : {
read : 'POST'
},
reader : {
type : 'json'
}
}),
servManCodeStore1.load();
                    servManCodeStore2.setProxy({
type : 'ajax',
url : './getServManCode',
actionMethods : {
read : 'POST'
},
reader : {
type : 'json'
}
}),
servManCodeStore2.load();
                }
            }]
        },
            {
            layout: {type: 'hbox', align: 'stretch'},
            flex: 3,
            border: false,
            bodyStyle: 'background-color: transparent',
            items: [gridPanel, {
                flex: 0.4,
                layout: {
                    type: 'vbox',
                    align:'stretch'
                },
                margin: '0 0 0 5',
                title: '服务实例Top排名柱状图',
                collapsible:true,   //panel可收缩
                collapseDirection:'left',
                items:[{
                height:430,
                layout: 'fit',
                margin: '0 0 3 0',
//                tbar: [{
//                    text: '下载图形',
//                    handler: function() {
//                        Ext.MessageBox.confirm('Confirm Download', '确定下载图片?', function(choice){
//                            if(choice == 'yes'){
//                             barChart.save({
//                                    type: 'image/jpeg'
//                                });
//                            }
//                        });
//                    }
//                }],
                items: [barChart]
            }]
            }],
        }],
        renderTo: bd
    });

Answer 3

加单点是这样的：
items:[{
        items:[{
                 items:[{...},{...},{...},{...}]
                },{
                 items:[{...},{...},{...},{...}]
                  }]
        },{
        items:[{...},{...}]
        }]
如下图：框出的部分是要右移的

Answer 4

哎，你这个组合果断涉及到动态数据了，我还是教你方法吧，其实这跟CSS DIV布局有很相似的地方。
正如楼上那位热心人所述，你可以通过panel的margins这个属性来控制各个panel之间（注意是panel之间）的空隙:
margins:'10 10 10 10' //方向是上 右 下 左,这个你可以看看api的，有详细解释.
还有个方法，固定panel的宽度，这个方法可以通过增加panelA的宽度来向右撑开他侧面panelB在页面中显示的位置。
我看了你的页面，你用涂去了label对吧，其实你还可以使用labelWidth这样一个属性来增加label的宽度，这样同样也能撑开selectBox，从而达到你要的效果。
希望这些方法对你有些帮助。

Answer 5

弱弱的问一下，怎么用？
比如
items: [{
...
margin :  '10 5 3 10' //该item距离上面的元素10px，距离右面5px，距离下面3px，距离左面10px
}]该属性适用任何一个component。

Answer 6

弱弱的问一下，怎么用？
比如
items: [{
...
margin :  '10 5 3 10' //该item距离上面的元素10px，距离右面5px，距离下面3px，距离左面10px
}]该属性适用任何一个component。
谢谢您的回复，问题已近解决，非常感谢！