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） 上述流程如下圖： ​
閱讀完整內容

探討單元測試和整合測試的涵蓋範圍

圖片
本篇文章紀錄自己導入 測試驅動開發（Test Driven Design） 過程中，曾經沒辦法分辨自己所寫的測試案例到底是“單元測試”還是“整合測試”，與同儕討論後發現其他人也有相同的困擾，於是看了幾本書與文章才釐清自己的問題所在。為方便與其他人進行交流討論，故將自己理解的資訊整理下來並做個總結。 單元測試的涵蓋範圍很模糊？ 單元測試（Unit Test）是軟體開發中很重要的環節，替 TDD 提供重構的保護網，也是軟體測試（Software Testing）中測試金字塔（Test Pyramid）的最低測試層級。 但是，一個「單元測試」所涵蓋的範圍到底有哪些，卻讓國外網友議論紛！ 大家在初學單元測試一定會看到的定義如下： 以程式碼的最小單位來進行正確性檢驗的測試工作，最小單位包括「類別與方法」。 若按此定義來寫測試案例，一個單元測試只能包含一個類別。且受測類別的依賴都必須透過測試替身或 Mock 技術進行隔離，才能確保測試的目標是最小且不可分割的邏輯。 但是隨著 Mock 的詬病被發掘（參考： Mock 不是測試的銀彈 ），為避免 Mock 使測試案例變成開發人員的快樂表（測試通過，正式環境卻出現錯誤），開始有人提倡使用 Spy 來替代 Mock，以及依賴若是自己的開發團隊所寫，而非第三方函式庫，則可直接使用依賴。 這時，一個單元測試會執行的範圍已經從 一個類別 變成 一個類別加上該類別的依賴 。換句話說，一個單元測試除了受測程式外，也會執行到其他類別的程式碼： describe( 'AddGroupToRange' , function () { it( '空的統計範圍, 將題組「questionGroups1」新增至空的統計範圍中, 統計範圍包含題組「questionGroups1」' , function () { // @given 空的統計範圍 var range = new StatisticsRange(); var pipeline = new Pipeline(range); // @when 將題組「questionGroups1」新增至空的統計範圍中 pipe...
閱讀完整內容