`
流浪鱼
  • 浏览: 1692068 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ext继承的两种写法

阅读更多

在使用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应用的外观主题,包括颜色、字体、布局等方面的设计。用户可以根据个人喜好或企业品牌需求选择不同的皮肤,使得系统界面更加个性化。这种多...

    java-ext.zip_ext_ext java_ext 标签_ext java_java ext

    在IT行业中,Java和ExtJS是两种非常重要的技术。Java是一种多平台的、面向对象的编程语言,而ExtJS则是一个用于构建富客户端Web应用的JavaScript框架。它们之间的结合能够帮助开发者创建功能丰富的、交互性极强的Web...

    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应用程序...

    在windows下使用Ext2Fsd访问EXT4分区

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

Global site tag (gtag.js) - Google Analytics