Extjs中的按钮宽度

Question

我在 Extjs 中使用 width 属性给按钮设置宽度，但是它不起作用...

代码如下：

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

- Pravin Varma

---

你把按钮放在哪里？也许你有一个设置宽度的外部布局。 - PiTheNumber

Answer 1

假设你正在寻求一个调整按钮大小的解决方案。我所在的项目需要使用ExtJS 2.2，因此请假设我们在这里使用的是该版本。正如下面报告的，这一切似乎在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'})
    ]
});

这给我们提供了一个带有两个不同大小按钮的面板，正如我们所期望的那样。

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

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

奇怪的是，正如原帖作者发现的那样，没有任何变化。

现在似乎可能有一个自动宽度属性，尽管它没有在文档中提到。实际上，似乎有一些代码开始处理自动宽度，但似乎没有完全完成。

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进行修改，您可以自己设置此项。

相反，让我们在第一个按钮上放置一个id“btnSpam”，并通过在Firebug中搜索来查看它的动态创建的HTML，看看是否可以保持Ext的原始状态而无需更改。

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

这就是按钮的全部内容；按钮是一个表格。

重要的部分是“width: auto”。我无法通过ExtJS获取它，并尝试设置一个名为billWide的带有宽度的类，但当然被表格标签中的内联样式覆盖。还尝试直接在按钮中设置style，如下所示：

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

在生成的HTML中仍然是width:auto。真烦人。

因此，您可以使用分配给按钮的ID并浏览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';

注意:

注意：在IE7及更早版本中不支持值为“inherit”。IE8需要使用DOCTYPE。IE9支持“inherit”。

请注意，即使您在第二个按钮上设置了id并设置为inherit，由于文本太长，按钮仍会向右移动到面板的右侧，并且看起来像上面的图片。因此，我们基本上设置了从容器继承的最小宽度。

这是我能提供的最佳解决方案。本来想发布同样的问题并询问是否有更好的解决方法。

更新：我完全被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?

在某些初始化时期似乎将宽度设置为自适应。 如果您有像这样的临时代码...

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

当我将脚本放在标签中并在的onload中调用它时，一切正常。不可思议。

- ruffin

---

更简单的方法可能是使用新的模板。这将使按钮文本左对齐并设置大小：var myTemplate = new Ext.Template('<table wack="wack" border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr><td class="x-btn-left"><i>&#160;</i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}" style="width:250px;text-align:left">{0}</button></em></td><td class="x-btn-right"><i>&#160;</i></td></tr></tbody></table>'); - ruffin

Answer 2

你可以尝试这样做：

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

- Santana6.35

---

在 Ext 3.1.1 之前不起作用。相反，在 ExtJS 2.2 中不起作用。正如我在上面详细解释的那样，样式被覆盖了。 - ruffin

Answer 3

您可能想将以下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()
           {                    
           }
}

- Bae Cheol Shin

Answer 4

由于按钮是面板的一部分，因此将宽度设置为100％。通常认为以百分比形式给出更好的实践。

- Ashutosh Jha

Answer 5

很遗憾，在3.3.1版本之前，设置按钮的尺寸没有任何效果。您需要使用scale配置选项来实现效果。

对于Ext Js 4我不是很清楚，他们可能已经修复了这个问题。请查看文档。

- Varun Achar

---

你从哪里得到这个信息的？我问这个问题并不是因为我不相信你，我相信你，只是想要一个官方来源，这样我就可以停止试图疯狂地寻找了。 - ruffin

好的，它与我所看到的相符，所以我想我会把它视为真理。谢谢。 - ruffin