ExtJS 4 官方指南翻译:Grid组件(下)

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/grid

翻译:frank/sp42 转载请保留本页信息

选区模型 Selection Models

有时 Grid 面板被用于只是在屏幕上显示的数据,但更多的是进行交互动作或执行更新数据的任务。所有 Grid 面板都有一个选择模型(SelectionModel),以确定数据如何被选中。选择模型的两个主要类型是“整行选择模型”,抑或是“单元格选择模型”,也就是一行行地被选择,还是单个单元格被选中的问题。

Sometimes Grid 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
Model
which determines how data is selected. The two main types of Selection Model areRow Selection Model, where entire rows are
selected, and Cell Selection Model, where individual cells are selected.

Grid 面板默认使用行选择模型,但它很容易切换为单元格选择模型:

Grid Panels use aRow Selection
Model
by default, but it's easy to switch to a Cell Selection Model:

Ext.create('Ext.grid.Panel', {
    selType: 'cellmodel',
    store: ...
});

使用单元格选择模型的话,得改变几件事情。首先,点击一个单元格,选择的只是那个单元格(如使用行选择模型,将选择整个行);其次,键盘导航不是行与行之间的移动,而是单元格之间的。单元格为基础的选择模型通常与编辑控件一起使用。

Using a Cell Selection Model changes 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.

编辑 Editing

Grid 面板支持行编辑。我们要看看编辑的两个主要模式——行编辑和单元格编辑。

Grid Panel has build in support for editing. We're 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 a Grid Panel one cell at a time. The first step in implementing cell editing is to configure an editor for eachColumn in yourGrid
Panel
that should be editable. This is done using the editor config. The simplest way is to specify just the xtype of the field you want to use as an editor:

Ext.create('Ext.grid.Panel', {
    ...
    columns: [
        {
            text: 'Email Address',
            dataIndex: 'email',
            editor: 'textfield'
       }
    ]
});

如果您需要更多的控制如何编辑字段的行为,编辑器配置也可以为字段的配置对象。例如,如果我们使用的是一个文本字段,我们需要一个值:

If you need more control over how the editor field behaves, the editor config can also take a config object for a Field. For example if we are using aText Field and we want to require a value:

columns: [
    text: 'Name',
    dataIndex: 'name',
    editor: {
        xtype: 'textfield',
        allowBlank: false
    }
]

作为一个编辑字段,您可以使用在Ext.form.field包的任何类。让我们假设我们要编辑一列包含日期。我们可以使用一个日期字段编辑器:

You can use any class in the Ext.form.field package as an editor field. Lets suppose we want to edit a column that contains dates. We can use aDate
Field
editor:

columns: [
    {
        text: 'Birth Date',
        dataIndex: 'birthDate',
        editor: 'datefield'
    }
]

不配置编辑器的任何一个Grid面板Ext.grid.column.Columns不会编辑。

Any Ext.grid.column.Columns in a Grid Panel that do not have a editor configured will not be editable. 

现在,我们已经配置了哪些可编辑的列,将使用的编辑器编辑数据字段,下一步是要指定一个选择模型。让我们用在我们的Grid面板配置的小区选择模型:

Now that we've 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. Let's use aCell
Selection Model
in our Grid Panel config:

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'cellmodel'
});

最后打开编辑功能,我们为 Grid  面板配置上一个单元格编辑插件:

Finally, to enable editing we need to configure the Grid Panel with a Cell Editing Plugin:

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ]
});

而这一切都需要创建一个使用单元格编辑的 Grid,。请参阅单元格编辑实例。

And that's all it takes to create an editable grid using cell editing. See Cell Editing for 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.RowEditing
and set the selType to rowmodel.

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })
    ]
});

行编辑的在线例子 Row Editing - Live Example

分页 Paging

有时你的数据量太大,恰恰又要在一张页面上显示这些所有的数据,怎么办呢?Grid 面板支持两个不同方式的分页:1、使用“上一页/下一页”按钮的分页工具栏;2、使用滚动条进行上下翻页。

Sometimes your data set is too large to display all on one page. Grid Panel supports two different methods of paging - Paging Toolbar which loads pages using previous/next buttons, and Paging Scroller which 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 a Grid Panel, we have to configure the Store to support paging. In the below example we add a pageSize to the Store, and we configure our Reader with a totalProperty:

Ext.create('Ext.data.Store', {
    model: 'User',
    autoLoad: true,
    pageSize: 4,
    proxy: {
        type: 'ajax',
        url : 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            totalProperty: 'total'
        }
    }
});

配置项 totalProperty 指定了从 JSON 结构中哪里可以获取结果的总数。该 Store 为 JsonStore 类型的,所以看起来像这样:

The totalProperty config tells the Reader where to get the total number of results in the JSON response. This Store is configured to consume a JSON response that looks something like this:

{
    "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、Proxy 用法,读者请参阅数据手册。

For more on Stores, Proxies, and Readers refer to the Data Guide.

分页工具栏 Paging Toolbar

现在,我们已设置了 Store及其分页,所有剩下的工作就是配置一个分页工具栏。你可以把分页工具栏定位在你应用程序的任何地方,但通常是停靠在 Grid 面板旁边:

Now that we've setup our Store to support paging, all that's left is to configure a Paging Toolbar. You could put the Paging Toolbar anywhere in your application layout, but typically it is docked to theGrid Panel:

Ext.create('Ext.grid.Panel', {
    store: userStore,
    columns: ...,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: userStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]
});

