extjs-4-grids(ExtJS 4 Grids 详解)

《extjs-4-grids(ExtJS 4 Grids 详解)》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、ExtJS4Grids详解本文地址http://www.showframework.com/2012/07/extjs-4-grids/本文PDF下载GridPanel是ExtJS最常用的组件之一，它的功能非常丰富，提供了非常便捷的方法执行排序，分组，编辑数据。BasicGridPanel基本表格面板让我们创建一个简单的表格，这有创建和运行表格的全部知识。ModelandStore模型和存储器GridPanel展现Store中的数据，Store可以被认为是records的集合，或者模型(Model)实例的集合。更多关于Store

2、和Model的内容请查看《ExtJS4数据(包)详解》，讲这些是为了明确一下概念，GridPanel本身只关注如何展现数据，Store负责通过Proxy获取和保存数据。首先我们需要定义一个Model，Model就是一组数据字段，先定义一个UserModelExt.define('User',{extend:'Ext.data.Model',fields:['name','email','phone']});然后创建Store以容纳若干User的实例varuserStore=Ext.create('Ext.data.Store',

3、{model:'User',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'}]

4、});简单起见，这里使用了内联的数据，真实应用中，通常都是使用代理加载服务器端的数据，有关代理可以查看《ExtJS4数据(包)详解》GridPanel表格面板现在我们已经有了模型定义数据结构，也加载了若干个模型实例到Store，已经为表格面板展示数据做好了准备Ext.create('Ext.grid.Panel',{renderTo:Ext.getBody(),store:userStore,width:400,height:200,title:'ApplicationUsers',columns:[{text:'Name',w

5、idth:100,sortable:false,hideable:false,dataIndex:'name'},{text:'EmailAddress',width:150,dataIndex:'email',hidden:true},{text:'PhoneNumber',flex:1,dataIndex:'phone'}]});这就是全部要做的。我们创建了一个表格面板渲染到了body中，并且告诉它从之前创建的userStore中取得数据，最后我们定义了表格面板有哪些列，用dataIndex属性配置表格中的列和UserMod

6、el中的字段的对应关系，Name列宽度是100，不能排序也不能隐藏，EmailAddress列默认是隐藏的(可以通过其他列的菜单控制显示)，PhoneNumber列自适应表格剩余的宽度Renderers渲染器你可以使用renderer属性改变数据的展示方式，renderer是个function，它接收原始的数据并且需要返回一个处理过的数据，返回的数据将会被展示在表格上，一些最常用的渲染器在Ext.util.Format中可以找到，也可以自定义：columns:[{text:'BirthDate',dataIndex:'birth

7、Date',//formatthedateusingarendererfromtheExt.util.Formatclassrenderer:Ext.util.Format.dateRenderer('m/d/Y')},{text:'EmailAddress',dataIndex:'email',//formattheemailaddressusingacustomrendererrenderer:function(value){returnExt.String.format('{1}

8、a>',value,value);}}]Grouping分组让表格中的行分组排列很容易，首先要在Store中指定一个groupField属性Ext.create('Ext.data.Store',{model:'Employee',data:...,groupF