Javascript Extjs在容器中对齐按钮中心
我有以下几个按钮的容器:Javascript Extjs在容器中对齐按钮中心,javascript,extjs,Javascript,Extjs,我有以下几个按钮的容器: { xtype : 'container', width : 320, layout : 'hbox', cls : 'readable-form no-border', labelSeparator : '', ref : '../
{
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按钮时,它出现在左窗口角落附近,我如何将它放置在窗口的中间? < P>你是否尝试在容器上添加下面的代码?code>autoEl:{tag:'center'}您可以尝试在“OK”按钮前后放置间隔符 以及“确定”和“取消”按钮处理程序
....
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);
}
...
或者在“确定”按钮前后手动添加间隔符看起来像在布局配置中设置“打包”和“对齐”(单击“是”按钮隐藏除“确定”之外的所有内容)您使用的Extjs版本是什么?这节省了我的时间。
....
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);
}
...