Extjs中的按钮宽度 [英] Button width in Extjs
问题描述
我使用width属性为Extjs中的按钮赋予宽度，但是它不起作用...
个项目:[{ xtype:按钮"， 文字:确定"， 宽度:120 }]
让我们假装您正在寻求一个解决按钮大小的方法.我在一个需要ExtJS 2.2的项目中，所以假设这就是我们在这里使用的东西.正如在下面报告的所示，这一切似乎都适用于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'})
]
});
这给了我们一个错误，并且得到这个信息，也给了我们第一个按钮一个非自动宽度宽度的尺寸！奇怪
这些行中的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> </i>
</td>
<td class="x-btn-center">
<em unselectable="on">
</td>
<td class="x-btn-right">
<i> </i>
</td>
</tr>
</tbody>
</table>
按钮的全部；该按钮是一个表格.
重要的部分是宽度:自动".我无法通过ExtJS做到这一点，并且我尝试设置一个宽度为 billWide 的类，该类当然被table标记中的内联样式所覆盖.还尝试直接在按钮中设置样式，如下所示:
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';
注意:
注意:IE7和更早版本不支持值继承". 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?
似乎在某些初始化期间将宽度设置为自动.如果您有这样的错误代码...
function testMe() {
setTimeout(function() {
var btnTemp = document.getElementById('btnSpam');
btnTemp.style.width='198px';
},150);
}
...并在人体的负荷下调用它，一切正常.走吧.
I used width property to give width to button in Extjs, but it is not working...
items : [ { xtype : "button", text : "Ok", width : 120 }]
Let's pretend that you're asking for a solution to sizing a button. I'm on a project that requires ExtJS 2.2, so assume that's what we're using here. As reported below, this all seems to work in 3.1.1+, which I just confirmed for myself (in 3.1.1 at least).
In 2.2, I can't get it to work "the right way" myself. Let's take this Panel as our base and see what we can do to get its buttons to be the same width.
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'})
]
});
That gives us a Panel with two differently sized buttons, as we'd expect.
Now let's try setting the width.
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'})
]
});
Strangely, as the OP found, no change.
Now there seems like there could be an autowidth property, even though it's not in the docs. And, in fact, it seems there might be some code in there to start handling autowidth, but it doesn't seem to go all the way through.
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'})
]
});
This gives us an error and, get this, also gives us the first button at a non-auto-width-ed size! Strange.
The code in ext-all-debug at those lines is this...
Ext.Button.superclass.afterRender.call(this);
if(Ext.isIE6){
this.autoWidth.defer(1, this);
}else{
this.autoWidth(); // borks here
}
So we're actually pretty close at this point. If you wanted to hack Button in the Ext code, you could set this up yourself.
Instead, let's put an id of 'btnSpam' on the first button and see what its dynamically created html is by searching in Firebug to see if we can keep Ext stock/without changes.
<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 for the button; the button is a table.
The important part is that "width: auto". I can't get to that via ExtJS, and I've tried setting a class with width called billWide, which is, of course, over-ridden by the inline style in the table tag. Also tried setting style directly in the button, like this:
new Ext.Button({ width:200,text:'button 1',
cls:'billWide',style:'width:inherit',id:'btnSpam'}),
Still width:auto in the generated html. Argh.
So you can use the id you assigned the button and drill around Ext to get to the button's/table's style using 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:
Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
Note that even if you put an id on the second button and set inherit, because the text is so long, the button still goes off to the right of the Panel and will look like the image, above. So we're essentially setting a minimum width inherited from the container.
That's the best I've got. Was going to essentially post the same question and ask if there was a better fix.
Update: I'm completely stymied in IE8. It seems to change the button width and then snap back.
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?
It seems to set the width to auto during some initialization period. If you have kludge code like this...
function testMe() {
setTimeout(function() {
var btnTemp = document.getElementById('btnSpam');
btnTemp.style.width='198px';
},150);
}
... and call it in the body's onload, things work. Go figure.
这篇关于Extjs中的按钮宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
