ExtJS 教學 Grid 介紹與常用功能

===== Ext.grid.Panel =====

 Grid 是在客戶端上顯示大量表格資料的好幫手！實際上就是專門用來顯示類似資料庫Table 的格式的UI 元件。

  • 讓大量的表格資料變得容易存取、甚至還提供排序和過濾功能。
  • 由於 Grid 繼承自 Panel 類別，因此也可以設定上工具列 tbar 與下工具列 bbar 。
  • xtype 為: gridpanel, grid

Grid 繼承自 Ext.panel.Panel類別 :
  * Ext.panel.Panel
    * Ext.panel.Table
      * Ext.grid.Panel


一個完整的Grid 分為兩個部分:
  1. 一個顯示欄位標題的Columns。
  2. 一個儲存資料的Store 元件。

=== Columns 簡介===

  1.   Columns 用來Grid 的定義表格欄位，是一個具有text 與 dataIndex 屬性的物件陣列。
  2.   利用text 屬性來決定Grid 的欄位名稱。
  3.   利用dataIndex 屬性來與Store 的資料相配對。
  4.   Grid 的欄位顯示順序完全由此Columns 加入的順序決定。


=== Store 簡介===

  1.  用來存取表格的原始資料，可以是近端的二維陣列(Array )，或是遠端的JSON 或XML 資料。
  2.  利用fields 屬性來與columns 欄位相配對。
  3.  reader 用來解析原始資料，如原始資料格式為json，reader的type 就填json 。
  4.  type 可以是 array, json, xml


先來看看由json 提供近端資料的範例程式:
var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone'],  //利用fields 與Columns 的dataIndex 做配對。
    data: {'items': [             //原始資料
            {'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"}
        ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',  //reader用來解析原始資料，如原始資料格式為json，reader 的type 就填json 。 #可以是 array, json, xml
            root: 'items'  //告訴reader 要選擇data 中哪一個含有raw Data 的Array 的物件。
        }
    }
});

var columnModel = [     ////建立ColumnMode
    {text: '名稱', dataIndex: 'name'},
    {text: '電子信箱', dataIndex: 'email', flex: 1},
    {text: '電話', dataIndex: 'phone'}
];

