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


 
 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值