假设您正在寻求一个调整按钮大小的解决方案。我正在进行一个需要 ExtJS 2.2 的项目，因此假设我们在这里使用的是 ExtJS 2.2。作为报道如下 https://stackoverflow.com/a/7743347/1028230，这一切似乎都适用于 3.1.1+，我刚刚亲自证实了这一点（至少在 3.1.1 中）。
在 2.2 中，我自己无法让它以“正确的方式”工作。让我们以此面板为基础，看看我们可以做些什么来使其按钮具有相同的宽度。
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'})
]
});
这给了我们一个错误，得到这个，also为我们提供了第一个非自动宽度尺寸的按钮！奇怪的。
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> </i>
</td>
<td class="x-btn-center">
<em unselectable="on">
</td>
<td class="x-btn-right">
<i> </i>
</td>
</tr>
</tbody>
</table>
That's all对于按钮；该按钮是一个表格。
重要的部分是“宽度：自动”。我无法通过 ExtJS 实现这一点，并且我尝试设置一个宽度名为billWide，当然，它会被表标签中的内联样式覆盖。也尝试过设置style直接在按钮中，如下所示：
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 http://www.w3schools.com/jsref/prop_style_width.asp:
注意：IE7 及更早版本不支持值“inherit”。 IE8 需要 !DOCTYPE。 IE9支持“继承”。
请注意，即使您在第二个按钮上放置一个 id 并设置继承，由于文本太长，该按钮仍然会移到面板的右侧，并且看起来像上面的图像。所以我们本质上是设置从容器继承的最小宽度。
这是我拥有的最好的了。本质上是要发布相同的问题并询问是否有更好的解决方案。
Update:我完全被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);
}
...并在主体的加载中调用它，一切正常。去搞清楚。
