EXTJS之GRID 一

最近空閒時間在學習Ext2.0框架，只有一個字的感嘆“強”，我從未想到JS代碼能夠寫出這麼絢麗的Web頁面出來，以前看到YUI，驚若天人，如今看到EXT2.0的東西，更是感覺震撼。

Ext2.0是一個JS框架，它的Grid控件和其它可以顯示數據的控件，能夠支持多種數據類型，如二維數組、Json數據和XML數據，甚至包括我們自定義的數據類型。Ext爲我們提供了一個橋樑Ext.data.Store，通過它我們可以把任何格式的數據轉化成grid可以使用的形式，這樣就不需要爲每種數據格式寫一個grid的實現了。

首先，一個表格應該有列定義，即定義表頭ColumnModel：

Js代碼

// 定義一個ColumnModel，表頭中有四列
var cm = new Ext.grid.ColumnModel([
{header:'編號',dataIndex:'id'},
{header:'性別',dataIndex:'sex'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;

// 定義一個ColumnModel，表頭中有四列
var cm = new Ext.grid.ColumnModel([
    {header:'編號',dataIndex:'id'},
    {header:'性別',dataIndex:'sex'},
    {header:'名稱',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;

該ColumnModel定義了表格的四個列，其每列的名稱和對應的數據鍵。請注意defaultSortable屬性，即爲每個列都安上一個可以排序的功能。如果只想某些列舉有該功能，可以設置：

Js代碼

{header:'編號',dataIndex:'id',Sortable:true},

{header:'編號',dataIndex:'id',Sortable:true},

現在就來看看這個Ext.data.Store是如何轉換三種數據的。

1.二維數組：

Js代碼

// ArrayData
var data = [
['1','male','name1','descn1'],
['2','male','name1','descn2'],
['3','male','name3','descn3'],
['4','male','name4','descn4'],
['5','male','name5','descn5']
];
// ArrayReader
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id',mapping: 0},
{name: 'sex',mapping: 1},
{name: 'name',mapping: 2},
{name: 'descn',mapping: 3}
])
});
ds.load();

// ArrayData
var data = [
    ['1','male','name1','descn1'],
    ['2','male','name1','descn2'],
    ['3','male','name3','descn3'],
    ['4','male','name4','descn4'],
    ['5','male','name5','descn5']
];
// ArrayReader
var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'id',mapping: 0},
        {name: 'sex',mapping: 1},
        {name: 'name',mapping: 2},
        {name: 'descn',mapping: 3}
    ])
});
ds.load();

ds要對應兩個部分：proxy和reader。proxy告訴我們從哪裏獲得數據，reader告訴我們如何解析這個數據。

現在用的是Ext.data.MemoryProxy，它將內存中的數據data作爲參數傳遞。Ext.data.ArrayReader專門用來解析數組，並且告訴我們它會按照定義的規範進行解析，每行按順序讀取四個數據，第一個叫id，第二個叫sex，第三個叫name，第四個descn。這些是跟cm定義中的dataIndex對應的。這樣cm就知道哪列應該顯示那條數據了。

mapping屬性用於標記data中的讀取後的數據與標頭的映射關係，一般是不用設置的。但如果我們想讓sex的數據中name欄中出現，可以設置mapping值。即id的mapping爲2,後者爲0。

記得要執行一次ds.load()，對數據進行初始化。

數據的顯示顯得非常簡單：

Html代碼

<div id='grid'></div>

<div id='grid'></div>

Js代碼

var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm
});
grid.render();

var grid = new Ext.grid.GridPanel({
    el: 'grid',
    ds: ds,
    cm: cm
});
grid.render();

2.如何在表格中添加CheckBox呢？

Js代碼

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//自動行號
sm,//添加的地方
{header:'編號',dataIndex:'id'},
{header:'性別',dataIndex:'sex'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var grid = new Ext.grid.GridPanel({
el: 'grid3',
ds: ds,
cm: cm,
sm: sm,//添加的地方
title: 'HelloWorld'
});

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),//自動行號
    sm,//添加的地方
    {header:'編號',dataIndex:'id'},
    {header:'性別',dataIndex:'sex'},
    {header:'名稱',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,//添加的地方
    title: 'HelloWorld'
});

3. 如何做Grid上觸發事件呢？

下面是一個cellclick事件

Js代碼

grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','當前選中的數據是'+data);
}

grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);   //Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex);  //Get field name
    var data = record.get(fieldName);
    Ext.MessageBox.alert('show','當前選中的數據是'+data);
}

4.如何做Grid中做出快捷菜單效果：

Js代碼

grid.addListener('rowcontextmenu', rightClickFn);//右鍵菜單代碼關鍵部分
var rightClick = new Ext.menu.Menu({
id:'rightClickCont', //在HTML文件中必須有個rightClickCont的DIV元素
items: [
{
id: 'rMenu1',
handler: rMenu1Fn,//點擊後觸發的事件
text: '右鍵菜單1'
},
{
//id: 'rMenu2',
//handler: rMenu2Fn,
text: '右鍵菜單2'
}
]
});
function rightClickFn(grid,rowindex,e){
e.preventDefault();
rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
Ext.MessageBox.alert('right','rightClick');
}

grid.addListener('rowcontextmenu', rightClickFn);//右鍵菜單代碼關鍵部分
var rightClick = new Ext.menu.Menu({
    id:'rightClickCont',  //在HTML文件中必須有個rightClickCont的DIV元素
    items: [
        {
            id: 'rMenu1',
           handler: rMenu1Fn,//點擊後觸發的事件
            text: '右鍵菜單1'
        },
        {
            //id: 'rMenu2',
            //handler: rMenu2Fn,
            text: '右鍵菜單2'
        }
    ]
});
function rightClickFn(grid,rowindex,e){
    e.preventDefault();
    rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
   Ext.MessageBox.alert('right','rightClick');
}

5.如何將一列中的數據根據要求進行改變呢？

比如說性別字段根據其male或female改變顯示的顏色，這種ColumnMode中設計：

Js代碼

var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'編號',dataIndex:'id'},
{header:'性別',dataIndex:'sex',renderer:changeSex},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
function changeSex(value){
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>紅男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>綠女</span>";
}
}

var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {header:'編號',dataIndex:'id'},
    {header:'性別',dataIndex:'sex',renderer:changeSex},
    {header:'名稱',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
function changeSex(value){
    if (value == 'male') {
        return "<span style='color:red;font-weight:bold;'>紅男</span>";
    } else {
        return "<span style='color:green;font-weight:bold;'>綠女</span>";
    }
}

其它兩種數據的Grid顯示是相同的，其不同之處在於數據獲取的過程：

python gdal 安裝使用（Windows， python 3.6.8）

全面學習ORACLE Scheduler特性(2)管理jobs

解決ExtJS Combobox在form提交顯示值問題

學習ExtJS（一）

學習ExtJS（四） Panel常用方法

EXTJS之GRID 二

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結