我在 Extjs 中使用 width 属性给按钮设置宽度,但是它不起作用...
代码如下:
items : [ { xtype : "button", text : "确定", width : 120 }]
我在 Extjs 中使用 width 属性给按钮设置宽度,但是它不起作用...
代码如下:
items : [ { xtype : "button", text : "确定", width : 120 }]
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.Button.superclass.afterRender.call(this);
if(Ext.isIE6){
this.autoWidth.defer(1, this);
}else{
this.autoWidth(); // borks here
}
<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>
这就是按钮的全部内容;按钮是一个表格。
重要的部分是“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);
}
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> </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> </i></td></tr></tbody></table>');
- ruffinitems : [ { xtype : "button", text : "Ok", style : "width : 100px;" }]
// 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()
{
}
}
由于按钮是面板的一部分,因此将宽度设置为100%。通常认为以百分比形式给出更好的实践。
很遗憾,在3.3.1版本之前,设置按钮的尺寸没有任何效果。您需要使用scale
配置选项来实现效果。
对于Ext Js 4我不是很清楚,他们可能已经修复了这个问题。请查看文档。