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又是另外一个，奇怪，不能结合在一起吗？)

 

效果图：