Ext.Net學習筆記10:Ext.Net ComboBox用法


ComboBox是最常用的控件之一,它與HTML中的Select控件很像,但可以進行多選、自定義顯示格式、分頁等。

ComboBox用法

<ext:ComboBox runat="server" ID="cmbUserList" DisplayField="Name" ValueField="ID">
    <Store>
        <ext:Store runat="server" ID="storeUserInfo">
            <Model>
                <ext:Model ID="Model1" runat="server" IDProperty="ID">
                    <Fields>
                        <ext:ModelField Name="ID" Type="Int"></ext:ModelField>
                        <ext:ModelField Name="Name" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Gender" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Age" Type="Int"></ext:ModelField>
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    </Store>
</ext:ComboBox>

對於一個ComboBox來說,一定要制定DisplayField和ValueField,然后它包含了一個Store,這個Store我們並不陌生,之前的幾篇中都用過。

然后我們在頁面加載的時候為Store綁定上數據:

public void BindStore()
{
    storeUserInfo.DataSource = UserInfo.GetData();
    storeUserInfo.DataBind();
}

這樣一個簡單的ComboBox示例就完成了。

ComboBox分頁

當數據量大的時候,我們當然希望能夠進行分頁顯示,這個功能ComboBox是支持的。

首先我們需要對Store進行分頁處理,前面的Ext.Net學習筆記08:使用數據和Ext.Net學習筆記09:Ext.Net中Store的用法中已經介紹過,此處不再贅言。

然后我們要在ComboBox的定義中加上分頁的PageSize屬性:

<ext:ComboBox runat="server" ID="cmbUserList" DisplayField="Name" ValueField="ID" PageSize="5">

再次刷新我們的頁面,你會發現ComboBox已經支持分頁了。

ComboBox自定義顯示

ComboBox支持通過XTemplate來自定義每一項的顯示。

<ext:ComboBox runat="server" ID="cmbUserList" DisplayField="Name" ValueField="ID" MatchFieldWidth="false" PageSize="5">
    <Store>
        ...
    </Store>
 <ListConfig> <ItemTpl runat="server"> <Html> <div> <b>{Name}</b><br /> <span>年齡:{Age}</span><br /> <span>性別:{Gender}</span> </div> </Html> </ItemTpl> </ListConfig>
</ext:ComboBox>

效果如下:

image

以上就是ComboBox常用的方法。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM