EXTJS学习系列提高篇:第二十八篇(转载)作者殷良胜,ext2.2打造Ext.form.ComboBox系列--分页显示

本篇介绍了将分页数据动态绑定到Ext.form.ComboBox,采取后台读数据库的方式.支持手写和联想功能,还提供显示提示消息的效果和改变ComboBox的宽度和高度. 这里最主要的是要在后台处理分页数据返回到前台.

效果图如下:



前台代码如下:

<form id="form1" runat="server">

<br />

<div><div id="hello"></div>

<script type="text/javascript">

//动态绑定数据

function ready()

{

Ext.QuickTips.init();

//分页ComboBox 只要设置pageSize属性即可

var store = new Ext.data.Store

({

proxy: new Ext.data.HttpProxy({url:"comboJson.aspx?Flag=0"}), // 数据源

reader: new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:[{name: 'ID'},{name: 'TypeCName'}]})// 如何解析

});

store.load({params:{start:0,limit:6}});

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: 'remote',//指定数据加载方式，如果直接从客户端加载则为local，如果从服务器断加载 则为remote.默认值为：remote

typeAhead: true,

triggerAction: 'all',

valueField:'ID',

displayField:'TypeCName',

selectOnFocus:true,

renderTo:'hello',

width:240,

border:true,

frame:true,

resizable:true,

pageSize:6//当元素加载的时候，如果返回的数据为多页，则会在下拉列表框下面显示一个分页工具栏，该属性指定每页的大小

//在点击分页导航按钮时，将会作为start及limit参数传递给服务端，默认值为0，只有在mode='remote'的时候才能够使用

});

}

Ext.onReady(ready);

</script>

</div>

</form>

后台代码如下:

protected void Page_Load(object sender, EventArgs e)

{

string param = Request.QueryString["Flag"];

switch (param)

{

case "0"://代表分页

{

#region 分页

int pagesize = 5;

int start = 1;

string field, asc_desc;

if (string.IsNullOrEmpty(Request["sort"]))

{

field = "ID";

asc_desc = "ASC";

}

else

{

field = Request["sort"];

asc_desc = Request["dir"];

}

if (!string.IsNullOrEmpty(Request["limit"]))

{

pagesize = int.Parse(Request["limit"]);

start = int.Parse(Request["start"]);

}

start = start / pagesize;

start += 1;

#endregion

Bind_PagingData(field, asc_desc, pagesize, start);

}

break;

case "1"://代表不分页

{

Bind_AllData();

}

break;

default:

{

}

break;

}

}

//分页

private void Bind_PagingData(string field, string asc_desc, int pagesize, int start)

{

DataSet ds = CommonUtil.PaginationByTableName(field, asc_desc, pagesize, start, "TypeTable");

string json = "";

if (ds != null && ds.Tables[0].Rows.Count > 0)

{

json = CommonUtil.GetJsonString(ds);

int count = CommonUtil.GetCountBySql("Select count(*) from TypeTable");

json = "{totalPorperty:" + count + ",result:" + json + "}";

}

else

{

json = "错误";

}

Response.Write(json);

}