extjs - Extjs 中的按钮宽度

Question

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

项目:[{ 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'})
    ]
});

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

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

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 库存/不做任何更改。

<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 的宽度类，当然，它被表格标记中的内联样式覆盖了。还尝试直接在按钮中设置样式，如下所示:

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

生成的 html 中仍然是 width:auto。啊。

因此，您可以使用为按钮分配的 ID，并使用 getElementById 在 Ext 周围钻取以获取按钮/表格的样式。

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

请注意，即使您在第二个按钮上放置了一个 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?

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

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

...并在主体的加载中调用它，一切正常。去图吧。