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

无废话ExtJs 系列教程十八[继承:Extend]

 
阅读更多

在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性。而这些属性可以通过“继承”定义在我们定义的新组件中,从而达到重用的目地。

 

1.代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>My JSP 'index.jsp' starting page</title>

	<!--ExtJs框架开始-->
	<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="Ext/ext-all.js"></script>
	<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
	<!--ExtJs框架结束-->	
	<!-- 	 
	<script type="text/javascript" src="study/helloWorld.js"></script>
	<script type="text/javascript" src='study/window.js'></script>
	<script type="text/javascript" src='study/formPanel.js'></script>
	<script type="text/javascript" src='study/textField.js'></script>
	<script type="text/javascript" src='study/button.js'></script>
	<script type="text/javascript" src='study/login.js'></script>
	-->	
	<!--调用/study/extend.js 继承  -->
	<script type="text/javascript" src="Ext/src/locale/ext-lang-zh_CN.js"></script><!--中文日期翻译-js-->
	<script type="text/javascript" src="study/kindeditor/kindeditor.js"></script>
	<script type="text/javascript" src='study/extend.js'></script>
	
	<style type="text/css">
		.loginicon
		{
			background-image: url(study/login.gif) !important;
		}
	</style>
	<style type='text/css'>
		.x-form-unit
		{
			height:22px;
			line-height:22px;
			padding-left:2px;
			display:inline-block;
			display:inline;
		}
	</style>
	
  </head>  
  <body>
  	<!--------------------- 上层 -->
  	<!-- 这里使用ContainerLayout: 垂直方式布局  -->
  	<div id='ContainerLayout' style='float:left;width:300px'></div>
  	<!-- padding-left 是用来填充间隔,如果没有则两个容器/组件会完全挨着 -->
  	<div id='hello' style='float:left;width:300px;padding-left: 10px'></div>
  	<div id='right-upward' style='float:left;width:700px;padding-left:15px'></div>
  	
  	
  	<!--------------------- 中间------------------------------------>
  	<div id='BorderLayout' style='padding: 20px 0px 0px 0px;clear:both'></div>
  	
  	
  	<!--------------------- 底层------------------------------------>
  	<div id='accordionLayout' style='float:left;padding:20px 0px;width:300px;height:200px'></div>
  	<!-- 两个Panel渲染同一div,不会相互覆盖,会上下依次显示 -->
  	<div id='fitLayout' style='float:left; padding:20px 0px 0px 20px;height:30px'></div>
  	<!-- 表格布局 -->
  	<div id='tableLayout' style='float:left; padding:20px 0px 0px 20px;height:30px;width:100px'></div>
  </body>
</html>

 

2. extend.js

Ext.onReady(function(){
	
	//--------------------------继承前开始--------------------------//
	var panel1 = new Ext.form.FormPanel({
		title:'Before extend formPanel1',
		width:600,
		height:100,
		html:'I am studing...'
	});
	
	var panel2 = new Ext.form.FormPanel({
		title:'Befor extend formPanel2',
		width:600,
		height:100,
		html:'Today is 2015/06/14'
	});
	//--------------------------继承前结束--------------------------//
	
	
	
	
	
	//--------------------------继承后开始--------------------------//
	
	/*
	 * 
	 * 注1:这里只是组件的继承, 下面的例子不单组件继承,它的子组件也进行继承!
	 * 
	 * (1)Ext.extend 用来继承已有的类, 这里给title, width, height 加上了默认值
	 * (2)这里简单介绍了组件的继承,如:平时我们在用MessageBox.show()时,一般会有4种情况,“成功”,“失败”,“出错”,“确认”。。
	 * (3)我们通过简单的继承,就可以把这4类文本框封装的很好,每次使用时new我们的新类即可。
	 * 
	 */
	var MyPanel = Ext.extend(Ext.Panel,{
		title:'Title',
		width:700,
		height:120
	});
	
	var MyPanel1 = new MyPanel({
		html:'I am studing...'
	});
	
	var MyPanel2 = new MyPanel({
		html:'Today is 2015/06/15'
	});	
	//--------------------------继承后结束--------------------------//
	
	
	/*
	 * 
	 * 注2:这是组件套用子组件进行继承的例子
	 * 
	 * (1)我做了个组件套用子组件的例子,给组件附加子组件须在 initComponent: function () {} 初始化组件时加入,
	 * (2)并且在完成后,还要显示的调用  MyFormPanel.superclass.initComponent.call(this, arguments); //调用父类的initComponent
	 * (3)我们在开发中,常会用到 GridPanel,会定义分页组件,按钮等,经过这个实例,我们可以在把原有的 GridPanel再包一层,以保证软件中的“单一原则”。
	 *    其中变化的部分我们可以通过定义新属性把他外露出来。如下例所示。
	 * 
	 */
	
	//定义新的类FormPanel, 并且把变化的属性暴露出来以便以后继承
	var MyFormPanel = Ext.extend(Ext.form.FormPanel, {
		title:'属性外露',
		width:700,
		labelWidth:80,
		initComponent: function(){
			
			//formPanel 的items 配置项
			this.items = [{
				xtype:'textfield',
				fieldLabel:'姓名',
				id: this.usernameid,  //变化的部分
				name: 'username'
			}];
			
			
			//formPanel 的buttons 配置项
			this.buttons = [{
				text:'确定',
				handler:this.submit,	//变化的部分
				scope: this
			},{
				text:'取消',
				handler:this.cancel,
				scope:this
			}];
			
			//MyFormPanel 必须调用父类的initComponent函数,否则上面的initComponent 配置项会失效!!
			MyFormPanel.superclass.initComponent.call(this, arguments);	//调用父类的initComponent
		}
	});
	
	
	//创建测试对象1
	var testForm1 = new MyFormPanel({
		usernameid:'username',
		submit:function(){
			alert(Ext.getCmp('username11').getValue());
		},
		
		cancel:function(){
			testForm1.getForm().reset();
		}
	});
	
	//创建测试对象2
	var testForm2 = new MyFormPanel({
		usernameid:'usernameid111111111111',
		title:'覆盖属性',
		submit:function(){
			alert(this.usernameid);
		},
		
		cancel:function(){
			testForm2.getForm().reset();
		}
	});
	
	
	new Ext.Window({
		title:'Window',
		width:800,
		//height:600,
		items:[panel1,panel2,MyPanel1,MyPanel2,testForm1,testForm2],
		
		modal:true
		
	}).show();
});

 

