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






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章