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(); } });
版权声明:本文博客原创文章,博客,未经同意,不得转载。