单击按钮对齐更改 - extjs

时间:2014-10-20 08:58:45

标签: javascript extjs

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

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.
        }
    }]

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

1 个答案:

答案 0 :(得分:1)

脱离我的头顶:

你不应该在那里使用buttonAlign: 'right',并且当你将width值指定为String时,width被设置为所有按钮的字符串,使用ExtJS,它就像CSS一样工作值,所以你必须选择:

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

纠正这个问题,你的按钮不应该再搞砸了。