Extjs GridPanel用法详解

Extjs GridPanel 提供了非常强大数据表格功能，在GridPanel可以展示数据列表，可以对数据列表进行选择、编辑等。在之前的Extjs MVC开发模式详解中，我们已经使用到了GridPanel，今天我们来介绍一下Extjs中GridPanel的详细用法。

本文的示例代码适用于Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中亲测可用！

本文由齐飞（youring2@gmail.com）原创，并发布在http://www.qeefee.com/article/extjs-grid-in-detail，转载请注明出处！推荐更多Extjs教程、Extjs5教程

创建GridPanel

要使用GridPanel，首先要定义Store，而在创建Store的时候必须要有Model，因此我们首先来定义Model：

//1.定义Model
Ext.define("MyApp.model.User", {
    extend: "Ext.data.Model",
    fields: [
        { name: 'name', type: 'string' },
        { name: 'age', type: 'int' },
        { name: 'phone', type: 'string' }
    ]
});

然后创建Store：

//2.创建store
var store = Ext.create("Ext.data.Store", {
    model: "MyApp.model.User",
    autoLoad: true,
    pageSize: 5,
    proxy: {
        type: "ajax",
        url: "GridHandler.ashx",
        reader: {
            root: "rows"
        }
    }
});

接下来才是GridPanel的代码：

//3.创建grid
var grid = Ext.create("Ext.grid.Panel", {
    xtype: "grid",
    store: store,
    width: 500,
    height: 200,
    margin: 30,
    columnLines: true,
    renderTo: Ext.getBody(),
    selModel: {
        injectCheckbox: 0,
        mode: "SIMPLE",     //"SINGLE"/"SIMPLE"/"MULTI"
        checkOnly: true     //只能通过checkbox选择
    },
    selType: "checkboxmodel",
    columns: [
        { text: '姓名', dataIndex: 'name' },
        {
            text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
            editor: {
                xtype: "numberfield",
                decimalPrecision: 0,
                selectOnFocus: true
            }
        },
        { text: '电话', dataIndex: 'phone', editor: "textfield" }
    ],
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    listeners: {
        itemdblclick: function (me, record, item, index, e, eOpts) {
            //双击事件的操作
        }
    },
    bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
});

这个GridPanel的效果如下：

在这个GridPanel中，我们可以通过复选框勾选数据行，可以编辑“年龄”和“电话”列，还可以对数据进行客户端排序。

Extjs GridPanel的列

Extjs GridPanel的列有多种类型，例如：文本列、数字列、日期列、选择框列、操作列等。我们可以通过xtype来指定不同的列类型。

下面是列的常用配置项：

  • xtype：列类型
  • text：列头显示的文字
  • dataIndex：绑定的字段名
  • width：宽度
  • flex：自动适应的宽度
  • sortable：是否可排序，默认为是
  • hideable：是否可隐藏，默认为是
  • locked：锁定列，将列锁定在grid的开头，当grid出现滚动条的时候该属性比较有用。默认为否
  • lockable：是否可锁定，默认为否
  • format：格式化字符串，常用于日期、数字的格式化。日期：'Y-m-d'；日期时间：'Y-m-d H:i:s'；数字：'0,000.00'（带有千位分隔符、保留两位小数）、'0.00'（保留两位小数），'0'（不保留小数）
  • renderer：自定义绘制方法，可以是Ext.util.Format中定义好的方法名称，也可以是自定义否function，该方法接收下面的参数：value、metadata、record、rowIndex、colIndex、store、view，并需要一个用来显示的返回值。
  • editor：编辑器，当使用编辑插件的时候才会起作用。

 

Extjs GridPanel行选择模型（SelectionModel）

控制Extjs GridPanel行选择模型的两个配置项是selType和selModel。默认情况下，selType为rowmodel，对应的Ext.selection.Model。这种选择模型不会在grid中添加复选框，它通过点击行进行选中，默认为多选“MULTI”。

如果我们要使用复选框来选择行，我们需要使用下面的配置：

selType: "checkboxmodel",

然后，我们可以通过selModel来配置selType：

selModel: {
    injectCheckbox: 0,
    mode: "SIMPLE",     //"SINGLE"/"SIMPLE"/"MULTI"
    checkOnly: true     //只能通过checkbox选择
},

Extjs GridPanel行选择

除了界面操作来选中行，我们还可以通过代码来选中行：

