- 浏览: 55065 次
- 性别:
- 来自: 湖北
最新评论
转自:http://liuna718-163-com.iteye.com/blog/805377
在使用extjs时,因为特殊的业务要求,extjs提供的功能不能满足业务逻辑,所以需要对其进行扩展,也就是所谓的继承,
在extjs中继承有两种写法
1。在ExtJS中使用Ext.extend()函数实现继承功能:
2.Extjs中替换constructor,写法如下:
在使用extjs时,因为特殊的业务要求,extjs提供的功能不能满足业务逻辑,所以需要对其进行扩展,也就是所谓的继承,
在extjs中继承有两种写法
1。在ExtJS中使用Ext.extend()函数实现继承功能:
/* *扩展树的多选模式,加了写业务逻辑方法validNodeHasFolder,并重写了select方法加入了业务逻辑 **/ Ext.ns("Ext.targsoft"); Ext.targsoft.MultiSelectionModel = function(config){ Ext.apply(this, config); Ext.targsoft.MultiSelectionModel.superclass.constructor.call(this); }; Ext.extend(Ext.targsoft.MultiSelectionModel , Ext.tree.MultiSelectionModel,{ validCount : 0 , select : function(node, e, keepExisting){ if(keepExisting !== true){ this.clearSelections(true); } if(this.isSelected(node)){ this.lastSelNode = node; return node; } if(!node.isLeaf() && keepExisting ){ return ; } if(keepExisting && node.isLeaf() && this.validCount == 0 ){ alert(this.validCount ); this.validNodeHasFolder(); } this.selNodes.push(node); this.selMap[node.id] = node; this.lastSelNode = node; node.ui.onSelectedChange(true); this.fireEvent("selectionchange", this, this.selNodes); return node; }, //判断选择的节点中是否含有文件夹,如果有那么就进行反选 validNodeHasFolder : function(){ this.validCount = 1 ; for(var i=0 ; i< this.selNodes.length ; i++){ if(!this.selNodes[i].isLeaf()){ this.unselect(this.selNodes[i]); } } } });
2.Extjs中替换constructor,写法如下:
Ext.ns('Ext.formdesign'); Ext.formdesign.FormSort = Ext.extend(Ext.Window ,{ constructor : function(_cfg){ Ext.apply(this,_cfg); this.grid = this.createGrid(); Ext.formdesign.FormSort.superclass.constructor.call(this,{ title : '表单类别' , width : 280 , height : 270 , closeAction : 'close' , items : [this.grid ] , buttons : [ { text : '关闭' , scope : this , handler : function(){ this.close(); } } ] }) }, //创建表格 createGrid : function(){ //搜索 var searchObjRecs = Ext.data.Record.create([ {name: 'formSortUuid', mapping: 'formSortUuid'}, {name: 'sortName', mapping: 'sortName'}, {name: 'description', mapping: 'description'} ]); var searchObjSm = new Ext.grid.CheckboxSelectionModel({header : '' ,singleSelect: true}); var searchObjStore = new Ext.data.Store({ url : this.contextPath+'/formsort.do?method=getFormSortDatas', autoLoad : false , reader: new Ext.data.JsonReader( { totalProperty: "total", root: 'data', id: 'formSortUuid' },searchObjRecs ) }); /* var pagingBar = new Ext.PagingToolbar({ pageSize: rowLimit_1, store: searchObjStore, displayInfo: true, displayMsg: '总数: {2}', emptyMsg: '没有数据' }); */ var searchObjGrid = new Ext.grid.GridPanel({ id: 'searchObjGridId', store: searchObjStore, height : 202 , autoScroll : true , cm: new Ext.grid.ColumnModel([ searchObjSm, {header: "编号", width: 100, dataIndex: 'formSortUuid', sortable: true,hidden: true}, {header: "名称", width: 105, dataIndex: 'sortName', sortable: true} , {header: "描述", width: 105, dataIndex: 'description', sortable: true} ]), tbar : [ { text :'添加', handler : this.createRecord.createDelegate(this) },'-',{ text :'修改', handler : this.updateRecord.createDelegate(this) },'-',{ text :'删除', handler : this.delteRecord.createDelegate(this) } ] , frame: false, loadMask:{msg:"数据加载中...."}, sm:searchObjSm }); return searchObjGrid ; } , //新建 createRecord : function(){ this.getWindow().show(); this.getWindow().setTitle('新建表单类别'); this.getForm().baseParams = { create : true } ; } , //修改 updateRecord : function(){ var r = this.getGridSeleted(); if(r){ this.getWindow().show(); this.getWindow().setTitle('修改表单类别'); this.getForm().baseParams = { create : false } ; this.getForm().loadRecord(r); } } , //删除记录 delteRecord: function(){ var sort = this.protectId ? this.protectId : 'temp' ; var rec = this.getGridSeleted(); if(rec){ Ext.Msg.confirm('提示','确认删除<b>'+rec.get('sortName')+'</b>吗?',function(btn){ if(btn == 'yes'){ if(rec.get('formSortUuid') == sort){ Ext.Msg.alert('提示','<b>'+rec.get('sortName')+'</b>是系统默认类别不能删除!'); }else{ Ext.Ajax.request({ url : this.contextPath+'/formsort.do?method=delFormSort', params : {sortId : rec.get('formSortUuid')} , scope : this , callback :function(options ,success ,response ){ if(success){ var text = response.responseText ; if(text == '1'){ Ext.Msg.alert('提示','删除成功!',function(btn){ if(btn == 'ok'){ this.grid.getSelectionModel().clearSelections(); this.grid.getStore().reload(); } },this); }else if(text == '2'){ Ext.Msg.alert('提示','<b>'+rec.get('sortName')+'</b>已经被业务对象使用不能进行删除!'); }else{ Ext.Msg.alert('提示','删除数据失败!'); } }else{ Ext.Msg.alert('提示','删除数据失败!'); } } }); } } },this) } }, createForm : function(){ var form = new Ext.form.FormPanel({ frame : true , defaultType : 'textfield' , buttonAlign : 'center' , labelAlign : 'right' , labelWidth : 70 , items : [ { fieldLabel : 'id' , xtype : 'hidden', name : 'formSortUuid' }, { fieldLabel : '名称' , name : 'sortName' },{ fieldLabel : '描述' , xtype : 'textarea' , name : 'description' } ] , buttons : [ { text : '确定' , scope : this , handler : function(){ form.getForm().submit({ url: this.contextPath+'/formsort.do?method=saveOrUpdateFormSort', waitTitle : '请等待' , waitMsg: '正在提交中', scope : this , success:function(form,action){ this.getForm().reset(); this.grid.getSelectionModel().clearSelections(); this.grid.getStore().reload(); this.getWindow().hide(); }, failure:function(form,action){ Ext.Msg.alert('提示','保存失败!'); } }); } } , { text : '取消' , scope : this , handler : function(){ this.getForm().reset(); this.getWindow().hide(); } } ] }); return form ; } , getForm : function(){ var form = this.getFormPanel().getForm(); return form ; } , getFormPanel : function(){ if(!this.gridForm){ this.gridForm = this.createForm(); } return this.gridForm ; } , createWindow : function(){ var form = this.getFormPanel(); var win = new Ext.Window({ title : 'info' , closeAction : 'hide' , width : 300 , height : 180 , modal : true , items : [form] }); return win ; }, getWindow : function(){ if(!this.gridWindow){ this.gridWindow = this.createWindow(); } return this.gridWindow ; } , //取到grid选择的记录 getGridSeleted : function(){ var sm = this.grid.getSelectionModel(); if(sm.hasSelection()){ return sm.getSelected() ; }else{ Ext.Msg.alert('提示','请选择一条记录!'); return null ; } } })
发表评论
-
ExtJS编程思想和开发方式|ExtJS单页面系统|ExtJS单页面应用
2011-04-20 11:53 3921唠叨几句:不要认为 EXTJS 就是一个界面改良,在项目中,我 ... -
Ext.namespace解析
2011-04-20 11:36 1027对于这个函数,我一直不太清楚,今天查了查官方的解释,豁然开朗。 ... -
Extjs的代码规范
2011-04-20 11:28 3703一个组件一个JS文件,多个组件拼接成一个模块,这些组件都放在一 ... -
Extjs 继承的使用
2011-04-19 17:05 1711Javascript原始的继承写法: // Traditio ... -
Ext js call方法
2011-04-19 15:58 953转自:http://blog.csdn.net/zhaoqil ... -
Ext.extend用法以及代码解读
2011-04-18 17:17 762概述 Ext.extend是Ext的继承机制,这个函数的代码 ... -
[转贴]三种Ext提交数据的方法
2011-04-13 16:28 9891, EXT的form表单ajax提交(默认提交方式) f ... -
extjs表单FormPanel提交数据和加载数据
2011-04-13 15:21 3719转自:http://liuna718-163-com.itey ... -
看ExtJs API文档的阅读方法(附ExtJS 3.3中文API下载)
2011-04-12 14:58 3511对EXT,下载一个ext2.0的API文件,叫你如何看懂API ...
相关推荐
在提供的`继承扩展写法.js`文件中,我们可以看到实际的`Ext`继承示例。通常,文件会包含多个类定义,每个类定义都是通过`Ext.extend()`来实现继承的。这些类可能包含特定的配置选项、方法重写、事件监听等。 ### 类...
在EXT JS这个强大的JavaScript框架中,"继承"和"重写"是两个核心概念,它们在构建可复用和模块化的应用程序中起着至关重要的作用。EXT JS采用面向对象的编程方式,允许开发者通过继承机制来扩展类的功能,同时通过...
目的:该示例非常详细注释说明Ext的面向对象的编程方式,使用继承,然后重写父类的方法,以及注册自定义事件说明Ext框架是事件驱动的框架编程。 阅读对象:本中心学习Ext面向对象编程的人员 阅读条件:掌握OO的思路...
在ExtJS中,`Ext.extend()` 是一个核心的函数,用于实现类之间的继承机制。它允许你创建新的类(子类),这些类将继承另一个类(父类)的属性和方法。这个功能对于构建复杂的JavaScript应用程序至关重要,因为它提供...
在这个特定的例子中,我们关注的是"Ext继承和扩展",这是Ext JS中两个核心的概念,它们对于理解和创建自定义组件至关重要。 1. **Ext继承**: 在面向对象编程中,继承是类之间的一种关系,允许一个类(子类或派生...
"ext官方21种样式"指的是EXT库中预设的21种不同的主题或样式,这些样式可以极大地改变EXT组件的外观,以适应不同项目的需求和用户界面设计。 EXT的样式主要通过Sass(Syntactically Awesome Style Sheets)语言来...
在给定的标题“Ext 两种树形菜单”中,我们可以推测这是一个关于使用Ext JS框架创建两种不同样式或功能的树形菜单的示例。Ext JS是一个强大的JavaScript库,专门用于构建富客户端应用,它提供了丰富的组件和API来...
这里,我们聚焦于`ext`继承,通常指的是JavaScript中的`extend`方法,这是一种实现继承的方式。在JavaScript中,由于语言本身没有内置的类机制,所以开发者通过函数和原型链来模拟类的概念。 `extend`方法通常被...
EXTJS的类继承主要通过以下几种方式实现: 1. **Ext.extend()**:这是EXTJS中最基础的类继承方法。通过调用`Ext.extend(baseClass, subClass, overrides)`,可以创建一个新的子类,其中`baseClass`是父类,`...
在JavaScript的世界里,面向对象(Object-Oriented Programming, OOP)是一种常用的设计模式,它允许我们通过类和对象来组织代码,实现代码的复用和模块化。本篇文章将探讨EXTJS框架中的面向对象机制,特别是继承的...
Ext4.0学习总结及功能详解。描述ext各种控件用法,布局等。
EXT图书系统的18种皮肤切换功能展示了EXT的灵活性和可定制性。皮肤是EXT应用的外观主题,包括颜色、字体、布局等方面的设计。用户可以根据个人喜好或企业品牌需求选择不同的皮肤,使得系统界面更加个性化。这种多...
3. **LVM2支持**: LVM(逻辑卷管理)是Linux中的一种高级存储管理技术,用于管理磁盘空间。Ext2Read能够识别和处理配置了LVM2的Linux系统,使得用户能访问LVM2中的EXT分区。 4. **EXT4 extent支持**: EXT4引入了...
例如,`Ext.extend(MyClass, Ext.Panel, {myMethod: function() {...}})`创建了一个新类MyClass,它继承自Ext.Panel,并添加了一个名为myMethod的方法。 - `Ext.apply()`: 这个静态方法用于合并对象的属性,通常...
在面向对象编程中,类的继承是创建新类的一种方式,新类可以从现有类(父类)继承属性和方法。在Ext 2.2中,各个组件和类通常会形成一个复杂的继承链,使得代码可以重用并保持一致性。类说明图可以帮助开发者理解和...
EXT,全称EXT JS,是一种基于JavaScript的开源前端框架,主要应用于构建富互联网应用程序(Rich Internet Applications,简称RIA)。EXT3.jar是EXT框架的一个版本,它包含EXT库的Java版本,通常用于Java Web应用程序...
EXT提供两种主要方法来实现表格中的复选框: 1. **使用列定义添加复选框**:可以通过在`columns`配置中定义一个包含`renderer: toCheckbox`的列,来实现每一行前的复选框。这种方法适用于需要自定义渲染逻辑的情况...
在Windows操作系统中,由于默认不支持Linux文件系统如EXT4,因此无法直接读取或写入EXT4格式的分区。但有一些第三方工具可以帮助我们解决这个问题,其中之一就是Ext2Fsd。Ext2Fsd是一个免费的开源软件,专门设计用于...
Ext2和Ext3是两种广泛使用的Linux文件系统,它们在Linux操作系统中扮演着至关重要的角色。下面将详细解析这两种文件系统的特性和差异。 **Ext2(Second Extended File System)** Ext2是Linux下的一种第二代扩展...