分页工具栏示例 Paging Toolbar Example

分页滚动 Paging Scroller

Grid 作为替代使用分页工具栏支持无限滚动。您的用户可以通过滚动数以千计的记录,却没有过多渲染记录而带来的性能损失。应指定Grid 其 Store 的 pageSize 的大小如何。

Grid supports infinite scrolling as an alternative to using a pagingtoolbar. Your users can scroll through thousands of records without theperformance penalties of renderering all the records on screen at once.The grid should be bound to a store with a pageSize
specified.

Ext.create('Ext.grid.Panel', {
    // 使用PagingGridScroller (代替 PagingToolbar)Use a PagingGridScroller (this is interchangeable with a PagingToolbar)
    verticalScrollerType: 'paginggridscroller',
    // 当刷新试图时不复位滚动条 do not reset the scrollbar when the view refreshs
    invalidateScrollerOnRefresh: false,
    // 无限滚动不支持选择 infinite scrolling does not support selection
    disableSelection: true,
    // ...
});

无限滚动示例 Infinite Scrolling Example

时间: 2024-10-26 18:21:40

ExtJS 4 官方指南翻译:Grid组件(下)的相关文章

ExtJS 4 官方指南翻译:Grid组件(上)

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/grid 翻译:frank/sp42 转载请保留本页信息 Grids Grid 面板为 Ext JS 的大头核心之一.它是一个通用性很强的组件,提供了一个简单的方式来显示.排序(sort).分组(group)和编辑(edit)数据. The Grid Panel is one of the centerpieces of Ext JS. It's an incredibly versatile compo

ExtJS 4 官方指南翻译:Component 组件

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/component 翻译:frank/sp42 转载请保留本页信息 ExtJS 程序由不同的器件所组成,器件也称作"组件".所有组件皆是 Ext.Component 其子类,目的在于能够参与生存周期的自动化管理,包括实例化.渲染.大小调整与定位.销毁的问题.ExtJS不但直接提供了一个广阔且实用的组件模型,而且使得任意组件都可以轻松地扩展出新的组件. An Ext JS application'

ExtJS 4 官方指南翻译:Drag and Drop 拖放

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/drag_and_drop 翻译:frank/sp42 转载请保留本页信息 拖放 Drag and Drop 在那么多的交互设计模式之中,"拖放(Drag andDrop)"模式可以说是开发者感觉比较不错的.用户日常在进行拖放操作的时候,真的是连"想都不用想"地就可以进行拖放操作了,非常直观而且易学易用.下文中的教程中,请跟随我们.不是我们"大厥其词",而

ExtJS 4 官方指南翻译:键盘导航 Keyboard Navigation

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/keyboard_nav 翻译:frank/sp42 转载请保留本页信息 使用键盘的原因,无非大致两个原因:一.控制鼠标指针不及敲键盘来得快:二.某些用户用不了鼠标,这是可用性方面的问题(accessibility). Navigating with your keyboard is often faster than using the cursor and is useful for both pow

ExtJS 4 官方指南翻译:容器与布局(Layouts and Containers)

原文:http://docs.sencha.com/ext-js/4-0/#!/guide/layouts_and_containers 翻译:frank/sp42 转载请保留本页信息 布局系统是 Ext JS 的最强大的部分之一.它可以处理您的应用程序中的每个组件的大小和定位.本指南介绍了如何进行布局的基础知识. The layout system is one of the most powerful parts of Ext JS. It handles the sizing and po

ExtJS 4.2 Grid组件单元格合并的方法_extjs

ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码. 1.1.1 Grid组件 1.1.2 HTML代码 从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域). 其中grid-body包含了许多tr元素,每一个tr都是代表Gri

Ext JS 4的Grid组件

Summary: 介绍Ext JS 4的Grid Ext JS 4 Grid Components Author: Brian Moeskau(译者:Frank Cheung) Published: 2011三月七日 Ext Version: 4.x 该文英文版本:http://www.sencha.com/blog/ext-js-4-grid-components 我们正在不懈地努力着Ext JS4.到目前为止所呈送给各位看官的只是程序员预览版本(Developer Perview),不过我们

oracle11g-安装oracle rac 是否需要在每个节点安装grid组件?

问题描述 安装oracle rac 是否需要在每个节点安装grid组件? 安装oracle rac 是否需要在每个节点安装grid组件? 解决方案 需要 全都要运行,每个节点都要将实例起动,并且确认所有的节点都安装了grid组件,按要求配置好.并起动. 起动oracle rac需要在root用户下,执行crsctl start cluster all

jQuery Mobile教程:grid组件设计实现细节

文章简介:本文我们来通过源码分析的方式,深度认识一下jQuery Mobile中grid组件的设计实现细节. 本文我们来通过源码分析的方式,深度认识一下jQuery Mobile中grid组件的设计实现细节 先看一下jquery.mobile-1.1.0.css的样式设计源码: /*grid的class*/ .ui-grid-a,.ui-grid-b,.ui-grid-c,ui-grid-d{ overflow:hidden; } /*block的class*/ .ui-block-a,.ui-