ExtJS 4 Grids 详解

Grid Panel是ExtJS最常用的组件之一,它的功能非常丰富,提供了非常便捷的方法执行排序,分组,编辑数据。

Basic Grid Panel 基本表格面板

让我们创建一个简单的表格,这有创建和运行表格的全部知识。

Model and Store 模型和存储器

Grid Panel展现Store中的数据,Store可以被认为是records的集合,或者模型(Model)实例的集合。更多关于StoreModel的内容请查看《ExtJS 4 数据(包)详解》,讲这些是为了明确一下概念,Grid Panel本身只关注如何展现数据,Store负责通过Proxy获取和保存数据。 首先我们需要定义一个ModelModel就是一组数据字段,先定义一个User Model

 
Ext.define(‘User‘, {
    extend: ‘Ext.data.Model‘,
    fields: [ ‘name‘, ‘email‘, ‘phone‘ ]
});

然后创建Store以容纳若干User的实例

 
var userStore = Ext.create(‘Ext.data.Store‘, {
    model: ‘User‘,
    data: [
        { name: ‘Lisa‘, email: ‘[email protected]‘, phone: ‘555-111-1224‘ },
        { name: ‘Bart‘, email: ‘[email protected]‘, phone: ‘555-222-1234‘ },
        { name: ‘Homer‘, email: ‘[email protected]‘, phone: ‘555-222-1244‘ },
        { name: ‘Marge‘, email: ‘[email protected]‘, phone: ‘555-222-1254‘ }
    ]
});

简单起见,这里使用了内联的数据,真实应用中,通常都是使用代理加载服务器端的数据,有关代理可以查看《ExtJS 4 数据(包)详解

Grid Panel 表格面板

现在我们已经有了模型定义数据结构,也加载了若干个模型实例到Store,已经为表格面板展示数据做好了准备

 
Ext.create(‘Ext.grid.Panel‘, {
    renderTo: Ext.getBody(),
    store: userStore,
    width: 400,
    height: 200,
    title: ‘Application Users‘,
    columns: [
        {
            text: ‘Name‘,
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: ‘name‘
        },
        {
            text: ‘Email Address‘,
            width: 150,
            dataIndex: ‘email‘,
            hidden: true
        },
        {
            text: ‘Phone Number‘,
            flex: 1,
            dataIndex: ‘phone‘
        }
    ]
});

这就是全部要做的。我们创建了一个表格面板渲染到了body中,并且告诉它从之前创建的userStore中取得数据,最后我们定义了表格面板有哪些列,用dataIndex属性配置表格中的列和User Model中的字段的对应关系,Name列宽度是100,不能排序也不能隐藏,Email Address列默认是隐藏的(可以通过其他列的菜单控制显示),Phone Number列自适应表格剩余的宽度

Renderers 渲染器

你可以使用renderer属性改变数据的展示方式,renderer是个function,它接收原始的数据并且需要返回一个处理过的数据,返回的数据将会被展示在表格上,一些最常用的渲染器在Ext.util.Format中可以找到,也可以自定义:

 
columns: [
    {
        text: ‘Birth Date‘,
        dataIndex: ‘birthDate‘,
        // format the date using a renderer from the Ext.util.Format class
        renderer: Ext.util.Format.dateRenderer(‘m/d/Y‘)
    },
    {
        text: ‘Email Address‘,
        dataIndex: ‘email‘,
        // format the email address using a custom renderer
        renderer: function(value) {
            return Ext.String.format(‘<a href="mailto:{0}">{1}</a>‘, value, value);
        }
    }
]

Grouping 分组

让表格中的行分组排列很容易,首先要在Store中指定一个groupField属性

 
Ext.create(‘Ext.data.Store‘, {
    model: ‘Employee‘,
    data: ...,
    groupField: ‘department‘
});

关于分组的更多内容,请参见《ExtJS 4 数据(包)详解》,接下来配置表格有分组属性:

 
Ext.create(‘Ext.grid.Panel‘, {
    ...
    features: [{ ftype: ‘grouping‘ }]
});

Selection Models 选中模式

有些时候,表格是用来在屏幕上展示数据的,但是经常会需要更新数据或者和表格中的数据做交互,所有表格都有个选中模式,用来控制表格中的数据是如何选中的,主要两种选中模式是行模式(Row Selection Model)和单元格模式(Cell Selection Model)
表格默认使用行模式,但是切换到单元格模式也很容易:

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

使用单元格模式改变了几个事情,第一,点击表格中的单元格只会选中当前单元格,而在行模式的时候是选中整行的,第二,用键盘导航的时候会从一个单元格走到另一个单元格,而不是从一行走到另一行,单元格模式通常配合可编辑的表格一起使用。

Editing 编辑表格

表格内置了编辑能力,我们见识一下,行编辑和单元格编辑

Cell Editing 单元格编辑

单元格编辑允许你一次编辑一个单元格内容,实现单元格编辑,首先要为每一列配置编辑控件,只要设置editor属性即可,最简单的办法就是将editor属性设置为需要使用的控件的xtype

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

