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>  

 该代码可能不完整，详细请看：http://www.coderhome.net/zifa/?p=214

评论

1 楼 zhuxiaoleiking 2010-09-03  

          

引用

引用

引用

[/u][u][/i][i][/b][b][/b][b][b][/b]    [flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][flash=200,200][url][url][url][url][url][url][url][img][img][img][img][img][list]

[list]

[*][list]

[*][*][list]

[*][*][*][list]

[*][*][*][*][list]

[*][*][*][*][*][*]

[*][*][*][*][/list]

[*][*][*][/list]

[*][*][/list]

[*][/list]

[/list]

[/list][/img][/img][/img][/img][/img][/url][/url][/url][/url][/url][/url][/url][/flash][/flash][/flash][/flash][/flash][/flash]