日期:2014-05-16  浏览次数:20450 次

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:[{