ExtJS_4_官方指南翻译：Grid组件.doc

ExtJS 4 官方指南翻译：Grid组件（上）分类：ExtJS 4.02011-10-18 16:41501人阅读评论(2)收藏举报原文：/ext-js/4-0/#!/guide/grid翻译：frank/sp42 转载请保留本页信息1 GridsGrid 面板为 Ext JS 的大头核心之一。它是一个通用性很强的组件，提供了一个简单的方式来显示、排序（sort）、分组（group）和编辑（edit）数据。TheGrid Panelis one of the centerpieces of Ext JS. Its an incredibly versatile component that provides an easy way to display, sort, group, and edit data.2 基本Grid面板 Basic Grid Panel让我们开始创建一个基本的 Grid 面板。通过这个例子你可以学习到创建 Grid 的基本方法并让 Grid 顺利地跑起来。Lets get started by creating a basicGrid Panel. Heres all you need to know to get a simple grid up and running:3 模型对象 Model 和 Store 存储对象 Model and Store一个 Grid 面板可以说仅仅是一个组件，它会把 Store 中的数据显示出来。Store 可以被看作是一记录集合，或模型的实例。欲了解更多 Store 和模型的信息，建议参阅该文。这种设计的好处是“各司其职（separation of concerns）”，并且十分清晰。Grid 面板只关注如何显示的数据，而 Store 则透过用其代理（Proxy）执行数据的获取和保存。AGrid Panelis simply a component that displays data contained in aStore. AStorecan be thought of as a collection of records, orModelinstances. For more information onStores andModels see theData guide. The benefit of this setup is clear separation of concerns. The Grid Panelis only concerned with displaying the data, while theStoretakes care of fetching and saving the data using itsProxy.首先，我们需要定义一个模型。模型只是一种集合，表示一个数据类型的字段。让我们定义一个模型，它代表着“用户User”：First we need to define aModel. AModelis just a collection of fields that represents a type of data. Lets define a model that represents a User:view plain1. Ext.define(User,2. extend:Ext.data.Model,3. fields:name,email,phone4. );接下来，我们创建一个包含多个用户 User 的 Store对象。Next lets create aStorethat contains severalUserinstances.view plain1. varuserStore=Ext.create(Ext.data.Store,2. model:User,3. data:4. name:Lisa,email:,phone:555-111-1224,5. name:Bart,email:,phone:555-222-1234,6. name:Homer,email:,phone:555-222-1244,7. name:Marge,email:,phone:555-222-12548. 9. );为了简单起见，我们直接写出 Store 其具体数据。而在真实的应用程序中，您通常会配置代理对象 Proxy，透过 Proxy 从服务器加载数据回来。更多请参阅使用 Proxy 的数据指导。For sake of ease we configured theStoreto load its data inline. In a real world application youll usually configure the Storeto use a Proxyto load data from the server. See theData guidefor more on usingProxies.4 Grid Panel当前我们有一 Model，Model 定义了我们的数据结构，然后将这几个 Model 实例添加到 Store，接着就可以使用 Grid 面板显示数据：Now that we have aModelwhich defines our data structure, and weve loaded severalModelinstances into a Store, were ready to display the data using aGrid Panel:view plain1. Ext.create(Ext.grid.Panel,2. renderTo:Ext.getBody(),3. store:userStore,4. width:400,5. height:200,6. title:ApplicationUsers,7. columns:8. 9. text:Name,10. width:100,11. sortable:false,12. hideable:false,13. dataIndex:name14. ,15. 16. text:EmailAddress,17. width:150,18. dataIndex:email,19. hidden:true20. ,21. 22. text:PhoneNumber,23. flex:1,24. dataIndex:phone25. 26. 27. );相当简单，是吧！我们刚刚创建的一个 Grid 面板，以 body 元素为容器，然后我们告诉它从我们前面创建的 userStore 中取出其数据。最后，我们不但定义了 Grid 面板将有哪些列，而且通过 dataIndex 属性来配置每列从用户领域模型中得到的数据。列“Name”指定其宽度为固定的 100px，把排序和隐藏列都禁用；列“email”默认是隐藏的（可通过其他列上面的菜单打开显示该列）；列“Phone Number”配置了 flex 为 1，表示其宽度自适应 Grid 面板宽度，即除总宽度后剩下的宽度。要查看实例，请访问“简单的Grid示例”。And thats all there is to it. We just created aGrid Panelthat renders itself to the body element, and we told it to get its data from the user Store Storethat we created earlier. Finally we defined what columns theGrid Panel will have, and we used thedata Indexproperty to configure which field in the User Modeleach column will get its data from. TheNamecolumn has a fixed width of 100px and has sorting and hiding disabled, the Email Address column is hidden by default (it can be shown again by using the menu on any other column), and the Phone Numbercolumn flexes to fit the remainder of theGrid Panels total width. To view this example live, see theSimple Grid Example.5 渲染器 Renderers您可以通过列的 renderer 配置项来改变数据的现实方式。渲染器本身是一个函数，根据传入的原始值来进行修改，返回的那个值就是现实的值。最常见的一些渲染器都包含在 Ext.util.Format，当然你可以自定义渲染器：You can use therendererproperty of the column config to change the way data is displayed. Arenderer is a function that modifies the underlying value and returns anew value to be displayed. Some of the most common renderers areincluded inExt.util.Format, but you can write your own as well:view plain1. columns:2. 3. text:BirthDate,4. dataIndex:birthDate,5. /籍此Ext.util.Format函数的渲染器formatthedateusingarendererfromtheExt.util.Formatclass6. renderer:Ext.util.Format.dateRenderer(m/d/Y)7. ,8. 9. text:EmailAddress,10. dataIndex:email,11. /邮件地址就是使用了自定义的渲染器formattheemailaddressusingacustomrenderer12. renderer:function(value)13. returnExt.String.format(1,value,value);14. 15. 16. 现场演示一下自定义渲染器渲染。See theRenderers Examplefor a live demo that uses custom renderers.6 分组 Grouping把 Grid 里面的行进行分组很容易，首先要在 Store 身上指定 groupField 属性：Organizing the rows in aGrid Panelinto groups is easy, first we specify agroupFieldproperty on our store:view plain1. Ext.create(Ext.data.Store,2. model:Employee,3. data:.,4. groupField:department5. );更多 Store 的分组请参阅数据指导。接下来，我们将配置 Grid 的 Feature 配置项以便进行行分组：For more on gouping inStores please refer to theData guide. Next we configure a grid with a groupingFeaturethat will handle displaying the rows in groups:view plain1. Ext.create(Ext.grid.Panel,2. .3. features:ftype:grouping4. );可参考一下 Grouping Grid Panel 在线例子。SeeGrouping Grid Panelfor a live example.ExtJS 4 官方指南翻译：Grid组件（下）分类：ExtJS 4.02011-10-19 08:07394人阅读评论(0)收藏举报原文：/ext-js/4-0/#!/guide/grid翻译：frank/sp42 转载请保留本页信息1 选区模型 Selection Models有时 Grid 面板被用于只是在屏幕上显示的数据，但更多的是进行交互动作或执行更新数据的任务。所有 Grid 面板都有一个选择模型（SelectionModel），以确定数据如何被选中。选择模型的两个主要类型是“整行选择模型”，抑或是“单元格选择模型”，也就是一行行地被选择，还是单个单元格被选中的问题。SometimesGrid Panels are use only to display data on the screen, but usually it is necessary to interact with or update that data. AllGrid Panels have aSelection Modelwhich determines how data is selected. The two main types of Selection Model areRow Selection Model, where entire rows are selected, andCell Selection Model, where individual cells are selected.Grid 面板默认使用行选择模型，但它很容易切换为单元格选择模型：Grid Panels use aRow Selection Modelby default, but its easy to switch to aCell Selection Model:view plain1. Ext.create(Ext.grid.Panel,2. selType:cellmodel,3. store:.4. );使用单元格选择模型的话，得改变几件事情。首先，点击一个单元格，选择的只是那个单元格（如使用行选择模型，将选择整个行）；其次，键盘导航不是行与行之间的移动，而是单元格之间的。单元格为基础的选择模型通常与编辑控件一起使用。Using aCell Selection Modelchanges a couple of things. Firstly, clicking on a cell now selects just that cell (using aRow Selection Modelwill select the entire row), and secondly the keyboard navigation willwalk from cell to cell instead of row to row. Cell-based selectionmodels are usually used in conjunction with editing.2 编辑 EditingGrid 面板支持行编辑。我们要看看编辑的两个主要模式行编辑和单元格编辑。Grid Panelhas build in support for editing. Were going to look at the two main editing modes - row editing and cell editing单元格编辑 Cell Editing单元格编辑就是允许你在 Grid 面板中针对某个单元格中的数据进行编辑。执行单元格编辑的第一步是配置每个 Grid 面板都应该是可编辑的列。以下就是编辑器的配置。最简单的方法是指定那个字段的 editor 为组件的 xtype：Cell editing allows you to edit the data in aGrid Panelone cell at a time. The first step in implementing cell editing is to configure an editor for eachColumnin yourGrid Panelthat should be editable. This is done using theeditorconfig. The simplest way is to specify just the xtype of the field you want to use as an editor:view plain1. Ext.create(Ext.grid.Panel,2. .3. columns:4. 5. text:EmailAddress,6. dataIndex:email,7. editor:textfield8. 9. 10. );如果您需要更多的控制如何编辑字段的行为，编辑器配置也可以为字段的配置对象。例如，如果我们使用的是一个文本字段，我们需要一个值：If you need more control over how the editor field behaves, theeditorconfig can also take a config object for a Field. For example if we are using aText Fieldand we want to require a value:view plain1. columns:2. text:Name,3. dataIndex:name,4. editor:5. xtype:textfield,6. allowBlank:false7. 8. 作为一个编辑字段，您可以使用在Ext.form.field包的任何类。让我们假设我们要编辑一列包含日期。我们可以使用一个日期字段编辑器：You can use any class in theExt.form.fieldpackage as an editor field. Lets suppose we want to edit a column that contains dates. We can use a Date Fieldeditor:view plain1. columns:2. 3. text:BirthDate,4. dataIndex:birthDate,5. editor:datefield6. 7. 不配置编辑器的任何一个Grid面板Ext.grid.column.Columns不会编辑。AnyExt.grid.column.Columns in aGrid Panelthat do not have aeditorconfigured will not be editable.现在，我们已经配置了哪些可编辑的列，将使用的编辑器编辑数据字段，下一步是要指定一个选择模型。让我们在Grid面板配置里使用单元格选择模型：Now that weve configured which columns we want to be editable, and theeditor fields that will be used to edit the data, the next step is tospecify a selection model. Lets use a Cell Selection Modelin ourGrid Panelconfig:view plain1. Ext.create(Ext.grid.Panel,2. .3. selType:cellmodel4. );最后打开编辑功能，我们为 Grid 面板配置上一个单元格编辑插件：Finally, to enable editing we need to configure theGrid Panelwith aCell Editing Plugin:view plain1. Ext.create(Ext.grid.Panel,2. .3. selType:cellmodel,4. plugins:5. Ext.create(Ext.grid.plugin.CellEditing,6. clicksToEdit:17. )8. 9. );而这一切都需要创建一个使用单元格编辑的 Grid，。请参阅单元格编辑实例。And thats all it takes to create an editable grid using cell editing. SeeCell Editingfor a working example.行编辑 Row Editing行编辑就是说，让您同时编辑整个行，而不是单个单元格。行编辑的效果完全与单元格编辑的方式相同，于是我们所需要做的是改变插件类型为 Ext.grid.plugin.RowEditing 并设置 selType 为 rowmodel。Row editing enables you to edit an entire row at a time, rather thanediting cell by cell. Row editing works in exactly the same way as cellediting - all we need to do is change the plugin type toExt.grid.plugin.RowEditingand set the selType torowmodel.view plain1. Ext.create(Ext.grid.Panel,2. .3. selType:rowmodel,4. plugins:5. Ext.create(Ext.grid.plugin.RowEditing,6. clicksToEdit:17. )8. 9. );行编辑的在线例子 Row Editing - Live Example3 分页 Paging有时你的数据量太大，恰恰又要在一张页面上显示这些所有的数据，怎么办呢？Grid 面板支持两个不同方式的分页：1、使用“上一页/下一页”按钮的分页工具栏；2、使用滚动条进行上下翻页。Sometimes your data set is too large to display all on one page.Grid Panelsupports two different methods of paging -Paging Toolbarwhich loads pages using previous/next buttons, andPaging Scrollerwhich loads new pages inline as you scroll.设置 Store Store Setup在设置Grid 两种类型的分页之前，我们必须要让 Store 支持分页。在下面的例子中，我们添加一个有 pageSize的Store，以及带有 totalProperty 配置项的 Reader 对象：Before we can set up either type of paging on aGrid Panel, we have to configure theStoreto support paging. In the below example we add apageSizeto theStore, and we configure ourReaderwith atotalProperty:view plain1. Ext.create(Ext.data.Store,2. model:User,3. autoLoad:true,4. pageSize:4,5. proxy:6. type:ajax,7. url:data/users.json,8. reader:9. type:json,10. root:users,11. totalProperty:total12. 13. 14. );配置项 totalProperty 指定了从 JSON 结构中哪里可以获取结果的总数。该 Store 为 JsonStore 类型的，所以看起来像这样：ThetotalPropertyconfig tells theReaderwhere to get the total number of results in the JSON response. ThisStoreis configured to consume a JSON response that looks something like this:view plain1. 2. success:true,3. total:12,4. users:5. name:Lisa,email:,phone:555-111-1224,6. name:Bart,email:,phone:555-222-1234,7. name:Homer,email:,phone:555-222-1244,8. name:Marge,email:,phone:555-222-12549. 10. 有关 Store、Proxy 用法，读者请参阅数据手册。For more onStores,Proxies, andReadersrefer to theData Guide.分页工具栏 Paging Toolbar现在，我们已设置了 Store及其分页，所有剩下的工作就是配置一个分页工具栏。你可以把分页工具栏定位在你应用程序的任何地方，但通常是停靠在 Grid