Ext.grid.EditorGridPanel
可編輯數(shù)據(jù)表格
Config {
clicksToEdit : Number   //點(diǎn)幾次開始編輯,默認(rèn)為2
}

方法
EditorGridPanel()
構(gòu)造,應(yīng)為 EditorGridPanel(Object config)
startEditing( Number rowIndex, Number colIndex ) : void
stopEditing() : void
開始停止編輯

事件
afteredit : ( Object e )
beforeedit : ( Object e )
validateedit : ( Object e )

下面我們擴(kuò)展一下剛才的示例應(yīng)用一下EditorGridPanel//定義數(shù)組
var arr=[
    ['Bill', 'Gardener','2007-01-02',-10,true],
    [ 'Ben', 'Horticulturalist','2007-01-03',-20.1,false],
    ['你', 'Gardener','2007-02-02',0,true],
    ['他', 'Gardener','2007-01-04',13,false],
    [ '我', 'Horticulturalist','2007-01-05',15.2,false]
    ];
var reader = new Ext.data.ArrayReader(
   ...{},
//定義數(shù)組到record的映射關(guān)系
   [
    ...{name: 'name'},        
    ...{name: 'occupation', mapping: 1},
    ...{name:'date',type: 'date',dateFormat: 'Y-m-d'}, //用指定的格式轉(zhuǎn)換日期
    ...{name:'float',type:'float'},
    ...{name:'bool',type:'bool'}
   ]
);
//生成元數(shù)據(jù)
var store=new Ext.data.Store(...{
    reader:reader
    });
store.loadData(arr);

//自定義可編輯列,從ext的示例抄的,但是卻要init郁悶
Ext.grid.CheckColumn = function(config)...{
    Ext.apply(this, config);
    if(!this.id)...{
    this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};
//重寫了三個(gè)方法,捕捉mousedown修改數(shù)據(jù)
Ext.grid.CheckColumn.prototype =...{
init : function(grid)...{
    this.grid = grid;
    this.grid.on('render', function()...{
    var view = this.grid.getView();
    view.mainBody.on('mousedown', this.onMouseDown, this);
    }, this);
},
onMouseDown : function(e, t)...{
    if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)...{
    e.stopEvent();
    var index = this.grid.getView().findRowIndex(t);
    var record = this.grid.store.getAt(index);
    record.set(this.dataIndex, !record.data[this.dataIndex]);
    }
},

renderer : function(v, p, record)...{
    p.css += ' x-grid3-check-col-td';
    return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>';
}
}

//綁定到bool字段
var checkColumn=new Ext.grid.CheckColumn(...{
   header: "布爾值",
   dataIndex: 'bool'
});
/**//*
    現(xiàn)在配置列信息,為了本地化日期選擇器,請包含ext-lang-zh_CN.js,并修改Date.dayNames = ["日","一","二","三","四","五","六"];
    在Ext.apply(Ext.DatePicker.prototype, {...})中加入okText:"確定",cancelText:"取消";
*/
var col=new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(...{header:'序號',width:30}),
    ...{header:'姓名',sortable: true,dataIndex:'name'},
    ...{header:'職業(yè)',sortable: true,dataIndex:'occupation'},
    ...{  
    id:'datacol',
    header:'日期',
    sortable:true,
    dataIndex:'date',renderer: Ext.util.Format.dateRenderer('Y年m月d日'),//格式化顯示
    editor:new Ext.form.DateField()
     },
    ...{header:'數(shù)值 ',sortable:true,dataIndex:'float',renderer:formatFloat,align: 'right',editor:new Ext.form.NumberField()}, //自定義顯示方式,右對齊
    checkColumn //這個(gè)"選擇框列"看起來的確漂亮些,其實(shí)是通過修改背景圖片實(shí)現(xiàn)的
]);

//配置視圖信息
var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列顯示/隱藏';
//現(xiàn)在我們看看可編輯的數(shù)據(jù)表格能用了嗎       
var grid=new Ext.grid.EditorGridPanel(...{
    el:Ext.getBody(),
    height:200,
    width:400,
    store:store,
    cm:col,
    view:view
    });   
//為什么原例不需要init?
checkColumn.init(grid);
grid.render();

function formatFloat(val)...{
    var bgcolor;
    if(val>0)...{
    bgcolor='#FF0000';
    }else if(val<0)...{
    bgcolor='#00FF00';
    }
    else...{
    bgcolor='#000000';
    }
    return( ['<span style="color:',bgcolor,'">',val,'</span>'].join(''));
}

Ext.grid.PropertyGrid
屬性表格.繼承自EditorGridPanel,用習(xí)慣ide的用戶都會喜歡這個(gè)簡單的屬性表格,

config{
   customEditors : Object   //自定義屬性編輯器
      source : Object   //數(shù)據(jù)源
}

方法
PropertyGrid( Object config )
構(gòu)造

getSource() : Object
setSource( Object source ) : void
得到和設(shè)置數(shù)據(jù)源

事件
beforepropertychange : ( Object source, String recordId, Mixed value,
propertychange : ( Object source, String recordId, Mixed value, Mixed

同樣用一個(gè)簡單的示例來完成PropertyGrid的學(xué)習(xí)
var grid=new Ext.grid.PropertyGrid(...{
    el:Ext.getBody()
    ,height:200
    ,width:400
    ,viewConfig : ...{forceFit:true}
    ,customEditors:...{
        '年齡':new Ext.grid.GridEditor(new Ext.form.NumberField())
    }
    ,source:...{
        '姓名':'blackant'
        ,'年齡':100
    }
});

grid.source['性別']='男';
grid.customEditors['性別']=new Ext.grid.GridEditor(new Ext.form.ComboBox(...{
        editable:false
        ,triggerAction: 'all'
        ,store: new Ext.data.SimpleStore(...{
            fields: ['gender'],
            data : [['男'],['女']]
        })
        ,displayField:'gender'
        ,forceSelection:true
        ,mode:'local'
}));
grid.render();

選擇模式都很容易使用,略過,至于其它的擴(kuò)展,有時(shí)間再慢慢研究了,第一步先以學(xué)會使用為主