Button width in Extjs

I used width property to give width to butto开发者_如何学JAVAn in Extjs, but it is not working...

items : [ { xtype : "button", text : "Ok", width : 120 }]

Let's pretend that you're asking for a solution to sizing a button. I'm on a project that requires ExtJS 2.2, so assume that's what we're using here. As reported below, this all seems to work in 3.1.1+, which I just confirmed for myself (in 3.1.1 at least).

In 2.2, I can't get it to work "the right way" myself. Let's take this Panel as our base and see what we can do to get its buttons to be the same width.

var pnlBtn = new Ext.Panel({
    width:200,
    title:'button panel',
    renderTo: Ext.getBody(),
    items:[
        new Ext.Button({ text:'button 1'}),
        new Ext.Button({ text:'button 12345678901234567890123456789012345678901234567890'})
    ]
});

That gives us a Panel with two differently sized buttons, as we'd expect.

Now let's try setting the width.

var pnlBtn = new Ext.Panel({
    width:200,
    title:'button panel',
    renderTo: Ext.getBody(),
    items:[
        new Ext.Button({ width:200,text:'button 1'}),
        new Ext.Button({ width:100,text:'button 12345678901234567890123456789012345678901234567890'})
    ]
});

Strangely, as the OP found, no change.

Now there seems like there could be an autowidth property, even though it's not in the docs. And, in fact, it seems there might be some code in there to start handling autowidth, but it doesn't seem to go all the way through.

var pnlBtn2 = new Ext.Panel({
        width:200,
        title:'button panel',
        renderTo: Ext.getBody(),
        autoFill:true,
        items:[
            new Ext.Button({ autoWidth:false,width:200,text:'button 1',cls:'billWide'}),
            new Ext.Button({ autoWidth:false,width:100,text:'button 12345678901234567890123456789012345678901234567890'})
        ]
    });

This gives us an error and, get this, also gives us the first button at a non-auto-width-ed size! Strange.

The code in ext-all-debug at those lines is this...

Ext.Button.superclass.afterRender.call(this);
if(Ext.isIE6){
    this.autoWidth.defer(1, this);
}else{
    this.autoWidth(); // borks here
} 

So we're actually pretty close at this point. If you wanted to hack Button in the Ext code, you could set this up yourself.

Instead, let's put an id of 'btnSpam' on the first button and see what its dynamically created html is by searching in Firebug to see if we can keep Ext stock/without changes.

<table id="btnSpam" class="x-btn-wrap x-btn billWide" cellspacing="0" cellpadding="0" border="0" 
    style="width: auto;">

    <tbody>
        <tr>
            <td class="x-btn-left">
                <i>&nbsp;</i>
            </td>
            <td class="x-btn-center">
                <em unselectable="on">
            </td>
            <td class="x-btn-right">
                <i>&nbsp;</i>
            </td>
        </tr>
    </tbody>
</table>

That's all for the button; the button is a table.

The important part is that "width: auto". I can't get to that via ExtJS, and I've tried setting a class with width called billWide, which is, of course, over-ridden by the inline style in the table tag. Also tried setting style directly in the button, like this:

new Ext.Button({ width:200,text:'button 1',
    cls:'billWide',style:'width:inherit',id:'btnSpam'}),

Still width:auto in the generated html. Argh.

So you can use the id you assigned the button and drill around Ext to get to the button's/table's style using getElementById.

var pnlBtn2 = new Ext.Panel({
    width:200,
    title:'button panel 1',
    renderTo: Ext.getBody(),
    autoFill:true,
    items:[
        new Ext.Button({ text:'button 1',id:'btnSpam'}),
        new Ext.Button({ text:'button 12345678901234567890123456789012345678901234567890'})
    ]
});
document.getElementById('btnSpam').style.width='inherit';

Note:

Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".

Note that even if you put an id on the second button and set inherit, because the text is so long, the button still goes off to the right of the Panel and will look like the image, above. So we're essentially setting a minimum width inherited from the container.

That's the best I've got. Was going to essentially post the same question and ask if there was a better fix.

Update: I'm completely stymied in IE8. It seems to change the button width and then snap back.

var btnTemp = document.getElementById('btnSpam');
alert(btnTemp.style.width);  // reports nothing here; apparently not set yet
btnTemp.style.width='198px';
alert(btnTemp.style.width);  // while it reports 198px, the button IS 198px wide.
// immediately snaps back once alert is gone. seems to do CSS after js?

It seems to set the width to auto during some initialization period. If you have kludge code like this...

function testMe()   {
    setTimeout(function() {
        var btnTemp = document.getElementById('btnSpam');
        btnTemp.style.width='198px';
    },150);
}

... and call it in the body's onload, things work. Go figure.

You can try something like this :

items : [ { xtype : "button", text : "Ok", style : "width : 100px;" }]

Unfortunately, until 3.3.1 setting the dimensions of a button has no effect on it. You'll need to use the scale config option to achieve the effect.

Have no idea about Ext Js 4. They might've fixed it. Check the docs

You may want to apply following CSS to your button:

// CSS
<style type="text/css">
.mybutton
{
  width: 120px;
  border:2px solid black;
}
</style>


// ExtJS - apply CSS to your button.
{
  xtype: 'button',
  text: 'My Button',
  cls : 'mybutton',
  handler: function()
           {                    
           }
}

As buttons are items of panel, set width to 100%. Giving in percentage is generally considered better practice.