EXT中的GRID分頁示例

 

EXT中的GRID分頁示例

2008-12-15 10:21

Ext.onReady(function(){
           
                           
                            var store = new Ext.data.JsonStore({
                                            url: '1.aspx',
                                            root: 'Result',
                                            fields: ['id', 'name'],
                                            autoLoad:true,
                                            totalProperty: 'RowCount'
                                        });
  
                            var grid = new Ext.grid.GridPanel({
                                            renderTo:Ext.getBody(),
                                            store:store,
                                            columns: [
                                                {header: "id", width: 200, sortable: true, dataIndex: 'id'},                                               
                                                {header: "name", width: 120, sortable: true, dataIndex: 'name'}
                                            ],
                                            viewConfig: {
                                                forceFit: true
                                            },
                                         
                                            width:600,
                                            height:300,
                                            frame:true,
                                            title:'Framed with Checkbox Selection and Horizontal Scrolling' ,
                                           
                                            bbar: new Ext.PagingToolbar({
                                            pageSize: 2,
                                            store:store,
                                            displayInfo: true,
                                            displayMsg: '當前顯示 {0} - {1}條記錄 /共 {2}條記錄',
                                            emptyMsg: "無顯示數據"
                                            })

                                        });

            })

後臺代碼:

string limit = Request["limit"];
        string start = Request["start"];

        string jsonstring = "{ PageSize:2, RowCount:10, Result:[";

        if (string.IsNullOrEmpty(start))
        { //第一次
            jsonstring += "{'id':1,name:'n1'},{'id':2,name:'n2'}";
            jsonstring += "]}";

            Response.Write(jsonstring);

        }
        else
        {
            Response.Write("{ PageSize:4, RowCount:10, Result:[{'id':3,name:'n3'},{'id':4,name:'n4'}]}");

            //,{'id':5,name:'n5'},{'id':6,name:'n6'},{'id':7,name:'n7'},{'id':8,name:'n8'},{'id':9,name:'n9'},{'id':10,name:'n10'}]}");

        }

以後臺分頁實現