Extjs中的按钮宽度

Question

我使用width属性为Extjs中的按钮赋予宽度，但它不起作用......

项目：[{       xtype：“按钮”，       文字：“好的”，       宽度：120   }]

Answer 1

让我们假装你要求一个按钮大小的解决方案。我正在进行一个需要ExtJS 2.2的项目，所以假设这就是我们在这里使用的内容。作为reported below，这一切似乎都适用于3.1.1+，我刚刚为自己确认（至少在3.1.1中）。

在2.2中，我无法让自己以“正确的方式”工作。让我们以这个Panel为基础，看看我们可以做些什么来使它的按钮宽度相同。

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'})
    ]
});

这给了我们一个Panel，它有两个不同大小的按钮，正如我们所期望的那样。

现在让我们尝试设置宽度。

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'})
    ]
});

奇怪的是，正如OP所发现的，没有变化。

现在似乎可能存在autowidth属性，即使它不在文档中。事实上，似乎可能会有一些代码开始处理自动宽度，但它似乎并没有完全贯彻。

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'})
        ]
    });

这给了我们一个错误，为此，还为我们提供了非自动宽度尺寸的第一个按钮！奇怪。

这些行的ext-all-debug中的代码就是这个......

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

所以我们实际上非常接近这一点。如果你想在Ext代码中破解Button，你可以自己设置它。

相反，让我们在第一个按钮上放置一个'btnSpam'的id，通过在Firebug中搜索来查看它动态创建的html是什么，看看我们是否可以保留Ext stock /而不进行更改。

<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>

按钮的全部;按钮是一张桌子。

重要的是“宽度：自动”。我无法通过ExtJS实现这一点，并且我尝试设置一个名为 billWide 的宽度的类，当然，它被表标记中的内联样式覆盖。还尝试直接在按钮中设置样式，如下所示：

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

仍然宽度：生成的html中的auto。哎呀。

因此，您可以使用您分配按钮的ID并使用ExtE钻取Ext来使用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：

  

注意：IE7及更早版本不支持值“inherit”。 IE8需要一个！DOCTYPE。 IE9支持“继承”。

请注意，即使您在第二个按钮上设置了ID并设置了继承，因为文本太长，按钮仍然会偏离面板的右侧，看起来就像上面的图像。所以我们基本上设置了从容器继承的最小宽度。

这是我得到的最好的。基本上会发布相同的问题，并询问是否有更好的解决方案。

更新：我在IE8中完全陷入困境。它似乎改变了按钮宽度，然后快速恢复。

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?

似乎在某些初始化期间将宽度设置为自动。如果你有像这样的kludge代码...

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

...并在身体的onload中调用它，事情有效。去图。

Answer 2

您可以尝试这样的事情：

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

Answer 3

不幸的是，直到3.3.1设置按钮的尺寸对它没有影响。您需要使用scale配置选项来实现此效果。

不知道Ext Js 4.他们可能已经修复了它。检查文档

Answer 4

您可能希望将以下CSS应用于按钮：

// 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()
           {                    
           }
}

Answer 5

由于按钮是面板项目，因此将宽度设置为100％。通常认为给予百分比是更好的做法。