轉：帶搜尋分頁的gird

<script type="text/javascript">
Ext.onReady(function(){
    var ds = new Ext.data.Store({//這是資料來源
        proxy : new Ext.data.HttpProxy({url:'index.php?model=user&action=list&'}),
        reader: new Ext.data.JsonReader({
            root: 'topics',
            totalProperty: 'totalCount',
            id: 'user_id'
            },[
            'user_id','username','real_name','telephone','station_status','headship'
          ])
    });

    var colModel = new Ext.grid.ColumnModel([//定義列
         {header:'ID',width:50,sortable:true,dataIndex:'user_id'},
         {id:'title',header:'使用者名稱', width:100,sortable:true,dataIndex:'username'},
         {header:'真實姓名',width:100,sortable:true,dataIndex:'real_name'},
         {header:'電話',width:100,sortable:true,dataIndex:'telephone'},
         {header:'崗位狀態',width:100,sortable:true,dataIndex:'station_status'},
         {header:'職務',width:100,sortable:true,dataIndex:'headship'}
        ]);
    var tb = new Ext.Toolbar('north-div');//建立一個工具條
   
    tb.add({
        text: '添加',
        handler: newUser
        },{
        text: '編輯',
        handler: editUser
        },{
        text: '刪除',
        handler: delUser
    });
       
    var grid = new Ext.grid.GridPanel({//列表
                border:false,
                region:'south',
                height:500,
                loadMask: true,
                el:'center',
                title:'條目列表',
                store: ds,
                cm: colModel,
                autoScroll: true,
                bbar: new Ext.PagingToolbar({
                    pageSize: 20,
                    store: ds,
                    displayInfo: true,
                    displayMsg: '第{0} 到 {1} 條資料 共{2}條',
                    emptyMsg: "沒有資料"
                })
            });
    var top = new Ext.FormPanel({//這裡是搜尋表單
        buttonAlign:'right',
        labelWidth:70,
        region:'center',
        frame:true,
        title: '搜尋',
        items: [{
                layout:'column',
                items:[{
                    columnWidth:.33,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: '使用者名稱',
                        id: 'username',
                        name: 'username',
                        anchor:'90%'
                    }]
                },{
                    columnWidth:.33,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: '姓名',
                        name: 'real_name',
                        id: 'real_name',
                        anchor:'90%'
                    }]
                },{
                    columnWidth:.33,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Email',
                        name: 'email',
                        id: 'email',
                        vtype:'email',
                        anchor:'90%'
                    }]
                }]
            }
        ],

        buttons: [{
            text: '儲存',
            handler:function(){
                                // 這裡是關鍵，重新載入資料來源，並把搜尋表單值提交
                ds.load({params:{start:0, limit:20,
                    username:Ext.get('username').dom.value,
                    real_name:Ext.get('real_name').dom.value,
                    email:Ext.get('email').dom.value}});
            }
        },{
            text: '重設',
            handler:function(){top.form.reset();}
        }]
    });
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
              border:false,
              region:'north',
              contentEl:'north-div',
              tbar:tb,
              height:26
            },top,
            grid
        ]}
    );
    ds.load({params:{start:0, limit:20}});
        // 這裡很關鍵，如果不加，翻頁後搜尋條件就變沒了，這裡的意思是每次資料載入前先把搜尋表單值加上去，這樣就做到了翻頁保留搜尋條件了
    ds.on('beforeload',function(){
        Ext.apply(
        this.baseParams,
        {
            username:Ext.get('username').dom.value,
            real_name:Ext.get('real_name').dom.value,
            email:Ext.get('email').dom.value
        });
    });
    function newUser() {
        parent.newTab('400012','添加使用者','index.php?model=user&action=add');
    }
    function editUser() {
        var s = grid.getSelectionModel().getSelections();
        if (s.length==0) {
            Ext.Msg.alert('出錯啦','你還沒有選擇要操作的記錄！');
        }
        for (i=0;i<s.length;i++) {
            var id = s[i].id;
            parent.newTab('400012'+id,'編輯使用者','index.php?model=user&action=add&user_id='+id);
        }
    }
    function delUser() {
        var ids = getId(grid);
        if (ids) {
            Ext.Msg.confirm('確認', '真的要刪除嗎？', function(btn){
                if (btn == 'yes'){
                    Ext.Ajax.request({
                       url: 'index.php?model=user&action=delete&ids='+ids,
                       success: function(result){
                            json = Ext.util.JSON.decode(result.responseText);
                            ds.reload();
                            }
                    });
                }
            });       
        } else {
            Ext.Msg.alert('出錯啦','你還沒有選擇要操作的記錄！');
        }
    }
    loadend();
});
</script>
<div id="north-div"></div>
<div id="center"></div>