如何在 Ext JS 4 中将按钮置于其容器的中心？

Question

我正在使用 Ext JS 4 构建网站，我需要将按钮置于其容器的中心，但我似乎无法实现。

我在互联网上搜索了有关如何执行此操作的信息，我找到了一些使用 layout 的答案，但它在我的情况下不起作用：

const submit = Ext.create('Ext.Button', {
    text     : 'search',
    scale: 'large',
    renderTo : Ext.getBody(),
    listeners: {
    click: function() {

        }
    },
    layout: {
        align: 'middle',
        pack: 'center',
        type: 'hbox'
    },
});

我所有的代码：

function init(results, checkInDate, checkOutDate, array) {
    if(results!="") {
        results = JSON.parse(results);
    }
    const todaysDate = new Date();
    var visitDay = todaysDate.getDate();
    var visitMonth = todaysDate.getMonth()+1;
    var visitYear = todaysDate.getFullYear();
    var leavingDay = todaysDate.getDate();
    var leavingMonth = todaysDate.getMonth()+1;
    var leavingYear = todaysDate.getFullYear();
    var array1 = new Array();
    var i2 = 0;
    var i3 = 1;
    for(var i = 0; i<array.length; i++) {
        array1.push({ 'name': array[i],  'price1': results[i2],  'price2': results[i3]})
        i2 = i2 + 2;
        i3 = i3 + 2;
    }

    Ext.application({
        name: 'MyApp',
        launch: function() {
            const datePickers = Ext.create('Ext.form.Panel', {
                renderTo: Ext.getBody(),
                width: 300,
                bodyPadding: 10,
                items: [{
                    xtype: 'datefield',
                    format: 'd/m/Y',
                    anchor: '100%',
                    fieldLabel: 'Check In:',
                    name: 'from_date',
                    value: checkInDate,
                    listeners: {
                        'change': function(me) {
                            const visitDate = me.getSubmitValue();
                            visitMonth = '';
                            visitYear = '';
                            visitDay = '';
                            for(var i=0; i<2; i++) {
                                visitDay = visitDay + visitDate.charAt(i);
                            }
                            for(var i=3; i<5; i++) {
                                visitMonth = visitMonth + visitDate.charAt(i)
                            }
                            for(var i=6; i<10; i++) {
                                visitYear = visitYear + visitDate.charAt(i);
                            }
                        }
                    }
                }, {
                    xtype: 'datefield',
                    format: 'd/m/Y',
                    anchor: '100%',
                    fieldLabel: 'Check Out:',
                    name: 'to_date',
                    value: checkOutDate,
                    listeners: {
                        'change': function(me) {
                            const leavingDate = me.getSubmitValue();
                            leavingMonth = '';
                            leavingYear = '';
                            leavingDay = '';
                            for(var i=0; i<2; i++) {
                                leavingDay = leavingDay + leavingDate.charAt(i);
                            }
                            for(var i=3; i<5; i++) {
                                leavingMonth = leavingMonth + leavingDate.charAt(i)
                            }
                            for(var i=6; i<10; i++) {
                                leavingYear = leavingYear + leavingDate.charAt(i);
                            }
                        }
                    }
                }]
            });

            //This is the item I want to center:
            const submit = Ext.create('Ext.Button', {
                text     : 'Search',
                scale: 'large',
                renderTo : Ext.getBody(),
                listeners: {
                    click: function() {

                    }
                }
            });

            var store = Ext.create('Ext.data.Store', {
                storeId:'prices',
                fields:['name', 'price1', 'price2'],
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            });

            const grid = Ext.create('Ext.grid.Panel', {
                store: Ext.data.StoreManager.lookup('prices'),
                columns: [
                    { text: 'Name',  dataIndex: 'name', width: 200},
                    { text: 'Price1', dataIndex: 'price1', width: 135},
                    { text: 'Price2', dataIndex: 'price2', width: 135},
                ],
                renderTo: Ext.getBody()
            });

            store.getProxy().data = array1;
            store.load();

            Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: [{
                    title: 'Filter',
                    region: 'west',
                    collapsible: true,
                    split: true,
                    titleCollapse: true,
                    items: [
                        {  
                            items: datePickers
                        },
                        {
                            //I want to center this button horizontally:
                            items: submit
                        }

                    ],          
                }, {
                    title: 'prices',
                    region: 'center',
                    collapsible: false,
                    items: {
                        items: grid
                    }
                }]
            });
        }
    });
}

所以此刻，按钮显示在这个位置：

但我想要它：

关于如何实现这一点有什么想法吗？

提前致谢！

编辑：代码 pvlt 的回答

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
       title: 'Filter',
       region: 'west',
       collapsible: true,
       split: true,
       titleCollapse: true,
       width: 300,
       layout: {
           type: 'hbox',
           align: 'middle',
           pack: 'center',
       },
           items: [
              {
                   items:datePickers
              },
              {
                   items: submit
              }
           ],           
       }, {
            title: 'prices',
            region: 'center',
            collapsible: false,
            items: {
               items: grid
            }
       }]
});

Answer 1

您必须包装提交按钮才能使其正常工作。

{
  width: 300,
  layout: {
    type: 'hbox',
    align: 'middle',
    pack: 'center',
  },
  items: [{
    items: submit
  }]
}

布局必须属性包装容器

Answer 2

renderTo: Ext.getBody() 是无意义的，因为 datePickers 和 submit ...

这可以更简单地完成，-> 即 shorthand 对应 xtype: 'tbfill'。

tbar: ['->', submit, '->']

如何在 Ext JS 4 中将按钮置于其容器的中心？

How to center a button to its container in Ext JS 4?

extjs

extjs4