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
如对本文有疑问, 点击进行留言回复!!
ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport
网友评论