本篇介绍了将数据动态绑定到Ext.form.ComboBox,采取后台读数据库的方式.支持手写和联想功能,还提供显示提示消息的效果和改变ComboBox的宽度和高度.
效果图如下:
前台代码显示如下:
<form id="form1" runat="server">
<div><div id="hello"></div>
<script type="text/javascript">
//动态绑定数据
function ready()
{
Ext.QuickTips.init();
var store = new Ext.data.Store
({
proxy: new Ext.data.HttpProxy({url:"comboJson.aspx?Flag=1"}), // 数据源
reader: new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:[{name: 'ID'},{name: 'TypeCName'}]})// 如何解析
});
store.load();
var comboBox = new Ext.form.ComboBox
({
tpl: '<tpl for="."><div ext:qtip="提示：ID={ID}；TypeCName={TypeCName}" class="x-combo-list-item">{TypeCName}</div></tpl>',
id:"ComboBox_ID",
editable:true,//默认为true，false为禁止手写和联想功能
store:store,
emptyText:'请选择',
mode: 'local',//指定数据加载方式，如果直接从客户端加载则为local，如果从服务器断加载 则为remote.默认值为：remote
typeAhead: true,
triggerAction: 'all',
valueField:'ID',
displayField:'TypeCName',
selectOnFocus:true,
renderTo:'hello',
width:160,
resizable:true
});
}
Ext.onReady(ready);
</script>
</div>
</form>
后台代码显示如下:
private void Bind_AllData()
{
DataSet ds = SampleBusiness.GetMoreRowByTableName("TypeTable");
string json = "";
if (ds != null && ds.Tables[0].Rows.Count > 0)
{
json = CommonUtil.GetJsonString(ds);
int count = ds.Tables[0].Rows.Count;
json = "{totalPorperty:" + count + ",result:" + json + "}";
}
else
{
json = "错误";
}
Response.Write(json);
}
本文转自温景良博客园博客，原文链接：http://www.cnblogs.com/wenjl520/archive/2008/11/03/1325697.html，如需转载请自行联系原作者
