2009年8月10日 星期一

extjs - Ext.grid.GridPanel簡介


組成元件
要能正確顯示資料,必須包含資料倉儲(Store),資料欄位的定義(ColumnModel)。
首先我們先定義資料欄位:
var cm = new Ext.grid.ColumnModel({
  {header: 'Name', dataIndex: 'name'},
  {header: 'Tel', dataIndex: 'tel'}
});

接著設定store,store包含資料取得方式(Proxy),以及分析方式(reader)。
var data = [
  ['Brook', '0921'],
  ['Rene', '0918']
];

var store = new Ext.data.Store({
  proxy: new Ext.data.MemoryProxy(data),
  reader: new Ext.data.ArrayReader({},[
    {name: 'name'},
    {name: 'tel'}
  ]);
});
store.load(); // 載入資料

最後再將他們和grid整合在一起:
var grid = new Ext.grid.GridPanel({
    renderTo: Ext.getBody(),
    store: store,
    cm: cm,
    viewConfig: {
        forceFit: true // 自動調整欄寬[註1],
    },
    title: "brook's guest book",
    width: 200,
    stripeRows: true,
    loadMask: true,
    height: 120
});


註1:forceFit在EditorGridPanel底下會出現錯誤(EditorGridPanel編輯後欄位錯亂的問題).

欄寬設定
調整欄寬除了forceFit以外,還可以設定autoExpandColumn: id,將特定欄寬expand以符合grid的大小,但如果設定了forceFit,autoExpandColumn將會被忽略。
var cm = new Ext.grid.ColumnModel([
    {
        header:'Name',
        dataIndex:'name'
    }, {
        header:'Tel',
        dataIndex:'tel',
        id: 'tel'
    }
]);

var grid = new Ext.grid.GridPanel({
    renderTo: Ext.getBody(),
    store: store,
    cm: cm,
    title: "brook's guest book",
    loadMask: true,
    height: 120,
    autoExpandColumn: 'tel'
});
因為autoExpandColumn必須指定id,所以cm欄位也必須指定id。


排序
在cm中,將sortable設定為true後,該欄位就可以進行排序。
var cm = new Ext.grid.ColumnModel([
    {
        header:'Name',
        dataIndex:'name',
        sortable: true
    }, {
        header:'Tel',
        dataIndex:'tel',
        id: 'tel'
    }
]);



也可以設定cm.defaultSortable = true,讓所有欄位都可以sort。
也可以預設某欄位排序的方向(由大到小,或由小到大),在store.sortInfo: {field: 'name', direction: "ASC"},就會將name以升冪排列,DESC則會降冪排列。
var store = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'name'},
        {name: 'bd', type: 'date', dateFormat: 'Y-m-d'}
    ]),
    sortInfo: {
        field: 'name',
        direction: 'DESC'
    }
});



日期顯示
在reader中將type設定為date,並且指定date的format,該欄位就會以date方式讀取,顯示的方式則要透過cm的renderer。
Ext.onReady(function() {
    var cm = new Ext.grid.ColumnModel([
        {
            header: 'Name',
            dataIndex: 'name'
        }, {
            header: 'Birthday',
            dataIndex: 'bd',
            renderer: Ext.util.Format.dateRenderer('Y年m月d日')
        }
    ]);

    var data = [
        ['Brook', '1999-12-03'],
        ['Rene', '1998-12-04']
    ];

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'name'},
            {name: 'bd', type: 'date', dateFormat: 'Y-m-d'}
        ])
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        renderTo: Ext.getBody(),
        store: store,
        cm: cm,
        viewConfig: {
            forceFit: true
        },
        title: "brook's guest book",
        loadMask: true,
        height: 120,
    });
});



由上例可知,只要透過cm.renderer就可以在顯示時加入一些變化。renderer函數包含value, metadata, css, record, rowIndex, colIndex, store等參數。
  1. value : Object 這個cell的資料
  2. metadata : Object 包含要套用在該CELL的CSS和HTML屬性的物件
  3. record : Ext.data.record 該列的資料物件
  4. rowIndex : Number Row index
  5. colIndex : Number Column index
  6. store : Ext.data.Store The Ext.data.Store object from which the Record was extracted. 

