2-1-表格.docVIP

Grids表格 表格作为ExtJS的核心之一。它是一个通用性很强的组件，提供了一个简单的方来显示、排序、分组和编辑数据。 基本 让我们开始创建一个基本的。通过这个例子你可以学习到创建并让顺利地跑起来。 模型对象Model)和存储器对象Store) 一个可以说仅仅是一个组件，它会把中的数据显示出来。可以被看作是一记录集合，或模型的实例。这种设计的好处是“各司其职”，并且十分清晰。面板只关注如何显示的数据，而则透过用其代理（Proxy）执行数据的获取和保存。 首先，我们需要定义一个模型。模型是一种集合，一个数据。让我们定义一个User)模型接下来，我们创建一个包含多个用户的对象。为了简单起见，我们。而在真实的应用程序中，您通常会配置代理对象Proxy)，透过从服务器加载数据回来。 Ext.define(User, { extend: Ext.data.Model, fields: [ name, email, phone ] }); var userStore = Ext.create(Ext.data.Store, { model: User, data: [ { name: Lisa, email: lisa@, phone: 555-111-1224 }, { name: Bart, email: bart@, phone: 555-222-1234 }, { name: Homer, email: home@, phone: 555-222-1244 }, { name: Marge, email: marge@, phone: 555-222-1254 } ] }); 表格面板(Grid Panel) 通过模型定义了数据结构，然后将这几个实例添加到，接着就可以使用面板显示数据Ext.create(Ext.grid.Panel, { renderTo: Ext.getBody(), store: userStore, width: 400, height: 200, title: Application Users, columns: [ { text:Name, dataIndex: name, sortable:false, hideable:false, width:100 },{ text: Email Address, dataIndex: email, width: 150, hidden: true },{ text: Phone Number, dataIndex: phone, flex: 1 } ] }); 渲染器Renderers) 您可以通过列的 renderer 配置项来改变数据的方式。渲染器本身是一个函数，根据传入的原始值来进行修改，返回的那个值就是现实的值。常见的渲染器都包含在Ext.util.Format，当然你可以自定义渲染器： columns: [ { text: Birth Date, dataIndex: birthDate, //Ext.util.Format的日期渲染器格式化日期 renderer: Ext.util.Format.dateRenderer(m/d/Y) }, { text: Email Address, dataIndex: email, //自定义渲染器 renderer: function(value) { return Ext.String.format( a href=mailto:{0}{1}/a,value, value); } } ] 分组Grouping) 在表格里进行分组很容易，首先指定groupField属性配置的Feature配置项以便进行行分组Ext.create(Ext.data.Store, { model: Employee, data: ..., groupField: department }); Ext.create(Ext.grid.Panel,{ … features: [{ftype: grouping}] }); 选区模型Selection Models) 有时只是在屏幕上显示的数据，但更多的是进行交互动作或执行更新数据的