收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > extjs > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

JavaScript的Ext JS框架中的GridPanel组件使用指南

1 最简单的Grid Panel
Grid Panel是ExtJS的核心部分之一,通过Grid Panel可以对数据显示、排序、分组和编辑。Model和Store是Grid Panel处理数据的核心,每个Grid Panel都必须设置Model和Store。要创建Grid Panel,首先要定义Model,Model包括了Grid Panel所有需要显示的字段,相当于数据库中表字段的集合。Store可以看作是一行数据的集合或者是Model的实例集合,每个Store都包含一个或多个Model实例,Grid Panel显示的数据都存储在Store里面。Grid Panel通过Store获取数据并显示,Store则通过Proxy对数据进行读取和保存。
下面创建一个Grid Panel用来显示用户的基本信息,包括用户名、邮箱、手机号(name、email、phone),首先创建用户模型(User Model)。

Ext.define('User', { 
 extend: 'Ext.data.Model', 
 fields: [ 'name', 'email', 'phone' ] 
}); 

接下来创建Store,Store是User的集合,包括多个User实例。

var userStore = Ext.create('Ext.data.Store', { 
 model: 'User', //刚才创建的User Model 
 data: [ 
 { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' }, 
 { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' }, 
 { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' }, 
 { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' } 
 ] 
}); 

Model和Store都创建好之后,就可以创建Grid Panel了。

Ext.create('Ext.grid.Panel', { 
 renderTo: Ext.getBody(), 
 store: userStore, //绑定上面创建的Store 
 width: 400, 
 height: 200, 
 title: 'Application Users', 
 columns: [ 
 { 
 text: 'Name', 
 width: 100, 
 sortable: false, 
 hideable: false, 
 dataIndex: 'name' //Grid Panel中显示的字段,必须要和User Model中的字段一致 
 }, 
 { 
 text: 'Email Address', 
 width: 150, 
 dataIndex: 'email', 
 hidden: true 
 }, 
 { 
 text: 'Phone Number', 
 flex: 1, 
 dataIndex: 'phone' 
 } 
 ] 
}); 

最后创建的用户Grid Panel如图所示。

查看图片

2 Grid Panel数据分组(Grouping)
只要在Store中设置groupField属性,就可以对Grid Panel显示的数据进行分组。假设公司有很多员工,需要对公司的员工在Grid Panel中按部门进行分组显示。首先在Store中设置groupField属性为department。

Ext.create('Ext.data.Store', { 
 model: 'Employee', 
 data: ..., 
 groupField: 'department' //设置数据按照department分组 
}); 

然后在Grid Panel中添加grouping Feature,实现分组显示效果。

Ext.create('Ext.grid.Panel', { 
 ... 
 features: [{ ftype: 'grouping' }] 
}); 

分组显示效果如下图所示,点击这里查看官方分组显示代码。

查看图片

3 Grid Panel分页显示
当数据比较多一页显示不完的时候,就需要对数据进行分页显示。Grid Panel可以通过Paging Toolbar和Paging Scroller两种方式实现分页显示显示,Paging Toolbar有上一页/下一页按钮,Paging Scroller是当Grid Panel滚动显示到底部的时候动态加载数据。
要实现分页显示,首先要设置Store支持分页,在Store中设置pageSize,pageSize默认是25。在reader中设置数据总数量totalProperty,分页插件根据pageSize和totalProperty进行分页。下面的代码pageSize设置为4,totalProperty则从返回的json数据中total属性获取。

Ext.create('Ext.data.Store', { 
 model: 'User', 
 autoLoad: true, 
 pageSize: 4, //设置每页显示的数据数量 
 proxy: { 
 type: 'ajax', 
 url : 'data/users.json', 
 reader: { 
 type: 'json', 
 root: 'users', //指定从json的哪个属性获取数据,如果不指定,则从json的跟属性获取 
 totalProperty: 'total' //总数据数量 
 } 
 } 
}); 

假设json数据格式如下

{ 
 "success": true, 
 "total": 12, 
 "users": [ 
 { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" }, 
 { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" }, 
 { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" }, 
 { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" } 
 ] 
} 

Store的分页已经设置完毕,下面在Grid Panel中实现Paging Toolbar分页功能。

Ext.create('Ext.grid.Panel', { 
 store: userStore, 
 columns: ..., 
 dockedItems: [{ 
 xtype: 'pagingtoolbar', //在Grid Panel中添加paging toolbar 
 store: userStore, //把paging toolbar的Store设置成和Grid Panel的Store一样 
 dock: 'bottom', 
 displayInfo: true 
 }] 
}); 

Paging Toolbar的分页效果如下图所示,点击这里查看官方Paging Toolbar分页功能代码。

查看图片

Paging Scroller的分页实现比较简单,只要在Grid Panel中设置如下代码即可,点击这里查看官方Paging Scroller分页功能代码。

Ext.create('Ext.grid.Panel', { 
 //使用Paging Scroller分页插件 
 verticalScroller: 'paginggridscroller', 
 // do not reset the scrollbar when the view refreshs 
 invalidateScrollerOnRefresh: false, 
 // infinite scrolling does not support selection 
 disableSelection: true, 
 // ... 
}); 

4 Grid Panel添加Checkbox
只要设置Grid Panel的selModel属性为Ext.selection.CheckboxModel,点击这里查看官方代码实例。

Ext.create('Ext.grid.Panel', { 
 selModel: Ext.create('Ext.selection.CheckboxModel'), //设置Grid Panel的选择模式为Checkbox 
 store: userStore, 
 columns: ... 
}); 

5 综合示例

var grid = new Ext.grid.GridPanel({ 
 store //数据源 
 cm //Ext.grid.columnModel 
 columns //功能和Ext.grid.columnModel一样。与cm有一个就行 
 autoWidth:true 
 width 
 title 
 border:false 
 columnLines: true, 
 renderTo //显示div标签的id 
 animCollapse:false //True 表示为面板闭合过程附有动画效果 (默认为true,在类 Ext.Fx 可用的情况下). 
 collapsible: true, //true 表示面板可以闭合 
 columnLines:true, //true 表示有格边框 
 loadMask:true //获取数据里时有等待界面 
 stripeRows: true, //双色表格 
 plugins:true, 
 bbar:new Ext.PagingToolbar({ 
 pageSize:10, 
 store:store, //数据源 
 displayInfo:true, //为true时下面的才显示 
 displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条', 
 emptyMsg:'没有记录' 
 }), 
 tbar:[{ 
 text:'查询', 
 icon:'/trade/images/delete.gif', 
 cls:'x-btn-text-icon', 
 handler:function(){win.show();} 
 } 
}) 

//********************************************** 
//PagingToolbar分页 
//传到服务器数据 start开始查询位置, limit要查询多少条 
//排序 
//服务器 sort,dir 
//********************************************** 
var com = new Ext.grid.ColumnModel([ 
 new Ext.grid.RowNumberer(), 
 {header: "客户ID", width: 50, sortable: true, dataIndex: 'memid'}, 
 {header: "客户姓名", width: 75, sortable: true, dataIndex: 'memName'}, 
 {header:'姓别', width:50, dataIndex:'sex', align:'center', sortable:true, renderer:function(v){return (v == '1')?'<img src="images/user_suit.png">':'<img src="images/user_female.png">';}} 
 {header: '跟踪号',width:150,dataIndex:'code'}, 
 {header: '日期', width:150, dataIndex: 'kd_time'} 
]); 
/*********************************************** 
grid tbar 
样式 
cls:'x-btn-text-icon' 添加 
**************************************************/ 
EditorGridPanel 
 chickToEdit:1 //点击次数 
 ColumnModel 中要加editor editor:new Ext.form.TextField({ 
 }) 
//获取修改后的数据 
var storeEdit = grid.getStore(); // 
 var modified = storeEdit.modified.slice(0); // 
 Ext.each(modified,function(m){ 
 alert(m.data.id);  //数据就在m.data中 id 为字段名 
}) 

//获取grid数据 
var selModel = grid.getSelectionModel(); 获取选择模式 
var record; 
if(!selModel.hasSelection()){ 
 Ext.Msg.alert('警告','请选择要修改的行!'); 
 return; 
} 
selModel.getSelections().length; //选择的行数 
 
record = selModel.getSelected(); //获取选择行的数据 

(1)获取数据 :
单行

id = record.get('id'); 

或者

id = record.data.id; 

多行

record[i].get('ddd') 

(2)删除数据 :

var obj = grid.getSelectionModel().getSelected(); 
store.remove(obj); 
grid.getView().refresh(); 

(3)查询

store.baseParams['memid'] = fb.form.findField('memid').getValue(); 
store.baseParams['start'] = 0; 
store.load(); 

(4)添加一行列 :
Ext自己带的一个插件
需要文件 RowExpander.js

var expand = new Ext.ux.grid.RowExpander({ 
 tpl : new Ext.Template( 
 '<p>{address}</p>' 
 ) 
}); 

在grid的columns中加 expand,
并在grid属性中加 plugins: expand

Ext JS框架中日期函数的用法及日期选择控件的实现
Ext.Date是一个单例,封装了一系列日期操作函数,扩展JavaScriptDate的功能,下面列出一些常用的功能。基本函数:Ext.Date.add(date,interval,value)给date增加或减

Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
在Extjs开发中,我们需要屏蔽一些键盘按键,来避免用户在使用键盘操作的过程中不小心按到这些快捷键造成输入信息丢失等问题.Ext.onReady(function(){Ext.Window

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

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号