extaspnet 的下拉框items宽度如何更改?

首先看前台代码:

<form id="form1" runat="server">
<ext:PageManager ID="PageManager1" runat="server" />
<ext:Panel ID="Panel1" runat="server" BodyPadding="5px" EnableBackgroundColor="true"
ShowBorder="true" ShowHeader="true" Title="Panel" Width="200px">
<Items>
<ext:DropDownList ID="DropDownList1" runat="server" Label="Label" >
<ext:ListItem Text="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" Value="a" />
<ext:ListItem Text="bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb" Value="b" />
<ext:ListItem Text="ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc" Value="c" />
<ext:ListItem Text="ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd" Value="d" />
<ext:ListItem Text="eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee" Value="e" />
<ext:ListItem Text="fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff" Value="f" />
</ext:DropDownList>
<ext:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click">
</ext:Button>
</Items>
</ext:Panel>
</form>

默认效果如图:



因布局限制，combobox的下拉div默认是和下拉框宽度一样的，导致items显示不完整

要想显示完全，怎么搞？

思考步骤

1.看了一下extaspnet封装的属性，好像没有相关的

2.查看了一下extjs 的api,在下拉框属性里面,找到一个listWidth,这样好办了,扩展一下属性即可

3.改extaspnet源代码，加上这个属性，no,no,no，这个工作还是留给三石吧，我等只是小打小闹，只要达到效果就行

方法有好几种，先来最简单的

方法1,前台JS

function onReady() {
Ext.getCmp('<%= DropDownList1.ClientID %>').listWidth=500;
}

方法2，后台，其实就是方法1

protected void Page_Load(object sender, EventArgs e)
{
ExtAspNet.PageContext.RegisterStartupScript("(Ext.getCmp('" + DropDownList1.ClientID + "')).listWidth=500;");
}

方法3，后台，剑走偏锋，代码如下，这个方法我在前面的blog也分享过，叫做 “偷天换日”

protected override void Render(HtmlTextWriter writer)
{
StringWriter strWriter = new StringWriter();
base.Render(new HtmlTextWriter(strWriter));
writer.Write(strWriter.ToString().Replace(
"id:/"" + DropDownList1.ClientID + "/",",
"id:/"" + DropDownList1.ClientID + "/",listWidth:/"500/","));
}

替换一下，在extjs下拉框代码里添加listWidth，设置为500试试

看看效果:



呃，可以了，宽度改变了，不过没对齐，真TMD难看，再改一下CSS

页面中加入

<style type="text/css">

.x-combo-list-item{ font-family:courier new}

</style>

再看看效果:



对齐咯，打完收工

后话，有人问，你怎么知道这个下拉层的css 是 .x-combo-list-item? 怎么找出来的?

请看后话，《如何学会使用IE8自带的-开发人员工具》