如果你需要控制编辑控件的行为,可以把editor属性设置为编辑控件可接收的配置对象,例如我们设置一个不能为空的输入框:


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

可以使用任意Ext.form.field包中的控件作为编辑控件,假设某一列是日期类型,需要使用Date Field编辑:

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

没有配置editor属性的列,就是不可编辑的。
现在我们已经配置了哪一列可以编辑,也配置了用什么控件编辑,下一步就是制定选中模式,我们先使用一下 单元格模式:

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

最后我们需要安装一个单元格编辑插件:

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

以上就是全部实现一个可编辑单元格的表格的内容。效果如下:

Row Editing 行编辑

行编辑允许你一次编辑一整行,和单元格编辑的实现方式基本一致,不一样的地方是,选中模式要设置为行模式,安装一个行编辑插件

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

Paging 分页

有时候数据很多不能一次全部展现在表格中。表格支持两种分页模式,一种是分页工具条,有上一页/下一页按钮,一种是无限滚动条

Store Setup 存储器设置

开始之前首先要让Store支持分页,下面的例子中为store增加了pageSize属性,并且给Reader配置了totalProperty告知Reader一共有多少行

 
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告知reader从哪里取得数据集的总数目,然后Store需要的JSON数据应该像这样:

 
{
    "success": true,
    "total": 12, //这告知一共多少行
    "users": [ //当前页只需要4行,因为pageSize是4
        { "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" },
        { "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" },
        { "name": "Homer", "email": "[email protected]", "phone": "555-222-1244" },
        { "name": "Marge", "email": "[email protected]", "phone": "555-222-1254" }
    ]
}
Paging Toolbar 分页工具条

现在我们已经让Store支持分页了,剩下的就是配置分页工具条,你可以把分页工具条放在任何位置,但是通常放在表格的底部

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

Paging Scroller 分页滚动条

表格支持无限滚动条的方式分页,有上千条数据时你可以一直滚动滚动条就可以加载(跟微博的无限滚动条一样),没有一次渲染数千条的性能问题,需要做如下的配置

 
Ext.create(‘Ext.grid.Panel‘, {
    // 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,
    // ...
});
时间: 12-24

ExtJS 4 Grids 详解的相关文章

Extjs Form用法详解(适用于Extjs5)

Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/article/extjs-form-in-detail,转载请注明出处!推荐更多Extjs教

Extjs Form用法详解

Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/article/extjs-form-in-detail,转载请注明出处!推荐更多Extjs教

Extjs Window用法详解

今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 创建Extjs Window 创建Extjs Window的代码如下: //创建window var win = Ext.create("Ext.window.Window", { id: "myWin", title: "示例窗口", width: 500

EXTJS常用布局详解

ExtJS的容器组件都可以通过设置layout参数来选择布局改变显示风格, 它的有效值有: absolute:控制位置,accordion:手风琴布局,anchor:控制大小,border:边界式布局,card:卡片布局,column:列布局,fit:填充式布局,form:表单布局,table:表格式布局 一共9种,在这里简单总结一下 absolute:Absolute布局的目的是为了扩展布局的属性,使得布局更容易使用 accordion:accordion布局也称手风琴布局,在accordio

Extjs GridPael用法详解

Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPanel,今天我们来介绍一下Extjs中GridPanel的详细用法. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/

Extjs GridPanel用法详解

Extjs GridPanel 提供了非常强大数据表格功能,在GridPanel可以展示数据列表,可以对数据列表进行选择.编辑等.在之前的Extjs MVC开发模式详解中,我们已经使用到了GridPanel,今天我们来介绍一下Extjs中GridPanel的详细用法. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞([email protected])原创,并发布在http://www.qeefee.com/

ExtJS 4 组件详解

ExtJS 4 的应用界面是由很多小部件组合而成的,这些小部件被称作"组件(Component)",所有组件都是Ext.Component的子类,Ext.Component提供了生命周期管理包括初始化.渲染.大小和尺寸管理.销毁等功能,这使得所有Ext.Component的子类都自动分享了这些能力.ExtJS提供了各式各样丰富的组件,每一个组件都很容易被扩展创建成自定义组件. The Component Hierarchy 组件层级 容器(Container)是个可以容纳其他组件的特殊

Extjs Window用法详解 2 打印具体应用

Extjs 中的按钮元素 { xtype: 'buttongroup', title: '打印', items: [ me.tsbDel = Ext.create('Ext.button.Button', { text: '打印123', iconCls: 'tool_print', scale: 'large', iconAlign: 'top', handler: function () { var window = me.createWindow('www.view.report.vwwp

Extjs MVC开发模式详解

Extjs MVC开发模式详解 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成Model-View-Controller三层,为JS应用程序的如何组织代码指明了方向,同时使得大规模JS代码变得更加易于重用和维护:这就是Extjs MVC开发模式的初衷. 在官方给出的MVC例子中,我们可以看到一个简单的列表编辑功能,这篇文章就围绕这个功能进