单击按钮时按钮对齐方式发生变化-extjs

Question

有3个div，每个div中都有一个面板。 最初，仅显示2个面板，另一个隐藏。 在其中一个面板中单击“更新”时，这2个div被隐藏，并显示第三个div。
第三个面板中有一组按钮。 下面是它的代码

buttons: [{
        xtype: 'checkbox', id:'usapCheck', boxLabel: 'I Accept', allowBlank: false, margin: '1 1 4 230'
 },{
        buttonAlign: 'right',margin:'0 0 0 3.6',text: 'Save',width: '30',iconCls: 'save',
        handler: function() {
            //code to save form details
        }
    },{
            buttonAlign: 'right',margin:'1 1 0 3.6',text: 'Clear',width: '30',iconCls: 'clear',
        handler: function() {
            //code to clear the fields
        }
    },{
        buttonAlign: 'right',margin:'1 1 1 1.6',text: 'Back',width: '30',iconCls: 'back',
        handler: function() {
            //code to hide this div and show other divs.
        }
    }]

当我单击“后退”按钮时，第三个面板被隐藏，并在同一js中显示其他两个网格。 但是，当我再次单击“更新”按钮以显示第三个面板时，这些按钮的对齐方式发生了变化。
因此，在隐藏和显示面板时，对齐方式会以一种奇怪的方式变化。
我完全迷路了，没有任何线索。 谁能帮帮我吗？

Answer 1

从我的头顶上：

您不应该buttonAlign: 'right'那里使用buttonAlign: 'right'并且使用ExtJS将所有按钮的width都设置为String，当您将width值指定为String时，它的工作方式类似于CSS值，因此必须选择：

width: 30 // 30 pixels
// or
width: '30px' // 30 pixels

更正此错误，您的按钮不应再显得混乱。