Ext.create('Ext.grid.Panel', {    // 新增Grid
    title: 'Grid 範例',
    store: store,                 //將預先寫好的store 填入grid
    columns: columnModel,         //將預先寫好的columns 填入grid
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

ExtJS 教學 Grid 介紹 與 常用功能


===== 取得被選取的 row 資料 =====


var mygrid = Ext.create('Ext.grid.Panel', {    // 新增Grid
    title: 'Grid 範例',
    store: store, /*
          新增一個grid...
              */
             
var selectedRow = mygrid.getSelectionModel().getLastSelected().data;  // Object, 取得被選取的那一列 row
//  selectedRow.name //取得被選取的那一列的 name 欄位值 
//  selectedRow.age  //取得被選取的那一列的 age  欄位值
//  selectedRow.email//取得被選取的那一列的 email欄位值


===== Grid 資料編輯器  =====

Ext.Grid 必須透過官方套件才可以編輯內容，可以在 plugins 屬性載入  Ext.grid.plugin.CellEditing 或 Ext.grid.plugin.RowEditing 便可對 Grid 資料進行編輯。
Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"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"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},  //再每個欄位加入 editor: 'textfield' ，即可編輯欄位
        {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
                xtype: 'textfield',
                allowBlank: false   //不允許空白
            }
        },
        {header: 'Phone', dataIndex: 'phone'} //不加入則不允許編輯
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {   // 加入官方 CellEditing 差件
            clicksToEdit: 1                           // 按一下進行編輯，預設為按兩下
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});


===== 新增一筆資料 =====

使用 store.insert() 方法添入一筆新資料，新資料的欄位必須與 store 的 Fields 一模一樣。
function addNewRow()
{
    // or Ext.getCmp('your_storeID').insert....
    your_store.insert(0, {
        RECEIVABLES_LISTNUMBER: Ext.getCmp("ID_text").getValue(),
        RECEIVABLES_CATEGORY: null,
        RECEIVABLES_AMOUNT: null,
        LC_ID: null,
        CORRESPONDING_SUBJECT_ID: null,
        RECEIVABLES_ACCOUNT: null,
        RECEIVABLES_BANK: null,
        RECEIVABLES_DATE: null,
        BILL_CREDIT_NUMBER: null,
        EXPIRY_DATE: null,
        PREAGAINST_DATE: null,
        BILL_ACCOUNT: null,
        BILL_BANK: null,
        ANNOTATION: null
    });
    rowEditing.startEdit(0, 0);
}

===== 利用 renderer處理Cell內容 =====

在對每個 Column 做設定時，可以透過 renderer 來攔截資料，在 Store 載入後， renderer 可以在資料顯示於畫面之前對資料做處理，例如大小寫轉換，中英文轉換等。

renderer: 'uppercase'


參數:
value : Object
The data value for the current cell

new Ext.grid.Panel({
    id: 'grid_DetailGrid',
    flex: 4,
    margin: 20,
    store: store_DetailGrid,
    selType: 'rowmodel',
    selModel: {mode: 'MULTI'},
    columns: [
        {header: ChangeLanguage("Receivables Category"), dataIndex: 'RECEIVABLES_CATEGORY', renderer: function (value) {
                return ChangeNumber(value);
            }, flex: 1},  // 加入 renderer 屬性，並使用自己事先寫好的 Function 對資料作處理。
        {header: ChangeLanguage("Amount"), dataIndex: 'RECEIVABLES_AMOUNT', flex: 1},
        {header: ChangeLanguage("L/C ID"), dataIndex: 'LC_ID', flex: 1},

    ]
});

function ChangeNumber(no)
{
    no.trim().toString();
    var item;
    switch (no) {
        case "0":
            item = '其他';
            break;
        case "1":
            item = '現金';
            break;
        case "2":
            item = '支票';
            break;
    }
    return item;
}

想了解有關 Renderer 的知識可前往參訪官方文件: Renderer

===== 刪除空的 Row =====

deleteEmptyRow(grid_DetailGrid);  // parameter is your Grid

function deleteEmptyRow(grid) {
    var store = grid.store;
    for (var i = 0; i < store.getCount(); i++)
    {
        var RECEIVABLES_CATEGORY = store.getAt(i).get("RECEIVABLES_CATEGORY");  // 取得 store Fields 內的"RECEIVABLES_CATEGORY"欄位
        if (RECEIVABLES_CATEGORY === null)
        {
            store.remove(store.getAt(i));
        }
    }
}



想了解更多Ext.grid 的相關知識，可前往參訪官方文件: Ext.grid.Panel

留言

張貼留言

這個網誌中的熱門文章

Git Commit Message 這樣寫會更好，替專案引入規範與範例

圖片
Commit Message 跟寫程式註解還蠻像的， 最好可以寫下「為什麼」你要作這樣的異動， 而不是單單只記錄下你做了「什麼」異動。 Commit Message 最好兼俱 Why 及 What，讓日後進行維護人員更快進入狀況。 Commit Message 這樣寫會更好： 做 issue 的時候，不應該一次 Commit 所有異動！應該獨立 Commit 每個不同意義的異動，這樣 commit 訊息才會跟異動的程式碼有關聯。 每次 Commit 都是針對異動的檔案做說明：Why & What。這樣的 Commit Message 能讓日後的維護人員更快進入狀況 每次 Commit 都加上 issue 編號，方便追蹤相關的程式異動原因。 若 Commit Message 寫得妥當，在閱讀追蹤程式碼的意圖會相當容易。如果只把 Git 當作版本控制，隨意撰寫 Commit Message 就太可惜了！ 不能只把 Git 當作程式碼的 FTP，要把 Git 當作歷史查閱的工具才拿發揮 Git 的功能。 好與不好的真實案例 用一個小插曲證實 Commit 訊息的重要性 上面 PPT 是我在工作中遇到的兩個案例，範例中包含「好的 Commit Message」與「不良的 Commit Message」。 在範例中可見： 良好的 Commit Message: 如何在「一年後」讓維護人員進入狀況 不良的 Commit Message: 如何在「一個月內」讓維護人員找不出程式異動的原因 。 Commit Message 之規範 在撰寫 Git 與 SVN 等版本控制軟體 Commit Message 時，可以參照國外 AngularJS 團隊的規範： AngularJS Git Commit Message Conventions 以下為這套訊息規範的展示與說明： Commit Message 規範範例： Commit Message 規範範例解析： Commit Message 規範組成： Header: < type > ( < scope > ): < subject > - type: 代表 commit 的類別：feat, fix, docs, sty...
閱讀完整內容

Gitlab 合併請求 Merge Request 是什麼？

圖片
Gitlab 合併請求（Merge Request ） 一般在團隊開發的時候，為了避免工程師直接對主要 Repo 進行修改，會要求工程師從 專案的主要 Repo 複製一份這個專案的副本（Fork）回來工程師的電腦進行開發/除錯。 工程師開發完成後，如果要把電腦上最新版本的程式碼上傳回 專案的主要 Repo ，就必須對 專案的主要 Repo 發送一個 合併請求 ，請 專案的主要 Repo 管理員進行程式合併。 當合併請求發送出去後， 專案的主要 Repo 管理員可以在管理頁面上看見你的合併請求，這時管理員會進行一次 Code Review，管理員覺得程式沒問題，就會將工程師的程式合併回主線。 若管理員覺得這段程式碼有問題，也可以 Close 這次的 Merge Request 。 另外 Merge Request 等同於 Github 的 Pull Request   - 可參考:  與其它開發者的互動 - 使用 Pull Request（PR） 上述流程如下圖： ​
閱讀完整內容

PHP OO 物件導向基礎教學

PHP OO 基礎教學 此篇教學只是物件導向的基礎與實作，內容只包含類別與物件的操作，讓不熟悉類別的人可以初識物件導向的好處，並且了解物件與類別的特性與關係。 更多物件導向的理論的學習內容會整理到 PHP OO 的進階教學: 淺談物件導向 SOLID 原則對工程師的好處與如何影響能力 再談 SOLID 原則，Why SOLID? PHP OO 物件導向原則:單一職責原則SRP PHP OO 物件導向原則:開放封閉原則OCP PHP OO 物件導向原則:里氏替換原則LSP PHP OO 物件導向原則:介面隔離原則ISP PHP OO 物件導向原則:依賴反轉原則DIP 進階觀念：再談物件導向設計原則: 單一職責原則，定義、解析與實踐 認識物件導向 Object Oriented： 物件導向是一種寫程式的方式，它傾向讓開發者把類似或有關聯的工作或屬性，組織到類別(classes)裡面。這可以讓程式保持遵守  不重複原則** “don’t repeat yourself” (DRY) **，且更容易維護。 “Object-oriented programming is a style of coding that allows developers to group similar tasks into classes.” 不重複的程式(DRY)是物件導向最主要的優點之一，物件導向嚇跑了很多的開發者，因為它帶引入了一些新的語法，並且一看就知道比直譯程式(procedural)還複雜。但是，其實仔細了解一下，OO 實際上是一種非常直觀且是簡化程式最好的方法。 一、認識物件與類別 Understanding Objects and Classes 在開始更深入了解 OOP 之前，一定要先了解  物件(object) 與 類別(class)  的差異。本章節會介紹 類別(class) 的構造，還有其功能與用途。 類別(class)，可以比喻為一間房子的藍圖，類別只是清楚得定義房子的結構與形狀。 物件(object)，可以比喻為一棟真的房子， 物件是類別的實例化 。 資料(data)就像是鋼筋、電線、混泥土等蓋房子的材料。如果沒有按照 藍圖 (類別 ...
閱讀完整內容