<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>
详细解决方案
extjs grid 搜寻 分页
热度:520 发布时间:2012-11-13 10:00:50.0
相关解决方案
- Extjs grid 失去选中行的列数据
- extjs 后台有数据,但是返回到页面为空,jsonStore加载错误,这是咋回事
- S2SH、EXTJS、JSON调整后,EXTJS接收不到Struts2的Action传回的值,无语
- Ext.grid.rowexpander 默许展开
- extjs 简单有关问题
- extjs+struts2解决办法
- Ext.ux.grid.RowEditor 的使用出现有关问题 。 求大神指点
- ExtJs 处理 datetime 有关问题
- 小女子请教一个 Ext.ux.grid.RowEditor的有关问题
- 【EXTJS】iframe里嵌套ext.window,怎样使ext.window弹出到iframe外,该怎么解决
- Tomcat + extjs 入门有关问题
- extjs ColumnModel 怎么实现表格中的数据小数点对齐
- Extjs 变量前的一个加号代表什么意思?解决方法
- extjs grid 怎么实现 行选中变色
- ExtJs 提交表单的小疑点
- DevExpress.XtraGrid.Views.Grid.GridView 怎么自增新行
- grid ++ report异常
- Grid++Report 显示有关问题
- 自己写的Asp.net Ajax,Jquery,ExtJs 三种Ajax技术框架比较,希望大家提提意见,多谢
- 有关MVC3中用到Html.Telerik().Grid()的绑定有关问题, 急
- ComponentArt:Grid 单击第二页时 报the data could not be loaded,该如何处理
- easyui grid 关于最后一条记录,该怎么解决
- 关于dv grid 的有关问题
- Ext Js 4 为什么一直出现 grid.getSelectionModel()没有定义。该如何解决
- grid++report Web插件有破解版本吗?解决思路
- 寻好用的 Grid 控件。For Asp.net,该如何解决
- EXTJS grid的getView的refresh步骤报this.grid为空或不是对象
- EXTJS grid的getView的refresh方法报this.grid为空或不是对象解决办法
- vpf9.0 grid 中text的怪有关问题
- GRID 修改即显示的有关问题