- 浏览: 3557741 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (1491)
- Hibernate (28)
- spring (37)
- struts2 (19)
- jsp (12)
- servlet (2)
- mysql (24)
- tomcat (3)
- weblogic (1)
- ajax (36)
- jquery (47)
- html (43)
- JS (32)
- ibatis (0)
- DWR (3)
- EXTJS (43)
- Linux (15)
- Maven (3)
- python (8)
- 其他 (8)
- JAVASE (6)
- java javase string (0)
- JAVA 语法 (3)
- juddiv3 (15)
- Mule (1)
- jquery easyui (2)
- mule esb (1)
- java (644)
- log4j (4)
- weka (12)
- android (257)
- web services (4)
- PHP (1)
- 算法 (18)
- 数据结构 算法 (7)
- 数据挖掘 (4)
- 期刊 (6)
- 面试 (5)
- C++ (1)
- 论文 (10)
- 工作 (1)
- 数据结构 (6)
- JAVA配置 (1)
- JAVA垃圾回收 (2)
- SVM (13)
- web st (1)
- jvm (7)
- weka libsvm (1)
- weka屈伟 (1)
- job (2)
- 排序 算法 面试 (3)
- spss (2)
- 搜索引擎 (6)
- java 爬虫 (6)
- 分布式 (1)
- data ming (1)
- eclipse (6)
- 正则表达式 (1)
- 分词器 (2)
- 张孝祥 (1)
- solr (3)
- nutch (1)
- 爬虫 (4)
- lucene (3)
- 狗日的腾讯 (1)
- 我的收藏网址 (13)
- 网络 (1)
- java 数据结构 (22)
- ACM (7)
- jboss (0)
- 大纸 (10)
- maven2 (0)
- elipse (0)
- SVN使用 (2)
- office (1)
- .net (14)
- extjs4 (2)
- zhaopin (0)
- C (2)
- spring mvc (5)
- JPA (9)
- iphone (3)
- css (3)
- 前端框架 (2)
- jui (1)
- dwz (1)
- joomla (1)
- im (1)
- web (2)
- 1 (0)
- 移动UI (1)
- java (1)
- jsoup (1)
- 管理模板 (2)
- javajava (1)
- kali (7)
- 单片机 (1)
- 嵌入式 (1)
- mybatis (2)
- layui (7)
- asp (12)
- asp.net (1)
- sql (1)
- c# (4)
- andorid (1)
- 地价 (1)
- yihuo (1)
- oracle (1)
最新评论
-
endual:
https://blog.csdn.net/chenxbxh2 ...
IE6 bug -
ice86rain:
你好,ES跑起来了吗?我的在tomcat启动时卡在这里Hibe ...
ES架构技术介绍 -
TopLongMan:
...
java public ,protect,friendly,private的方法权限(转) -
贝塔ZQ:
java实现操作word中的表格内容,用插件实现的话,可以试试 ...
java 读取 doc poi读取word中的表格(转) -
ysj570440569:
Maven多模块spring + springMVC + JP ...
Spring+SpringMVC+JPA
【原创】extjs4做的grid,带分页,搜索
最终效果图:
服务器端数据格式输出:
{"total":100,"items":[{"id":0,"name":"aaaa0","time":"2009-23-0","phone":"000-2342442"},{"id":1,"name":"aaaa1","time":"2009-23-1","phone":"010-2342442"},{"id":2,"name":"aaaa2","time":"2009-23-2","phone":"020-2342442"},{"id":3,"name":"aaaa3","time":"2009-23-3","phone":"030-2342442"},{"id":4,"name":"aaaa4","time":"2009-23-4","phone":"040-2342442"},{"id":5,"name":"aaaa5","time":"2009-23-5","phone":"050-2342442"},{"id":6,"name":"aaaa6","time":"2009-23-6","phone":"060-2342442"},{"id":7,"name":"aaaa7","time":"2009-23-7","phone":"070-2342442"},{"id":8,"name":"aaaa8","time":"2009-23-8","phone":"080-2342442"},{"id":9,"name":"aaaa9","time":"2009-23-9","phone":"090-2342442"}]}
服务器端参数接受:
int page = int.Parse(context.Request["page"]);//当前第几页,从1开始
int pagesize = int.Parse(context.Request["limit"]);//每页显示数
前台js部分:
<script type="text/javascript"> Ext.require(['Ext.data.*', 'Ext.grid.*']); Ext.onReady(function () { Ext.define('MyData', { extend: 'Ext.data.Model', fields: [ { name: "id", type: "int" }, //第一个必须指定mapping,其他可以省略 'name', 'time', 'phone' ] }); var mystore = Ext.create('Ext.data.Store', { //分页大小 pageSize: 10, model: 'MyData', proxy: { type: 'ajax', url: 'loadgriddata.ashx', reader: { root: 'items', totalProperty: 'total' } }, sorters: [{ property: 'id', //排序字段 direction: 'asc'// 默认ASC }] }) var panel = Ext.create('Ext.form.Panel', { title: '按条件搜索', width: 600, defaultType: 'textfield', frame: true, method: 'POST', collapsible: true,//可折叠 bodyPadding: 5, layout: 'column', margin: '0 0 10 0', items: [{ fieldLabel: '姓名', labelWidth: 40, id: 'name' }, { xtype: 'button', text: '搜索', margin: '0 0 0 5', handler: function () { var name = Ext.getCmp('name').getValue(); //获取文本框值 if (name !="") { mystore.load({ params: { name: name} });//传递参数 } } }], renderTo: Ext.getBody() }) var grid = Ext.create('Ext.grid.Panel', { title: 'grid加载远程数据', width: 600, store: mystore, loadMask: true, //加载提示{ msg: '正在加载数据,请稍侯……' } selModel: new Ext.selection.CheckboxModel, //添加checkbox列 columns: [{ header: '姓名', dataIndex: 'name' }, { header: '时间', dataIndex: 'time', width: 150 }, { header: '电话', dataIndex: 'phone' }], dockedItems: [ { xtype: 'pagingtoolbar', store: mystore, // same store GridPanel is using dock: 'bottom', //分页 位置 emptyMsg: '没有数据', displayInfo: true, displayMsg: '当前显示{0}-{1}条记录 / 共{2}条记录 ', beforePageText: '第', afterPageText: '页/共{0}页' }, { xtype: 'toolbar', items: [{ iconCls: 'icon-add', text: 'Add', scope: this, //添加 handler: function () { Panel.show(); //显示 } }, { iconCls: 'icon-delete', text: 'Delete', //disabled: true, itemId: 'delete', scope: this, handler: function () { //var selModel = grid.getSelectionModel(); var selected = grid.getSelectionModel().getSelection(); var Ids = []; //要删除的id Ext.each(selected, function (item) { Ids.push(item.data.id); //id 对应映射字段 }) //alert(Ids); } }] }], listeners: { //监听单击事件 records 当前行 对象 itemclick: function (dv, records, item, index, e) { //alert(record.data.id); }, selectionchange: function (model, records) { if (records[0]) { Panel.show(); //显示 Panel.loadRecord(records[0]); } } }, renderTo: Ext.getBody() }) //初始加载第1页 mystore.loadPage(1); var Panel = Ext.create('Ext.form.Panel', { title: '表单', width: 300, frame: true, bodyPadding: 5, //closable:true,//是否可关闭 hidden: true, //隐藏 margin: '10 0 0 0', defaultType: 'textfield', //name对应grid列中的dataIndex items: [{ fieldLabel: 'name', name: 'name' }, { fieldLabel: 'time', name: 'time' }, { fieldLabel: 'phone', name: 'phone'}], renderTo: Ext.getBody(), buttons: [{ text: '确定' }, { text: '取消'}] }); }) </script>
发表评论
-
extjs4 ajax 同步设置
2012-08-31 13:42 1960// 把新的数据发送到服务端去,保存 E ... -
extjs4 bug查询
2012-08-25 15:57 5046Bug Fixes Fix tabs mouseo ... -
ExtJS4学习笔记八--Template的使用(转)
2012-08-24 13:32 1629http://hnhnhnhnhn.iteye ... -
ASP.NET+ExtJs4.0+表单提交submit,上传图片到服务器(转)
2012-08-22 12:44 2719ASP.NET+ExtJs4.0+表单提交submi ... -
EXTJS 4 form population with JSON read
2012-08-22 12:31 1852EXTJS 4 form population wi ... -
ExtJS Tree same parentNode
2012-08-19 17:22 1616ExtJS Tree same parentNode ... -
extjs4 一个很专业demo的博客
2012-08-19 16:57 1943http://extjstutorial.info/extjs ... -
ExtJs 4 – XTemplates
2012-08-18 20:34 1634Home › post › ExtJs 4 – XTe ... -
extjs4 tree操作
2012-08-18 20:25 5193Extjs tree 如何获得选中的节点 ... -
extjs4 打开pdf文件
2012-08-18 20:09 5880buttons: [{ text :'OPE ... -
cannot read property 'flex' of undefined
2012-08-18 13:45 7161Extjs的一个错误,谷歌浏览器捕获到的, 后来查了下原因, ... -
extjs4 初始化的一个方法
2012-08-17 21:03 1743initComponent : function() { ... -
extjs4 tree2
2012-08-16 15:26 1368http://blog.csdn.net/clskkk2222 ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2012-08-16 13:36 1610Ext中的get、getDom、getCmp、g ... -
extjs4 学习博客
2012-08-12 16:03 1439http://blog.csdn.net/zhaoqilian ... -
extjs4 上传文件
2012-08-11 23:23 1606http://blog.sina.com.cn/s/blog_ ... -
extjs4 struts2 grid 新增、删除、修改
2012-08-11 20:22 2081http://blog.csdn.net/dys1990/ar ... -
extjs4 tree
2012-08-11 09:27 1971How To Use ExtJS 4 TreePan ... -
ExtJs xtype
2012-08-10 21:45 1670ExtJs xtype一览 (2012-06-2 ... -
ExtJS常用的正则表达式验证
2012-08-05 15:59 1334http://huyubisheng.iteye.co ...
相关推荐
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...
ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...
很多同事在用extjs grid做分页的时候,往往会想用grid的多选功能来实现导出Excel之类的功能(也就是所谓的多选记忆功能),但在选选择下一页的时候 上一页选中的已经清除 这是因为做分页的时候又向服务器请求了分页...
EXTJS4 GRID 表格 分页 编辑 添加判断 颜色判断 分组 等示例
总的来说,"extjs4打印grid插件"是ExtJS4开发中非常实用的一个工具,它为Grid Panel提供了方便的打印功能,极大地丰富了用户体验,特别是在数据报告和数据分析场景中。通过深入理解和使用这个插件,开发者可以更好地...
在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...
### Extjs4 Grid分页与自动刷新 #### 一、Extjs4 Grid 分页功能实现 在使用Extjs4进行Web应用开发时,Grid控件是常用的数据展示组件之一。对于大数据量的情况,通常需要使用分页来提高用户体验。下面详细介绍如何...
2. Grid:EXTJS Grid是数据展示的主要组件,它与Store绑定后,可以自动展示Store中的数据,并支持分页操作,如切换页码、显示每页记录数等。 3. Paging Toolbar:分页条是EXTJS提供的一种UI组件,它包含页码按钮、...
在EXTJS4中,`ComboBox` 是一个非常常用的组件,它提供了一个下拉选择框的功能。在某些场景下,我们可能需要在下拉菜单中展示更丰富的信息,比如表格数据,这时就可以使用 `GridComboBox`。`GridComboBox` 结合了 `...
在本文中,我们将深入探讨如何实现一个基于ExtJS和Direct Web Remoting (DWR)的带分页、分组及后台排序功能的Grid组件。这个功能整合了多种技术,包括ExtJS、DWR、Spring和Hibernate,以创建一个高效且灵活的数据...
ExtJs+Dwr(Grid)实现分页功能,很实用
EXTJS通过其Grid组件支持分页,Grid组件是一个可配置的表格视图,能够显示大量数据并进行排序、筛选和分页操作。 首先,我们需要创建一个EXTJS Grid组件。在JS文件中,定义Grid的基本配置,包括列模型(column ...
在本示例中,我们将深入探讨如何使用ExtJS实现动态加载grid,同时实现CRUD(创建、读取、更新、删除)操作和分页功能。 首先,让我们了解什么是Grid。在ExtJS中,Grid是一种数据网格组件,用于展示大量结构化数据。...
- Grid的顶部通常包含一个工具栏,可以动态添加按钮或其他UI元素,提供搜索、排序或过滤等功能。这些功能可以通过`dockedItems`配置项实现。 6. **Autogrid.js可能的用途** - 文件名"Autogrid.js"暗示可能是一个...
在本篇文章中,我们将深入探讨如何在ExtJS4中实现前台Grid的数据导出到Excel功能。 首先,我们需要了解`Ext.grid.Panel`,这是ExtJS中的核心组件之一,用于创建数据网格。它能够动态加载数据,提供排序、过滤、分页...
因此,现在几乎所有的grid控件都会支持分页功能。extjs也不例外,它对分页也提供了强大而方便的支持,使得我们在分页处理上可以得心应手。 在extjs中,类Ext.PagingToolbar封装了关于分页的操作,该类从Toolbar继承...
在ExtJS框架中,我们可以实现具有动画效果的grid分页,提升用户交互的流畅性和视觉吸引力。 首先,让我们了解一下ExtJS。ExtJS是一个流行的JavaScript库,提供了丰富的组件和工具,用于构建复杂的、功能强大的Web...
1. **EXTJS Grid组件**:EXTJS Grid是EXTJS的核心组件之一,它允许开发者创建可分页、可排序、可过滤的数据表格。Grid可以与各种数据源(如JSON、XML或内存中的数组)配合使用,并通过Store对象进行数据的加载和管理...
分页组件在EXTJS中通常由PagingToolbar提供,这是一个放置在Grid或TreePanel底部的工具栏,包含了导航按钮和页码显示。在Combobox中实现分页,我们需要自定义Combobox的行为,使其能够与PagingToolbar协同工作。 `...
在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...