华山资源网

JavaScript的Ext JS框架中的GridPanel组件使用指南
网络编程 2024/11/18 佚名
3 1

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如图所示。

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

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' }] 
});

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

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

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分页功能代码。

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

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')"images/user_suit.png">':'<img src="/UploadFiles/2021-04-02/user_female.png">

 




/*********************************************** 
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 
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com