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

版权声明：本文博客原创文章，博客，未经同意，不得转载。