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.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>
页:
[1]