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

评论

1 楼 zhouxiaowen 2011-06-03