Ext Grid Json分页（asp.net）

首先感叹extjs的强大，无以言表！

今天瞎弄了很久的grid，看了很多网上的例子和教程，终于搞定了分页和返回的json数据中存在换行符的问题 。

刚开始参照网上的例子怎么弄都不能分页，经过调试发现ds.load({params:{start:0,limit:10}});这句话中的参数在后台用Request.QueryString["start"]这种方式获取不到数据，困了我好久，一直以为问题在前台，最后发现问题是后台获取参数的方式有问题，用Request.Params["start"]就OK了
。

下面是辛苦了很久的东东，仅供参考 。

基础教程：

Ext2.0框架的Grid使用介绍

ExtJS2.0实用简明教程

【JavaScript代码】 ：



Ext.onReady(function (){

    Ext.QuickTips.init();

    var sm = new Ext.grid.CheckboxSelectionModel();

    var cm = new Ext.grid.ColumnModel([

        new Ext.grid.RowNumberer(),

        sm,

        {header:'id',dataIndex:'id',align:'center',width:200},

        {header:'subject',dataIndex:'subject',width:500},

        {header:'attributeID',dataIndex:'attributeID',align:'center',width:200}

    ]);

    cm.defaultSortable = true;

    var ds=new Ext.data.Store({

                    proxy: new Ext.data.HttpProxy({url:'ajax/stgldata.aspx'}),

                    reader: new Ext.data.JsonReader({

                        root: 'data',

                        totalProperty:'totalCount'

                   },[ 'id','subject','attributeID']

            ) 

    });

    ds.load({params:{start:0,limit:25}});

    var grid = new Ext.grid.GridPanel({

        el: 'content',

        ds: ds,

        cm:cm,

        height:500,

        title: 'asp.net Json',

        bbar: new Ext.PagingToolbar({

            pageSize: 25,

            store: ds,

            displayInfo: true,

            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',

            emptyMsg: "没有记录"

        })

    });

    

    grid.render();

    

});



 

【HTML代码】： 



<link rel="stylesheet" type="text/css" href="http://localhost:2008/stk/js/extjs/resources/css/ext-all.css" />    

    

    <script type="text/javascript" src="http://localhost:2008/stk/js/extjs/adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="http://localhost:2008/stk/js/extjs/ext-all.js"></script>

    <script type="text/javascript" src="http://localhost:2008/stk/js/extjs/build/locale/ext-lang-zh_CN.js"></script>



 

<div id="content" style="height: 500px;">

 

【后台（asp.net）】： 



            StringBuilder jsonStr = new StringBuilder();

            jsonStr.Append("{'data':[");            

            int start=Convert.ToInt32(Request.Params["start"].Trim());

            int limit =Convert.ToInt32(Request.Params["limit"].Trim());

            SqlConnection conn = sqlConn();

            string sqlstr = "select top " + limit + " id,subject,answer,attributeID from   [2_questions] where id not in (select   top   " + start+ " id   from   [2_questions])";

            try

            {

                conn.Open();

                SqlCommand comm = new SqlCommand(sqlstr, conn);

                SqlDataReader rd = comm.ExecuteReader();

                while (rd.Read())

                {

                        jsonStr.Append("{");

                        jsonStr.Append("'id':" + rd.GetInt32(0).ToString() + ",");

                        jsonStr.Append("'subject':'" +rd.GetString(1) + "',");

                        jsonStr.Append("'attributeID':" + rd.GetInt32(3).ToString() + "");

                        jsonStr.Append("},");

                }

            }

            finally

            {

                conn.Close();

            }

            jsonStr.Remove(jsonStr.Length - 1, 1);

            jsonStr.Append("],'totalCount':1000}");

            Response.Write(jsonStr);
           
         Response.Flush();

        Response.Close();
上面这两句句是根据我的下面一篇博客来的，否则经试验返回不了数据(前台页面是一个，后台页面cs又是另外一个，奇怪，不能结合在一起吗？)
 



效果图：