`
猜不透
  • 浏览: 133374 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

extjs 4.2 分页,根据查询条件分页

阅读更多



 

 

  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;
 }

 

  • 大小: 150.9 KB
分享到:
评论

相关推荐

    extjs4.2 分页combo动态条数 源码

    通过以上步骤,我们实现了EXTJS 4.2 Combobox的分页和动态加载数据。用户在输入查询时,Combobox将仅加载当前页的数据,提高应用性能和用户体验。在实际开发中,还需要考虑错误处理、网络延迟等问题,以确保功能的...

    MVC设计模式实战ExtJS4.2高级组件+SSH2在线投稿系统

    01.教程简介_ExtJS4.2简介_SSH2基本框架搭建 02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的...

    ExtJS4.2后台分页需要的几个文件

    在ExtJS4.2中实现后台分页是一个重要的功能,特别是在处理大量数据时,它可以显著提高应用程序的性能和用户体验。后台分页意味着数据不在前端一次性加载,而是分批次从服务器获取,这样可以避免一次性加载过多数据...

    extjs 树型分页组件

    你需要在服务器端处理这个请求,根据父节点ID和分页信息返回对应的数据。在EXTJS中,可以监听`beforeload`事件来预处理请求参数,或者监听`load`事件来处理加载后的数据。 5. 用户交互 树型分页组件提供了便捷的...

    EXTJS4.2 MVC环境搭建并显示数据

    EXTJS4.2是Sencha公司推出的一款强大的JavaScript前端框架,专用于构建富客户端应用程序。MVC(Model-View-Controller)模式是EXTJS中的一种架构设计方式,它有助于将应用的逻辑、视图和数据模型分离,提高代码的可...

    ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询

    ExtJs4.2+Mysql+Struts2+Hibernate3实现分页查询 1.libs目录缺少hibernate核心jar包 2.libs目录缺少struts jar 3.WebRoot目录缺少ExtJs4.2核心类库 以上信息我都在项目里面注明了,因为这些内容的文件太大了,CSDN不...

    ExtJS 4.2 实例

    这是本人在学习ExtJS 4.2 过程中做的一个小实例,包含了一些基础的功能: Tree/Grid/分页查询,滚动查询等. 与数据库的连接以及表结构在附件中的说明文档中有写.

    ExtJS4.2 MVC

    ExtJS4.2 MVC是一个基于JavaScript的前端框架,用于构建富客户端应用。MVC(Model-View-Controller)模式是软件工程中一种广泛使用的架构设计,它有助于将应用程序的业务逻辑、用户界面和数据管理分离开来,提高代码...

    ExtJS4.2源码+实例

    标题中的“ExtJS4.2源码”指的是该框架的源代码,这对于开发者来说是一份宝贵的资源。通过研究源码,开发者可以深入了解框架的工作原理,定制自己的功能,甚至为框架贡献代码。学习源码有助于提升技术水平,了解最佳...

    extjs4.2+java经典

    从给定的文件信息来看,我们探讨的主题是“ExtJS 4.2 + Java”的结合应用,这在企业级Web应用程序开发中是一个经典的组合。ExtJS是一个强大的JavaScript库,用于构建复杂的用户界面,而Java则作为后端服务的提供者。...

    extjs前台分页插件PagingStore!

    ExtJS的PagingStore是其框架中用于实现前端分页功能的重要组件,主要适用于处理大量数据的场景,以提高网页性能并提供良好的用户体验。在ExtJS 3.x版本中,PagingStore是与GridPanel结合使用,使得用户可以逐页加载...

    extjs4.2 动态生成toolbar

    在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用创建工具栏的方法。 视图层 在...

    SSH Extjs treeGrid conboxTree 分页实例

    最近在自学Extjs,做了一个小例子,后台使用SSH,前台是ExtJs,其中包含了很多内容,例如grid,TreeGrid,comboxTree,分页等内容,数据库采用的是mysql,文件中包含了数据库文件,导入mysql数据库即可,希望可以对初学者有一点...

    通用后台管理系统(ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8).pdf

    4. Grid 列表和表单,包含添加、删除、批量删除、修改、查看、图片查看和按条件查询列表等功能。 5. 导入导出 Excel 数据,支持 xlsx 和 xls 文件。 6. 资源管理(菜单管理)。 7. 用户管理和部门管理。 8. 权限...

    ExtJS 4.2 Grid组件单元格合并的方法

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...

    通用后台管理系统(ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8).docx

    2. 分页模块:ListView、PageView和QueryResult用于ExtJS的后台分页处理。 3. 数据字典:SystemInitListener加载XML格式的数据字典,供系统内部调用。 4. 登录管理:LoginFilter处理登录状态,防止未登录用户访问...

    ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇

    ExtJS4.2是Sencha公司推出的一个强大的JavaScript框架,专用于构建富客户端Web应用程序。在"ExtJS4 2学习 21 动态菜单与表格数据展示操作总结篇"中,我们将深入探讨两个核心组件:动态菜单(Dynamic Menus)和表格...

    Extjs搜索过滤 类似百度、google搜索

    在ExtJS中,我们可以遍历数据源(如`store`),并根据关键词检查每个记录的特定字段是否匹配。 在描述中提到了"asp.net版带数据库",这表明后端是用ASP.NET搭建的,可能使用了ASP.NET MVC或Web Forms。后端需要处理...

    ext-4.2.1.883

    4. **网格和数据视图**:ExtJS的网格组件能展示大量数据,支持分页、排序、过滤和编辑。数据视图则可以动态渲染数据,适应多种布局和样式。 5. **布局管理**:库内包含了多种布局模式,如适合容器的fit布局、卡片...

Global site tag (gtag.js) - Google Analytics