CODEWITHSUNDEEP
javascriptextjs
Freakyuser
Freakyuser

Reputation: 2814

Button alignment changing on click of it - extjs

There are 3 divs, each having a panel in them. Initially, only 2 panels are displayed and the other is hidden. On clicking 'Update' in one of the panels, these 2 div are hidden and the 3rd one is shown.
There is a set of buttons in the 3rd panel. The below is the code for it

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

When I click the back button, the 3rd panel is hidden and displays the 2 other grids in the same js. But when I again click the 'update' button, to display the 3rd panel, the alignment of these buttons change.
So, on hiding and showing the panels, the alignment changes in a strange way.
I am totally lost, without any clue. Can anyone please help me?

Upvotes: 0

Views: 184

Answers (1)

Guilherme Lopes
Guilherme Lopes

Reputation: 4760

Off the top of my head:

You shouldn't use buttonAlign: 'right' there and your width is set as a String for all your buttons, using ExtJS, when you specify your width value as String it works like CSS values, so you have to pick: 

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

Correct this and your buttons shouldnt look messed up anymore.

Upvotes: 1

Related Questions