ExtJS的对齐按钮中心集装箱

Question

我有以下几个按钮容器：

{ 
        xtype : 'container', 
        width : 320, 
        layout : 'hbox', 
        cls : 'readable-form no-border', 
        labelSeparator : '', 
        ref : '../sendBackForm', 
        layoutConfig: { 
         padding:'5', 
         pack:'center', 
         align:'middle' 
        }, 
        style : { 
         margin : 'auto' 
        }, 
        items : [ { 
         xtype : 'button', 
         itemId : 'yes', 
         iconCls : 'save-button-icon', 
         text : 'Yes', 
         ref : '../../yes' 
        }, { 
         xtype : 'spacer', 
         width : 10 
        }, { 
         xtype : 'button', 
         itemId : 'checker', 
         iconCls : 'save-button-icon', 
         text : 'Back to checker', 
         ref : '../../checker' 
        }, { 
         xtype : 'spacer', 
         width : 10 
        }, { 
         xtype : 'button', 
         itemId : 'prebooker', 
         iconCls : 'save-button-icon', 
         text : 'Back to prebooker', 
         ref : '../../prebooker' 
        }, { 
         xtype : 'spacer', 
         width : 10 
        }, { 
         xtype : 'button', 
         itemId : 'cancel', 
         text : 'Cancel', 
         ref : '../../cancel' 
        }, { 
         xtype : 'spacer', 
         width : 90 
        }, { 
         xtype : 'button', 
         itemId : 'ok', 
         hidden : true, 
         text : 'Ok', 
         ref : '../../ok' 
        } ] 

       } 

的问题是，当我隐藏所有的按钮和希望只显示OK按钮，它会显示在靠近窗口左边的角落，我怎么能把它放在窗户的中间？

Answer 1

看起来像layoutConfig won't work anymore在布局配置本身设置'pack'和'align'，fiddle here（点击'Yes'按钮隐藏所有ex 'Ok'）

Answer 2

您是否尝试过在容器中添加以下代码？ ：autoEl: {tag: 'center'}

Answer 3

你可以尝试之前和之后的“确定”按钮放置隔板，

... 
items: [ 
... 
{xtype: 'tbspacer', flex: 1}, 
{ 
    xtype : 'button', 
    itemId : 'btnok', 
    hidden : true, 
    text : 'Ok', 
    ref : '../../ok' 
}, 
{xtype: 'tbspacer', flex: 1} 
... 

和“确定”和“取消”按钮处理

.... 
bindHandlers: function(){ 
    var me = this; 
    me.getComponent('btnok').on('click', function(){ 
     me.toggleButtons(true); 
    }); 

    me.getComponent('btncancel').on('click', function(){ 
     me.toggleButtons(false); 
    });  
}, 
toggleButtons: function(visible){ 
    this.getComp('btnyes').setVisible(visible); 
    this.getComp('checker').setVisible(visible); 
    this.getComp('prebooker').setVisible(visible); 
    this.getComp('btncancel').setVisible(visible); 
    this.getComp('btnok').setVisible(!visible); 
} 
... 

或手动前后加垫片“确定”按钮