`

ext继承的两种写法

阅读更多
转自:http://liuna718-163-com.iteye.com/blog/805377
在使用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 ;  
        }  
    }   
  
})  
分享到:
评论

相关推荐

    Ext继承和扩展

    在提供的`继承扩展写法.js`文件中,我们可以看到实际的`Ext`继承示例。通常,文件会包含多个类定义,每个类定义都是通过`Ext.extend()`来实现继承的。这些类可能包含特定的配置选项、方法重写、事件监听等。 ### 类...

    ext继承重写

    在EXT JS这个强大的JavaScript框架中,"继承"和"重写"是两个核心概念,它们在构建可复用和模块化的应用程序中起着至关重要的作用。EXT JS采用面向对象的编程方式,允许开发者通过继承机制来扩展类的功能,同时通过...

    Ext继承--Ext自定义组件的书写方式

    目的:该示例非常详细注释说明Ext的面向对象的编程方式,使用继承,然后重写父类的方法,以及注册自定义事件说明Ext框架是事件驱动的框架编程。 阅读对象:本中心学习Ext面向对象编程的人员 阅读条件:掌握OO的思路...

    Ext继承分析

    在ExtJS中,`Ext.extend()` 是一个核心的函数,用于实现类之间的继承机制。它允许你创建新的类(子类),这些类将继承另一个类(父类)的属性和方法。这个功能对于构建复杂的JavaScript应用程序至关重要,因为它提供...

    Ext继承和扩展写的例子。

    在这个特定的例子中,我们关注的是"Ext继承和扩展",这是Ext JS中两个核心的概念,它们对于理解和创建自定义组件至关重要。 1. **Ext继承**: 在面向对象编程中,继承是类之间的一种关系,允许一个类(子类或派生...

    ext官方21种样式

    "ext官方21种样式"指的是EXT库中预设的21种不同的主题或样式,这些样式可以极大地改变EXT组件的外观,以适应不同项目的需求和用户界面设计。 EXT的样式主要通过Sass(Syntactically Awesome Style Sheets)语言来...

    Ext 两种树形菜单

    在给定的标题“Ext 两种树形菜单”中,我们可以推测这是一个关于使用Ext JS框架创建两种不同样式或功能的树形菜单的示例。Ext JS是一个强大的JavaScript库,专门用于构建富客户端应用,它提供了丰富的组件和API来...

    ext 继承(extend) 理解练习

    这里,我们聚焦于`ext`继承,通常指的是JavaScript中的`extend`方法,这是一种实现继承的方式。在JavaScript中,由于语言本身没有内置的类机制,所以开发者通过函数和原型链来模拟类的概念。 `extend`方法通常被...

    EXT dojochina Ext类继承.rar

    EXTJS的类继承主要通过以下几种方式实现: 1. **Ext.extend()**:这是EXTJS中最基础的类继承方法。通过调用`Ext.extend(baseClass, subClass, overrides)`,可以创建一个新的子类,其中`baseClass`是父类,`...

    ext面向对象和继承

    在JavaScript的世界里,面向对象(Object-Oriented Programming, OOP)是一种常用的设计模式,它允许我们通过类和对象来组织代码,实现代码的复用和模块化。本篇文章将探讨EXTJS框架中的面向对象机制,特别是继承的...

    Ext4.0学习总结及功能详解

    Ext4.0学习总结及功能详解。描述ext各种控件用法,布局等。

    ext图书系统 18种皮肤

    EXT图书系统的18种皮肤切换功能展示了EXT的灵活性和可定制性。皮肤是EXT应用的外观主题,包括颜色、字体、布局等方面的设计。用户可以根据个人喜好或企业品牌需求选择不同的皮肤,使得系统界面更加个性化。这种多...

    Windows读取Ext4分区的工具 Ext2Read

    3. **LVM2支持**: LVM(逻辑卷管理)是Linux中的一种高级存储管理技术,用于管理磁盘空间。Ext2Read能够识别和处理配置了LVM2的Linux系统,使得用户能访问LVM2中的EXT分区。 4. **EXT4 extent支持**: EXT4引入了...

    EXT dojochina Ext类静态方法.rar

    例如,`Ext.extend(MyClass, Ext.Panel, {myMethod: function() {...}})`创建了一个新类MyClass,它继承自Ext.Panel,并添加了一个名为myMethod的方法。 - `Ext.apply()`: 这个静态方法用于合并对象的属性,通常...

    Ext框架结构 Ext目录结构

    在面向对象编程中,类的继承是创建新类的一种方式,新类可以从现有类(父类)继承属性和方法。在Ext 2.2中,各个组件和类通常会形成一个复杂的继承链,使得代码可以重用并保持一致性。类说明图可以帮助开发者理解和...

    ext3.jar ext使用非常多

    EXT,全称EXT JS,是一种基于JavaScript的开源前端框架,主要应用于构建富互联网应用程序(Rich Internet Applications,简称RIA)。EXT3.jar是EXT框架的一个版本,它包含EXT库的Java版本,通常用于Java Web应用程序...

    EXT学习心得,ext

    EXT提供两种主要方法来实现表格中的复选框: 1. **使用列定义添加复选框**:可以通过在`columns`配置中定义一个包含`renderer: toCheckbox`的列,来实现每一行前的复选框。这种方法适用于需要自定义渲染逻辑的情况...

    在windows下使用Ext2Fsd访问EXT4分区

    在Windows操作系统中,由于默认不支持Linux文件系统如EXT4,因此无法直接读取或写入EXT4格式的分区。但有一些第三方工具可以帮助我们解决这个问题,其中之一就是Ext2Fsd。Ext2Fsd是一个免费的开源软件,专门设计用于...

    Ext2.2,Ext3.0中文文档

    Ext2和Ext3是两种广泛使用的Linux文件系统,它们在Linux操作系统中扮演着至关重要的角色。下面将详细解析这两种文件系统的特性和差异。 **Ext2(Second Extended File System)** Ext2是Linux下的一种第二代扩展...

Global site tag (gtag.js) - Google Analytics