3. 效果如下:



 

4. 源代码如下:

index.jsp  位于WebRoot根目录下

extend.js 位于WebRoot/study/extend.js

 

  • 大小: 314.4 KB
分享到:
评论

相关推荐

    无废话ExtJs 系列教程十五[树:TreePanel]

    《无废话ExtJs系列教程十五:树:TreePanel》 ExtJs是一个强大的JavaScript库,用于构建富客户端Web应用。在本教程中,我们将深入探讨一个重要的组件——TreePanel,它是ExtJs用来展示层次结构数据的工具,常用于...

    无废话ExtJs 系列教程十三[页面布局:Layout]

    NULL 博文链接:https://huiqinbo.iteye.com/blog/2217105

    无废话ExtJs 系统教程十四[列表:GridPanel]

    在"无废话ExtJS 系统教程十四[列表:GridPanel]"中,我们将会深入探讨如何有效地使用GridPanel来创建高效的、功能丰富的数据列表。 GridPanel是ExtJS中的核心组件之一,它允许用户以表格形式展示大量数据,并支持...

    无废话ExtJs 教程十[下拉列表:Combobox]

    本教程将深入探讨ExtJS中的Combobox组件,包括其基本用法、配置选项、事件处理和自定义功能。 1. **Combobox的基本结构** - Combobox由两个主要部分组成:文本输入框和下拉列表。用户可以在输入框中键入文字,或者...

    无废话ExtJs 系统教程十九[动态复选框:RemoteCheckboxGroup]

    总之,"无废话ExtJs 系统教程十九[动态复选框:RemoteCheckboxGroup]"是一个帮助开发者掌握如何在ExtJS应用中实现动态复选框组件的资源。通过学习和实践,你可以创建出更加灵活和高效的用户界面,同时利用源码和工具...

    无废话ExtJs 教程十二[员工信息表Demo:AddUser]

    【标题】"无废话ExtJs 教程十二[员工信息表Demo:AddUser]"是一个针对初学者和进阶者设计的教程,旨在帮助他们更好地理解和应用ExtJS框架创建员工信息管理系统的添加用户功能。在本教程中,我们将深入探讨如何使用...

    ExtJs视频教程整包打包

    Extjs4学习指南21集无代码 extjs网上商城项目 ExtJs视频教程 google调试extjs视频 从基础到实战ExtJs全程精通 传智蔡世友ExtJs视频教程 浪曦ExtJs,永久有效,所有视频解压密码相同,在文档中有写,如有问题请及时...

    ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局

    ExtJS4是Sencha公司开发的一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。这个框架以其丰富的组件库、灵活的布局管理、以及强大的数据绑定机制而闻名。在"ExtJS4官方指南翻译:DragandDrop拖放/Grid...

    extjs资源大全 教程 手册

    这个压缩包包含了一系列EXTJS相关的资源,包括教程、手册和API文档,对于学习和掌握EXTJS有着极高的价值。 1. **中文手册**:EXTJS中文手册是EXTJS初学者的重要参考资料,它详细解释了EXTJS的基础概念、组件体系、...

    dojo china extjs 视频教程源码

    《dojo china extjs 视频教程源码》 在当今的Web开发领域,JavaScript框架扮演着至关重要的角色,其中Dojo和ExtJS是备受开发者喜爱的两个库。本教程源码集结合了这两个强大的工具,为学习者提供了一次深入理解它们...

    extjs4-教程

    ### ExtJS4基础教程知识点 #### 1. ExtJS4开发环境搭建 ExtJS4是使用JavaScript进行开发的框架,专门用于构建富互联网应用(RIA)。搭建ExtJS开发环境需要预先安装一些软件和配置开发环境。以下步骤详细介绍了如何...

    免费 Extjs4.0教程视频

    ### 免费Extjs 4.0教程视频知识点概览 #### 第一讲:Extjs 4.0概述与Hello World程序 - **Extjs 4.0简介**: - Extjs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。 - 版本4.0引入了许多新...

    EXTJS入门教程(非常详细)

    首先,EXTJS的核心是Ext,它提供了一系列的功能,比如获取多个DOM节点,响应事件等。在EXTJS中,DOM节点获取是通过Element类实现的,这是一个封装了原生DOM操作方法的类,使得操作DOM元素变得更加方便和安全。...

    extjs教程,extjs教程,extjs教程

    extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程

    ExtJS日期多选组件源码

    ExtJS是一个强大的JavaScript框架,主要用于构建富客户端应用。在日常开发中,我们经常需要处理日期相关的功能,例如日期选择器。在默认情况下,ExtJS的日期选择器(DatePicker)只支持单选,即用户只能选择一个日期...

    ExtJs教程_完整版

    ### ExtJs教程_完整版 —— 第一章起步(1)关键知识点详解 #### 一、ExtJS概述 **1.1 极致的用户体验** ExtJS是一个强大的JavaScript框架,专为Web应用开发而设计。它以其优雅的API、丰富的组件集合以及出色的跨...

Global site tag (gtag.js) - Google Analytics