Check box
CheckboxSelectionModel會在該欄位上顯示check box,讓使用者勾選。預設是多選,設定singleSelect為true可以改變為單選。
Ext.onReady(function() {
    var sm = new Ext.grid.CheckboxSelectionModel();
    var cm = new Ext.grid.ColumnModel([
        sm,
        {
            header: 'Name',
            dataIndex: 'name'
        }, {
            header: 'Tel',
            dataIndex: 'tel'
        }
    ]);

    var data = [
        ['Brook', '0921'],
        ['Rene', '0918']
    ];

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'name'},
            {name: 'tel'}
        ])
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        renderTo: Ext.getBody(),
        store: store,
        cm: cm,
        viewConfig: {
            forceFit: true
        },
        title: "brook's guest book",
        loadMask: true,
        height: 120,
        width: 200
    });
});



自動顯示行號 自動顯示行號是由Ext.grid.RowNumberer()提供的功能,和CheckboxSelectionModel一樣,放入cm就可以達到自動顯示行號之功能。
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    {
        header: 'Name',
        dataIndex: 'name'
    }, {
        header: 'Tel',
        dataIndex: 'tel'
    }
]);

Selection Model
在Ext.grid.GridPanel中,Selection Model預設是使用Ext.grid.RowSelectionModel,而且是可以多選,如果是單選就必須設定RowSelectionModel.singleSelect=true。
var grid = new Ext.grid.GridPanel({
    renderTo: Ext.getBody(),
    store: store,
    cm: cm,
    sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
    viewConfig: {
        forceFit: true
    },
    title: "brook's guest book",
    loadMask: true,
    height: 120,
    width: 200
});

被選到的Row,可以透過grid.getSelectionModel().getSelections()取得。
var grid = new Ext.grid.GridPanel({
    renderTo: Ext.getBody(),
    store: store,
    cm: cm,
    sm: new Ext.grid.RowSelectionModel(),
    viewConfig: {
        forceFit: true
    },
    title: "brook's guest book",
    loadMask: true,
    height: 120,
    width: 200,
    buttons: [{
        text:'show select',
        handler: function() {
            var selections = grid.getSelectionModel().getSelections();
            for (var i = 0; i < selections.length; i++) {
                alert(selections[i].get('name') + ' is selection');
            }
        }
    }]
});

也可以選擇Cell Model,EditorGrid的預設Selection Model就是CellSelectionModel。
var grid = new Ext.grid.GridPanel({
    renderTo: Ext.getBody(),
    store: store,
    cm: cm,
    sm: new Ext.grid.CellSelectionModel(),
    viewConfig: {
        forceFit: true
    },
    title: "brook's guest book",
    loadMask: true,
    height: 120,
    width: 200
});



改變cell中的顯示(render)
圖文並茂的網頁是現在的趨勢,您可以透過Ext.grid.ColumnModel.renderer設定顯示cell時,要做哪些變化,比如,我想判斷電話號碼,顯示出電話號碼屬於哪家電信業者,程式碼如下:
Ext.onReady(function() {
    var record = Ext.data.Record.create([
        {name: 'name', type: 'string'},
        {name: 'tel', type: 'string'}
    ]);

    var data = [
        ['Brook', '0921'],
        ['Rene', '0918'],
        ['John', '0980']
    ];

    function renderTel(value, metaData, record, rowIndex, colIndex, store) {
        if ('0921' == value) {
            return '<img src="images/cht.gif"/>' + value;
        } else if ('0918' == value) {
            return '<img src="images/twm.gif"/>' + value;
        }
        return value;
    }

    var cm = new Ext.grid.ColumnModel([
        {header: 'Name', dataIndex: 'name'},
        {header: 'Tel', dataIndex: 'tel', renderer: renderTel}
    ]);

    var store = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({},[
            {name: 'name'},
            {name: 'tel'}
        ]),
        removed: []
    });
    store.load();

    var grid = new Ext.grid.GridPanel({
        renderTo: Ext.getBody(),
        store: store,
        cm: cm,
        sm: new Ext.grid.RowSelectionModel(),
        viewConfig: {
            forceFit: true
        },
        title: "Brook's address book",
        loadMask: true,
        height: 200,
        width: 330
    });
});

render function的參數說明如下:
  1. value: 將要顯示到cell的值。
  2. metaData:cell的屬性,包含css。
  3. record:該行資料。
  4. rowIndex:row index。
  5. colIndex:column index。
  6. store:使用中的store。




沒有留言:

張貼留言