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自带的-开发人员工具》