Extjs 组件继承 模板说明(以GridPanel为例)
2014-07-24 08:44
309 查看
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案件)
- ExtJs表单组件查询LiveSearchGridPanel(一)
- Extjs学习总结之19表格组件gridpanel
- Extjs GridPanel 几点说明
- ExtJs学习系列之 GridPanel:Ext.grid.ColumnModel 列配置属性说明
- ExtJS TabPanel beforeremove beforeclose使用说明
- 与ASP.NET服务器端结合返回JSON数据实现ExtJS GridPanel客户端分页
- VS2005中使用Extjs GridPanel(1)
- tapestry 4.02中封装ext的GridPanel组件
- 一个完整的extjs的GridPanel例子
- ExtJS GridPanel根据条件改变字体颜色
- EXTJS学习系列提高篇:第一篇(转载)作者殷良胜,用EXT2.2+vs.2008.net+C#动态生成GridPanel
- ExtJs GridPanel 完整实例
- 关于Extjs3.0中的TreeGrid(Ext.ux.maximgb.tg.EditorGridPanel)
- 让ExtJS里的GridPanel的列能够自动决定宽度
- ExtJs疑难杂症之GridPanel单元格不能选中复制问题
- 关于EXTJS 2.2.1版本在IE环境下Grid组件表头下拉菜单图标错位问题的解决
- ExtJS的组件继承结构图
- ExtJS下grid的一些属性说明
- ExtJS 2.0 GridPanel基本表格简明教程