ExtJS - 按钮组中的中心项目

Question

我不知道该如何去做，buttonAlign: 'center'也不是pack: 'center'正在工作。小提琴：http://jsfiddle.net/3Ytp9/

Answer 1

使用的ButtonGroup的layout属性：

layout: { 
     type: 'vbox', 
     align: 'center' 
    } 

见分叉小提琴：https://fiddle.sencha.com/#fiddle/1cm

Answer 2

尝试：

Ext.onReady(function() { 
    var panel = Ext.create('Ext.form.Panel', { 
    renderTo: Ext.getBody(), 
    title: 'Button group', 
    border: true, 
    layout: { 
     align: 'middle', 
     pack: 'center', 
     type: 'hbox' 
    }, 
    width: 500, 
    items: [{ 
     xtype: 'buttongroup', 
     columns: 1, 
     items: [{ 
      xtype: 'button', 
      text: 'Go' 
     }, { 
      xtype: 'button', 
      text: 'Reset' 
     }] 
    }] 
}); 
}); 

具有由侧面的按钮侧，取出columns:1 - 也注意到，在对的jsfiddle Ext JS的实现是可怕的，所以不要依靠它太多。

Answer 3

您是否考虑过在面板底部使用工具栏？

https://fiddle.sencha.com/#fiddle/1c0（不MVC模式）

您也可以使用这样的事情：

 dockedItems: [{ 
     xtype: 'toolbar', 
     layout: { 
      pack: 'center' 
     }, 
     defaultButtonUI: 'default', // get default look and feel 
     dock: 'bottom', 
     items: [{ 
      xtype: 'button', 
      width: 200,   
      text: 'Download to Excel', 

     },{ 
      xtype: 'button', 
      width: 200,   
      text: 'Another action', 

     }] 

问候。