在开发中，我们在使用视图组件时，经常要设置宽度，高度，标题等属性。而这些属性可以通过“继承”定义在我们定义的新组件中，从而达到重用的目地。
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
相关推荐
NULL 博文链接：https://huiqinbo.iteye.com/blog/2217105
NULL 博文链接：https://huiqinbo.iteye.com/blog/2219418
NULL 博文链接：https://huiqinbo.iteye.com/blog/2216788
NULL 博文链接：https://huiqinbo.iteye.com/blog/2218833
NULL 博文链接：https://huiqinbo.iteye.com/blog/2219726
ExtJS4官方指南翻译：DragandDrop拖放/Grid组件/Tree组件/容器与布局
ExtJS4_官方指南：MVC架构_简体中文版
Extjs4学习指南21集无代码 extjs网上商城项目 ExtJs视频教程 google调试extjs视频 从基础到实战ExtJs全程精通 传智蔡世友ExtJs视频教程 浪曦ExtJs，永久有效，所有视频解压密码相同，在文档中有写，如有问题请及时...
dojo china extjs 视频教程源码 和dojo china extjs 视频教程的代码一样 extjs爱好者 下载
NULL 博文链接：https://huiqinbo.iteye.com/blog/2217092
extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程,extjs教程
ExtJs4.0入门教程,详细介绍ExtJs4.0。
ExtJS2.0教程.chm ExtJS2.0教程.chm ExtJS2.0教程.chm Extjs2.2.1 Extjs2.2.1
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS...
ExtJS入门教程 一、开始EXTJS 二、组件的介绍 三、EXT核心
ExtJs教程_完整版，Extjs入门教程，不错