首页 > 代码库 > Extjs 组件继承 模板说明（以GridPanel为例）
Extjs 组件继承 模板说明（以GridPanel为例）
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();
}
});Extjs 组件继承 模板说明（以GridPanel为例）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。