extjs 4.2 分页和根据查询条件分页 废话不多说直接上代码:
Ext.onReady(getPageList); function getPageList(){ //取得屏幕高度 var BodyH = document.documentElement.clientHeight; var store; //model Ext.define('Bussiness', { extend: 'Ext.data.Model', fields: [ {name: 'docCode', type:'string'}, {name: 'serialNumber', type: 'string'}, {name: 'busiType', type: 'string'}, {name: 'formId', type: 'int'}, {name: 'docDate', type: 'string'}, {name: 'channelId', type: 'string'}, {name: 'sdorgId', type: 'string'}, {name: 'aeraId', type: 'string'}, {name: 'comboCode', type: 'string'}, {name: 'packageId', type: 'string'}, {name: 'seriesNumber', type: 'string'}, {name: 'docStatus', type: 'int'} ] }); //jsonStore store =Ext.create('Ext.data.Store',{ model: 'Bussiness', pageSize:10, proxy:{ type: 'ajax', url:'bussinessInfo_list.action', reader:{ type:'json', totalProperty:'recordCount', //总记录数 root:'recordList' //json数据 } } }); //点击下一页时传递搜索框值到后台 store.on('beforeload', function (store, options) { var keyWord=Ext.getCmp('KeyWord').getValue(); var new_params = { searchText:keyWord }; Ext.apply(store.proxy.extraParams, new_params); }); var grid=Ext.create('Ext.grid.GridPanel', { //title: '业务信息', store: store, id:'myGridPanel', forceFit : true, frame: true, //顶部工具栏 查询输入框 tbar: [{ xtype:'label',text:'请输入关键词:' }, { xtype:'textfield',id:'KeyWord' }, { text:'搜索',handler:function(){ //点击搜索按钮将查询条件传递到后台 var keyWord=Ext.getCmp('KeyWord').getValue(); store.load({params:{start:0,limit:10,foo:'bar',searchText:keyWord}}); } } ], columns: [ {header:'订单号',dataIndex:'docCode'}, {header:'流水号',dataIndex:'serialNumber'}, {header:'业务类型',dataIndex:'busiType'}, {header:'业务功能号',dataIndex:'formId'}, {header:'业务时间',dataIndex:'docDate',renderer:function(value){ return new Date(parseInt(value)).toLocaleString().substr(0,19); }}, {header:'渠道信息',dataIndex:'channelId'}, {header:'部门信息',dataIndex:'sdorgId'}, {header:'区域信息',dataIndex:'aeraId'}, {header:'套餐信息',dataIndex:'comboCode'}, {header:'政策信息',dataIndex:'packageId'}, {header:'受理号码',dataIndex:'seriesNumber'}, {header:'订单状态',dataIndex:'docStatus',renderer:function(value){ switch(value){ case 1: return "已经成功生成销售定单" ; break; case 2: return "生成失败" ; break; default: return "" ; break; } }} ], dockedItems: [{ xtype: 'pagingtoolbar', store: store, // GridPanel中使用的数据 dock: 'bottom', displayInfo: true, emptyMsg:"没有数据", height:BodyH+160, displayMsg:"显示从{0}条数据到{1}条数据,共{2}条数据", store:store }], renderTo: Ext.getBody(), listeners: { itemdblclick: this.handlePanelClick } }); var keyWord=Ext.getCmp('KeyWord').getValue(); store.load({params:{start:0,limit:10,foo:'bar',searchText:keyWord}}); } //当gridpanel列表被点击时调用 function handlePanelClick(grid, rowIndex, e){ var docCode=rowIndex.data.docCode; var status=rowIndex.data.docStatus; window.location.href="bussinessInfo_detailes.action?docCode="+docCode+"&docstatus="+status; }
相关推荐
通过以上步骤,我们实现了EXTJS 4.2 Combobox的分页和动态加载数据。用户在输入查询时,Combobox将仅加载当前页的数据,提高应用性能和用户体验。在实际开发中,还需要考虑错误处理、网络延迟等问题,以确保功能的...
01.教程简介_ExtJS4.2简介_SSH2基本框架搭建 02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的...
在ExtJS4.2中实现后台分页是一个重要的功能,特别是在处理大量数据时,它可以显著提高应用程序的性能和用户体验。后台分页意味着数据不在前端一次性加载,而是分批次从服务器获取,这样可以避免一次性加载过多数据...
你需要在服务器端处理这个请求,根据父节点ID和分页信息返回对应的数据。在EXTJS中,可以监听`beforeload`事件来预处理请求参数,或者监听`load`事件来处理加载后的数据。 5. 用户交互 树型分页组件提供了便捷的...
EXTJS4.2是Sencha公司推出的一款强大的JavaScript前端框架,专用于构建富客户端应用程序。MVC(Model-View-Controller)模式是EXTJS中的一种架构设计方式,它有助于将应用的逻辑、视图和数据模型分离,提高代码的可...
ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询 1.libs目录缺少hibernate核心jar包 2.libs目录缺少struts jar 3.WebRoot目录缺少ExtJs4.2核心类库 以上信息我都在项目里面注明了,因为这些内容的文件太大了,CSDN不...
这是本人在学习ExtJS 4.2 过程中做的一个小实例,包含了一些基础的功能: Tree/Grid/分页查询,滚动查询等. 与数据库的连接以及表结构在附件中的说明文档中有写.
ExtJS4.2 MVC是一个基于JavaScript的前端框架,用于构建富客户端应用。MVC(Model-View-Controller)模式是软件工程中一种广泛使用的架构设计,它有助于将应用程序的业务逻辑、用户界面和数据管理分离开来,提高代码...
标题中的“ExtJS4.2源码”指的是该框架的源代码,这对于开发者来说是一份宝贵的资源。通过研究源码,开发者可以深入了解框架的工作原理,定制自己的功能,甚至为框架贡献代码。学习源码有助于提升技术水平,了解最佳...
从给定的文件信息来看,我们探讨的主题是“ExtJS 4.2 + Java”的结合应用,这在企业级Web应用程序开发中是一个经典的组合。ExtJS是一个强大的JavaScript库,用于构建复杂的用户界面,而Java则作为后端服务的提供者。...
ExtJS的PagingStore是其框架中用于实现前端分页功能的重要组件,主要适用于处理大量数据的场景,以提高网页性能并提供良好的用户体验。在ExtJS 3.x版本中,PagingStore是与GridPanel结合使用,使得用户可以逐页加载...
在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用创建工具栏的方法。 视图层 在...
最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...
4. Grid 列表和表单,包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5. 导入导出 Excel 数据,支持 xlsx 和 xls 文件。 6. 资源管理(菜单管理)。 7. 用户管理和部门管理。 8. 权限...
2. 分页模块:ListView、PageView和QueryResult用于ExtJS的后台分页处理。 3. 数据字典:SystemInitListener加载XML格式的数据字典,供系统内部调用。 4. 登录管理:LoginFilter处理登录状态,防止未登录用户访问...
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...
ExtJS4.2是Sencha公司推出的一个强大的JavaScript框架,专用于构建富客户端Web应用程序。在"ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇"中,我们将深入探讨两个核心组件:动态菜单(Dynamic Menus)和表格...
在ExtJS中,我们可以遍历数据源(如`store`),并根据关键词检查每个记录的特定字段是否匹配。 在描述中提到了"asp.net版带数据库",这表明后端是用ASP.NET搭建的,可能使用了ASP.NET MVC或Web Forms。后端需要处理...
4. **网格和数据视图**:ExtJS的网格组件能展示大量数据,支持分页、排序、过滤和编辑。数据视图则可以动态渲染数据,适应多种布局和样式。 5. **布局管理**:库内包含了多种布局模式,如适合容器的fit布局、卡片...