ExtJs之ComboBox篇
其实我感觉如果大家看过上一篇GridPanel之后对ComboBox的绑定应该很容易了。在这里，我们的demo仍然是动态绑定的（其实这是女朋友问我的一个问题，她当时问我怎么动态绑定ComboBox，我就做了下面的demo）。动态绑定的放其实和GridPanel一样，采用load传参。在GridPanel中我就曾说过，ext中很多组件都可以使用load来实现动态传参的（TreePanel除外）。
ComboBoxd动态绑定
前台代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script> <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- Ext.onReady(function () { var url = "JsonData.aspx"; var myStore = new Ext.data.Store({ id: "myStoreId", proxy: new Ext.data.HttpProxy({ url: url }), reader: new Ext.data.JsonReader({ totalProperty: "totalProperty", root: "root", fields: [{ name: "ProductID" }, { name: "ProductName"}] }) }); myStore.load({ params: { categoryID: '1'} }); var cb = new Ext.form.ComboBox({ emptyText: '请选择商品...', applyTo: 'myCombo', displayField: 'ProductName', valueField: 'ProductID', mode: 'local', typeAhead: true, triggerAction: "all", emptyText: "请选择商品...", editable: false, allowBlank: false, blankText: "商品名称必须选择！", autoSelect: true, selectOnFoucus: true, store: myStore }); Ext.get("category1").on("click", function () { myStore.load({ params: { categoryID: '1'} }); }); Ext.get("category2").on("click", function () { myStore.load({ params: { categoryID: '2'} }); }); }); // --></mce:script> </head> <body> <div> <div style="float:left;" mce_style="float:left;"> <input type="text" id="myCombo" name="myCombo" value="" /> </div> <div> <input type="button" id="category1" value="Beverages" /> <input type="button" id="category2" value="Condiments" /> </div> </div> </body> </html>
后台代码：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Text; using Cmj.MyData; namespace DanimicBind { public partial class JsonData : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string categoryID = ""; if (!string.IsNullOrEmpty(Request["categoryID"])) { categoryID = Request["categoryID"]; } DataTable dt = GetDataTable(categoryID); Response.Write(GetJson(dt)); Response.End(); } private DataTable GetDataTable(string categoryID) { string sql="SELECT dbo.Products.ProductID,dbo.Products.ProductName FROM dbo.Products INNER JOIN dbo.Categories ON dbo.Products.CategoryID = dbo.Categories.CategoryID WHERE dbo.Categories.CategoryID='"+categoryID+"'"; DBHelper dbHelper=new DBHelper(); DataTable dt= dbHelper.GetDataTable(CommandType.Text,sql); return dt; } private string GetJson(DataTable dt) { string dtJson= JsonHelper.GetJsonFromDataTable(dt); StringBuilder jsonString = new StringBuilder("{ totalProperty:"); jsonString.Append(dt.Rows.Count); jsonString.Append(",root:["); jsonString.Append(dtJson); jsonString.Append("]}"); return jsonString.ToString(); } } }
运行效果：
上图正是在点击不同button之后下拉列表中的内容，很明显它的绑定时动态的，道理同样是使用load方法动态传参。相对GridPanel来说其前后台代码都比较简单，主要是配置有细微差别，有了上面的代码我想就不需要过多的解释了。
ComboBox分页
有时候我们的下拉列表内容较多,这个时候我们就必须适用分页来解决这个问题了，而事实上ComboBox就具有这样的功能，而且使用起来是特别的方便，只需要简单的配置后配合后台生成数据就可以了。
前台代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script> <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"><!-- Ext.onReady(function () { var url = "Default.aspx"; var myStore = new Ext.data.Store({ id: "myStoreId", proxy: new Ext.data.HttpProxy({ url: url }), reader: new Ext.data.JsonReader({ totalProperty: "totalProperty", root: "root", fields: [{ name: "SupplierID" }, { name: "CompanyName"}] }) }); var cb = new Ext.form.ComboBox({ emptyText: '请选择学生姓名...', applyTo: 'myCombo', displayField: 'CompanyName', valueField: 'SupplierID', mode: 'local', minListWidth:200, pageSize:10, typeAhead: true, triggerAction: "all", emptyText: "请选择状态...", editable: false, allowBlank: false, blankText: "查询范围必须选择", autoSelect: true, selectOnFoucus: true, store: myStore }); myStore.load({params:{start:0,limit:10}}); }); // --></mce:script> </head> <body> <div> <input type="text" id="myCombo" name="myCombo" value="" /> </div> </body> </html>
后台代码：
using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Text; using Cmj.MyData; namespace ComboBoxPaging { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { int start = 0; int limit = 10; if (!string.IsNullOrEmpty(Request["start"])) { start =int.Parse(Request["start"]); } if (!string.IsNullOrEmpty(Request["limit"])) { limit =int.Parse(Request["limit"]); } Response.Write(GetJson(start,limit)); //Response.Write("{totalProperty:8,root:[{SupplierID:/"5/",CompanyName:/"Cooperativa de Quesos 'Las Cabras'/"}]}"); Response.End(); } private string GetJson(int start,int limit) { DBHelper dbHelper = new DBHelper(); PagingSQLHelper psHelper = new PagingSQLHelper("Suppliers", "SupplierID", "asc", limit); DataTable dt = dbHelper.GetDataTable(CommandType.Text, psHelper.GetSQL(start/limit+1)); StringBuilder sb=new StringBuilder("{totalProperty:"); sb.Append(dbHelper.ExecuteScalar(CommandType.Text,"select count(0) from Suppliers").ToString()); sb.Append(","); sb.Append("root:"); sb.Append("["); sb.Append(JsonHelper.GetJsonFromDataTable(dt)); sb.Append("]}"); return sb.ToString(); } } }
运行效果：
相对不分页的情况，只是多了minListWidth和pageSize两个属性，然后load中多了相关的分页参数而已；后台代码方面基本上和GridPanel的分页差不多，配合start提供数据就可以了，确实是很方便。
ComboBox默认值
这个问题曾有几次被问到，而且我自己最初的时候遇到过这个问题，今天在这里就简单提一下这个问题。我们还用上面的例子，只需要简单添加几句话即可，后台代码和其他东西不需要改变，看一下需要添加的代码：
myStore.on("load", function () { cb.setValue(myStore.getAt(0).data.ProductName); });
从上面可以看出设置默认值的原来很简单就是设置ComboBox的Value，只是很多时候这个值是动态得到的，因此我们也就需要通过获得store中第一个值的方法来设置。关于其他方法设置默认值，基本上我没有看到，可能后期版本的Ext会添加这个功能吧，至少目前它没有相应的方法。