Extjs GridPanel用法詳解

建立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的各類代理方式，能夠參考我以前的文章：

• Extjs 客戶端代理（proxy）
• Extjs 服務器代理（proxy）

異步加載一般採用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}

本文的示例代碼適用於Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中可用！