目的: ExtJs 的Grid介紹與常用功能
- 網址 : https://wadehuanglearning.blogspot.com/2017/01/ext.html
處理說明: 1>Grid 主要分成兩部份:
1>>一個顯示欄位標題的Columns。
2>>一個儲存資料的Store 元件。
2>Columns 欄位定義:
1>>Columns用來Grid 的定義表格欄位,具有header與dataIndex屬性的物件陣列。
2>>利用header 屬性來決定Grid 的欄位名稱。
3>>利用dataIndex 屬性來與Store 的資料相配對。
4>>Grid 的欄位顯示順序完全由此Columns 加入的順序決定。
3>Store 介紹: 用來存取表格的原始資料，
1>>可以是近端的二維陣列(Array )，或是遠端的JSON 或XML 資料。
2>>利用fields 屬性來與columns 欄位相配對。
3>>reader 用來解析原始資料，如原始資料格式為json，reader的type 就填json 。
,type 可以是 array, json, xml
5>>proxy : 資料來源 , type: 'memory', //store.data
type: 'ajax' , //遠端資料庫 url ,np
一.簡單範例 - store資料來源: data(local) , proxy.type:'memory'
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', //若 store 資料來源為遠端,則proxy.type:'ajax' , url:'xx/xx/', getMethod: function () { return 'POST'; }, //若 store 資料來源為Data,則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()
});
二. 產生子視窗 - 含Grid - 利用 Template , 遠端資料庫
1>*.js
//產生子視窗 - 含 Grid
function PrnPackBtn_click() {
var sub_Columns = [
{ header: "工號", dataIndex: "SAPNO", width: 150, TMType: "string" },
{ header: "件號", dataIndex: "PN", width: 150, TMType: "string",//editor: 'textfield',},
{
header: "數量", dataIndex: "QTY", width: 50, TMType: "string",
editor: {
xtype: 'textfield',
allowBlank: false //不允許空白
},
},
{ header: "EO", dataIndex: "EOCND", width: 150, TMType: "string" },
{ header: "備註", dataIndex: "RMK", width: 200, TMType: "string", },
]
var sub_Fields = [
{ name: "SAPNO" },
{ name: "PN" },
{ name: "QTY" },
{ name: "EOCND" },
{ name: "RMK" },
];
//包籤列印 sub_Grid
var sub_Grid = Ext.create('TMGrid', {
grid_id: 'sub_Grid',
columns: sub_Columns,
autoScroll: true,
flex: 1,
store: Ext.create('gridstore', { model: sub_Fields }),
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', { // 加入官方 CellEditing 差件
clicksToEdit: 1 // 按一下進行編輯，預設為按兩下
})
],
});
//將子視窗 store 不分頁, PageToolBar.Visible 設為 false , 不分頁
Ext.getCmp('sub_Grid_ptb').setVisible(false);
2>TMGrid.js : 定義 TMGrid & gridstore
Ext.define('gridstore', {
extend: 'Ext.data.Store',
pageSize: 30,
//model: gridmodel,
autoLoad: false,
remoteFilter: true,
//remoteSort: true,
proxy: {
type: "ajax",
url: '',
getMethod: function () { return 'POST'; },
reader: {
type: "json",
root: 'T1',
totalProperty: 'T1C[0].TOTAL'
}
},
sorters: [],
constructor: function (config) {
Ext.apply(this, config); //將gridstore本身的屬性與input config結合
if (typeof config.model != "undefined") {
J_gridmodel = config.model;
}
Ext.define('gridmodel', {
extend: 'Ext.data.Model',
fields: J_gridmodel
});
this.model = gridmodel;
this.callParent(config);
this.getProxy().setModel(gridmodel, true);
}
});
