2009年8月11日 星期二

extjs - Ext.grid.EditorGridPanel簡介


Ext.grid.EditorGridPanel繼承自Ext.grid.GridPanel,提供編輯Cell的能力。除了將Ext.grid.GridPanel改變成Ext.grid.EditorGridPanel外,還要設定Ext.grid.ColumnModel的欄位的editor。
Ext.onReady(function() {
    var data = [['Brook', '0921'], ['Rene', '0918']];

    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        {header: 'Name', dataIndex: 'name',
            editor: new Ext.grid.GridEditor(new Ext.form.TextField())},
        {header: 'Tel', dataIndex: 'tel',
            editor: new Ext.grid.GridEditor(new Ext.form.TextField())}
    ]);

    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.EditorGridPanel({
        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
    });
});



新增/刪除
我們在tbar新增兩個按鈕add/remove,add的流程如下:
  1. 停止grid的編輯。
  2. 接著插入一筆空白的資料到第一列的位置。
  3. 將第一行第一列變成編輯模式。

刪除的流程如下:
  1. 取得所有選取的列。
  2. 反覆的將所有選取列,移到store.removed(暫存起來,不然後面會遺失移除的列)。
Ext.onReady(function() {
    var record = Ext.data.Record.create([
        {name: 'name', type: 'string'},
        {name: 'tel', type: 'string'}
    ]);

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

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

    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.EditorGridPanel({
        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,
        tbar: new Ext.Toolbar(['-', /* '-' 是按鈕分隔符號 */
            {
                text: 'add',
                handler: function() {
                    var r = new record({
                        name: '',
                        tel: ''
                    });
                    grid.stopEditing();
                    store.insert(0, r);
                    grid.startEditing(0,0);
                }
            }, {
                text: 'remove',
                handler: function() {
                    var rows = grid.getSelectionModel().getSelections();
                    for (var i = 0; i < rows.length; i++) {
                        store.removed.push(rows[i]); /* 暫存 */
                        store.remove(rows[i]); /* 移除 */
                    }
                }
            }
        ])
    });
});


修改
Ext.onReady(function() {
    var data = [['Brook', '0921'], ['Rene', '0918']];
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        {header: 'Name', dataIndex: 'name',
            editor: new Ext.grid.GridEditor(new Ext.form.TextField())},
        {header: 'Tel', dataIndex: 'tel',
            editor: new Ext.grid.GridEditor(new Ext.form.TextField())}
    ]);
    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.EditorGridPanel({
        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,
        tbar: new Ext.Toolbar([{
            text: 'show modified',
            handler: function () {
                var records = store.getModifiedRecords();
                for (var i = 0; i < records.length; i++) {
                    alert(Ext.encode(records[i].getChanges()));
                }
            }
        }])
    });
});

Ext.grid.EditorGridPanel提供直接編輯Cell的能力,透過store.getModifiedRecords()可以取得修改過的rows,針對修改過的rows可以再透過getChanges()取得修改過的欄位,被修改的cell會出現紅色的標記。


限制輸入
cell通常都是由Ext.form.Field的Subclasses組成,而這些元件都具有regex的property可以限制使用者的輸入,比如regex:/[0-9]/就是限制只能輸入數字,一但輸入格式不對就會出現紅線啦。更多資訊可以參考一下Ext.form.Field。
Ext.onReady(function() {
    var data = [['Brook', '0921'], ['Rene', '0918']];
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        {
            header: 'Name', dataIndex: 'name',
            editor: new Ext.grid.GridEditor(
                    new Ext.form.TextField({allowBlank:false}))
        }, {
            header: 'Tel', dataIndex: 'tel',
            editor: new Ext.grid.GridEditor(
                    new Ext.form.TextField({regex:/[0-9]/}))
        }
    ]);
    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.EditorGridPanel({
        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
    });
});




1 則留言:

  1. 請問我要如何更新某個cell的值?
    我有找到以下語法,但會出現error
    grid1.getStore().getAt is not a function

    var record=grid1.getStore().getAt(index);
    reocrd.set(columnName,value);

    謝謝

    回覆刪除

熱門文章