//选择行，并保持其他行的选择状态
grid.getSelectionModel().select(records, true);
//选择所有
grid.getSelectionModel().selectAll();
//根据row index选择
grid.getSelectionModel().selectRange(startRow, endRow, true)

Extjs GridPanel获取选中行

获取选中行，仍然需要通过SelectionModel来完成：

var records = grid.getSelectionModel().getSelection();

Extjs GridPanel显示行号

默认情况下Extjs GridPanel是不显示行号的，我们需要手动添加行号列。

columns: [
    { xtype:

"rownumberer", text: "序号"

, width:40 },
    { text: '姓名', dataIndex: 'name' },
    {
        text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
        editor: {
            xtype: "numberfield",
            decimalPrecision: 0,
            selectOnFocus: true
        }
    },
    { text: '电话', dataIndex: 'phone', editor: "textfield" }
],

我们可以设置行号的列头和宽度。

Extjs GridPanel异步加载数据

Extjs GridPanel的异步加载数据是通过Store来实现的。我们之前已经介绍过Extjs Store的各种代理方式，可以参考我之前的文章：

异步加载通常采用ajax代理，例如我们代码中用到的：

//2.创建store
var store = Ext.create("Ext.data.Store", {
    model: "MyApp.model.User",
    autoLoad: true,
    pageSize: 5,
    proxy: {
        type: "ajax",
        url: "GridHandler.ashx",
        reader: {
            root: "rows"
        }
    }
});

服务器端返回的数据格式如下：

{
    "rows": [
      {
          "name": "Tom",
          "age": 12,
          "phone": "1233455"
      },
      {
          "name": "Jerry",
          "age": 12,
          "phone": "1233455"
      },
      {
          "name": "Sinbo",
          "age": 12,
          "phone": "1233455"
      },
      {
          "name": "Jack",
          "age": 12,
          "phone": "1233455"
      },
      {
          "name": "Johnson ",
          "age": 12,
          "phone": "1233455"
      }
    ],
    "total": 5
}

Extjs GridPanel分页

当GridPanel中数据量大的时候，我们就需要使用分页了。

分页的实现由两部来完成，首先是在Store中添加pageSize配置项，用来确定每页显示多少行数据；然后需要为GridPanel添加PagingToolbar。

1. Store添加pageSize配置项

var store = Ext.create("Ext.data.Store", {
    model: "MyApp.model.User",
    autoLoad: true,
    pageSize: 5,
    proxy: {
        type: "ajax",
        url: "GridHandler.ashx",
        reader: {
            root: "rows"
        }
    }
});

在分页参数加上之后，Extjs在执行ajax请求的时候会添加三个参数：

  • page：当前页
  • start：起始行的行号
  • limit：每页数据行数，默认为25；这个参数值就是我们设置的pageSize

2. GridPanel添加PagingToolbar

bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }

在完成这两项配置以后，GridPanel就可以使用分页了。

Extjs GridPanel列编辑

Extjs GridPanel可以方便的实现列编辑。要实现这个功能需要两步：

1. 添加GridPanel的编辑插件

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

2. 为需要编辑的列指定编辑器

