1. 重寫initComponent()方法,並在該方法在調用父類的initComponent()方法。
如:subclass.superclass.initComponent.call(this);
2. 在initComponent中,出現下面語句,覆蓋父類屬性
Ext.apply(this, {
title : "aaa"
});
3. 基本模板代碼如下:
Ext.ns("my.component");
my.component.MyGridPanel = Ext.extend(Ext.GridPanel,{
/**
* 初始化組件
*/
initComponent : function(){
// 數據倉庫
var store = this.store;
if(!store){
store = this.buildStore(this.baseParams);
}
// 列模型
var cm = this.cm;
if(!cm){
cm = this.buildCm();
}
// 複選框.組件屬性使用selModel配置
var sm = new Ext.grid.CheckboxSelectionMedol();
Ext.apply(this, {
// 這裏加上組件的屬性
selModel : sm,
// 分頁工具條
bbar : new Ext.PagingToolbar({
}),
colModel : new Ext.grid.ColumnModel({
// 這裏加上列模型的屬性
columns : cm;
}),
// 對該組件設置監聽器
listeners : {
"dbclick" : function(){},
"rowClick" : function(){},
......
}
});
my.component.MyGridPanel.superclass.initComponent.apply(this);
},
/**
* 構建store
*/
buildStore : function(baseParams){
Ext.apply(baseParams, {
// 分頁條件
});
return new Ext.data.JsonStore({
url : "",
idProperty : "", // id屬性值配置
totalProperty : "", //
autoLoad : boolean,
root : "data" // 數據的根,後面的json格式對象數組。
fields : [
{name : "", mapping : ""},
{name : "", mapping : ""},
......
]
});
},
/**
* 構建數據列
*/
buildCm : function(){
return [
{name : "", dataIndex : ""},
{name : "", dataIndex : ""}
];
},
// 通過選擇模型,獲取選中的記錄。是多條的
getSelections : function(){
var records = this.getSelectionModel().getSelections();
return records;
}
// 通過選擇模型,獲取選中的記錄。只有一條
getSelected : function() {
var record = this.getSelectionModel().getSelected();
}
});