码迷,mamicode.com
首页 > Web开发 > 详细

Extjs 组件继承 模板说明(同GridPanel案件)

时间:2015-07-08 18:35:49      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:


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案件)

标签:

原文地址:http://www.cnblogs.com/mengfanrong/p/4630836.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!