columns: [
    { xtype: "rownumberer", text: "序号", width:40 },
    { text: '姓名', dataIndex: 'name' },
    {
        text: '年龄', dataIndex: 'age', xtype: 'numbercolumn', format: '0',
        editor: {
            xtype: "numberfield",
            decimalPrecision: 0,
            selectOnFocus: true
        }
    },
    { text: '电话', dataIndex: 'phone', editor: "textfield" }

编辑器可以是一个field的配置，也可以是一个xtype。

对于编辑后的单元格，会在左上角出现一个红色的标识，说明该数据是编辑过的，要想去掉这个红色箭头，需要调用record的commit()方法。

grid.on('edit', function (editor, e) {
    // commit the changes right after editing finished
    e.record.commit();
});

除了单元格编辑外，Extjs还支持行编辑功能，只需要将插件替换为RowEditing即可，此处不再进行演示。

Extjs GridPanel选中单元格内容

在默认情况下，Extjs GridPanel不允许进行选中单元格中的内容，由于不能选中，我们就不可能来复制单元格中的内容。如果要实现这种功能，我们需要通过viewConfig来实现。

代码如下：

viewConfig:{
    stripeRows:true,//在表格中显示斑马线
    enableTextSelection:true //可以复制单元格文字
}

禁止显示列头部右侧菜单

Extjs GridPanel的列，当我们点击列头的时候，会出现一个菜单：

如果我们要禁用这个菜单，可以将每个column定义属性menuDisabled指定为true，代码如下：

{header: 'Idno', dataIndex: 'idno', width:150,menuDisabled:true}

 

本文由齐飞（youring2@gmail.com）原创，并发布在http://www.qeefee.com/article/extjs-grid-in-detail，转载请注明出处！推荐更多Extjs教程、Extjs5教程

如果认为此文对您有帮助，别忘了支持一下哦！

作者：齐飞

来源：http://youring2.cnblogs.com/

声明：本博客原创文字只代表本人工作中在某一时间内总结的观点或结论，与本人所在单位没有直接利益关系。非商业，未授权，贴子请以现状保留，转载时必须保留此段声明，且在文章页面明显位置给出原文连接。

转载：http://www.cnblogs.com/youring2/p/3998761.html

时间： 2024-10-29 18:19:17

Extjs GridPanel用法详解的相关文章

Extjs Window用法详解

今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用! 本文由齐飞(youring2@gmail.com)原创,并发布在http://www.qeefee.com/article/extjs-window-in-detail,转载请注明出处

Extjs Form用法详解（适用于Extjs5）

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

php9个超全局变量的用法详解（二）

今天来讲一下$_GET()与$_POST(). 其实很容易理解,根据表面意思就可以看得出来,是获得post与get表单的数据,其实也正是如此,来点专业的话来讲, $_GET 变量是一个数组,内容是由 HTTP GET 方法发送的变量名称和值. $_GET 变量用于收集来自 method="get" 的表单中的值.从带有 GET 方法的表单发送的信息,对任何人都是可见的(会显示在浏览器的地址栏),并且对发送的信息量也有限制(最多 100 个字符).好,看个例子,上简单登录界面的代码: 登

php9个超全局变量的用法详解（一）

PHP 中的许多预定义变量都是"超全局的",这意味着它们在一个脚本的全部作用域中都可用.在函数或方法中无需执行 global $variable; 就可以访问它们. 这些超全局变量是: $GLOBALS $_SERVER $_GET $_POST $_FILES $_COOKIE $_SESSION $_REQUEST $_ENV 1.先看一下$GLOBALS,它是包含了全部变量的全局组合数组,什么意思呢,看一个c语言程序 int main() { int a = 3; void t(

C++ Iostreams用法详解（四）缓冲区

在前面说到过每一个iostream对象都有一个缓冲区,我们称之为流缓冲区,那个这个所谓的流缓冲区是怎 么存在的呢?iostreams中将该流缓冲区抽象为一个类,即streambuf类. 每个iostream的类都会包含 一个指向streambuf对象的指针,这也就意味着我们可以直接的去访问到这个指针,并向该streambuf对象发送 消息等(但是一般情况下我们并不需要这样做). 既然说我们可以得到这个指针,那isotreams类当然 会提供访问的接口了,这就是const成员函数rdbuf(),它

C++ Iostreams用法详解（三）状态标志位

iostreams中共有四个状态标志位定义在ios_base中,具体如下: namespace std { class ios_base { public: typedef implementation-defined-bitmask-type iostate; static const iostate badbit; static const iostate eofbit; static const iostate failbit; static const iostate goodbit;

C++ Iostreams用法详解（二）标准输入输出

首先说我们最常用的两个全局对象cin和cout,以下摘自MSDN: You can then extract values from cin or wcin to read the standard input. The rules for doing so are outlined in the description of the class basic_istream Class. You can also insert values to cout or wcout to write t

JDBC日期处理用法详解

JDBC日期处理用法详解,可以作为一个连接JDBC的标准类 package JDBC; import java.sql.Connection; import java.sql.Date; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.DriverManager; import java.sql.Statement; import java.sql.Time; import java.sql.Tim

JavaScript中switch语句的用法详解

  这篇文章主要介绍了JavaScript中switch语句的用法详解,是JS入门学习中的基础知识,需要的朋友可以参考下 可以使用多个if... else if语句,如前面的章节,执行多路分支.然而,这并不总是最佳的解决方案,尤其是当所有分支的依赖单一的变量的值. 使用JavaScript1.2开始,你可以用它处理的正是这种情况,使用一个switch语句,它这样做更有效,如果不是反复地使用if... else if语句. 语法 switch语句的基本语法给出一个expression ,以评估计算