extjs grid 搜索 分页

<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>