无废话ExtJs 入门教程二十一[继承：Extend]
在开发中，我们在使用视图组件时，经常要设置宽度，高度，标题等属性。而这些属性可以通过“继承”定义在我们定义的新组件中，从而达到重用的目地。
1.代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--ExtJs框架开始-->
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base-debug.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all-debug.js"></script>
8 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
9 <!--ExtJs框架结束-->
10 <script type="text/javascript">
11 Ext.onReady(function () {
12 //----------------继承前开始---------------//
13 var Panel1 = new Ext.Panel({
14 title: '标题',
15 width: 500,
16 height: 100,
17 html: '好好学习'
18 });
19 var Panel2 = new Ext.Panel({
20 title: '标题',
21 width: 500,
22 height: 100,
23 html: '天天向上'
24 });
25 //----------------继承前结束---------------//
26 //----------------继承后开始---------------//
27 var MyPanel = Ext.extend(Ext.Panel, {
28 title: '标题',
29 width: 500,
30 height: 100
31 });
32 var MyPanel1 = new MyPanel({
33 html: '好好学习'
34 });
35 var MyPanel2 = new MyPanel({
36 html: '天天向上'
37 });
38 //----------------继承后结束---------------//
39 //定义新的类FormPanel，并且把变化的属性暴露出来以便以后继承
40 var MyFormPanel = Ext.extend(Ext.form.FormPanel, {
41 title: '属性外露',
42 width: 500,
43 labelWidth: 80,
44 initComponent: function () {
45 this.items = [{
46 xtype: 'textfield',
47 fieldLabel: '姓名',
48 id: this.usernameid,//变化的部份
49 name: 'username',
50 }];
51 this.buttons = [{
52 text: '确 定',
53 handler: this.submit,//变化的部份
54 scope: this
55 }, {
56 text: '取 消',
57 handler: this.cancel,//变化的部份
58 scope: this
59 }];
60 MyFormPanel.superclass.initComponent.call(this, arguments); //调用父类的initComponent
61 }
62 });
63 //创建测试对象1
64 var testForm1= new MyFormPanel({
65 usernameid:'username',
66 submit: function () {
67 alert(Ext.getCmp('username').getValue());
68 },
69 cancel: function () {
70 testForm1.getForm().reset();
71 }
72 });
73 //创建测试对象2
74 var testForm2=new MyFormPanel({
75 title: '覆盖属性',
76 usernameid:'usernameid',
77 submit: function () {
78 alert(this.usernameid);
79 },
80 cancel: function () {
81 testForm2.getForm().reset();
82 }
83 });
84 //创建窗体
85 var win = new Ext.Window({
86 title: '窗口',
87 id: 'window',
88 width: 500,
89 height: 620,
90 resizable: true,
91 closable: true,
92 maximizable: true,
93 minimizable: true,
94 items: [Panel1, Panel2, MyPanel1, MyPanel2, testForm1,testForm2]
95 });
96 win.show();
97 });
98 </script>
99 </head>
100 <body>
101 <!--
102 说明：
103 (1)var MyPanel = Ext.extend(Ext.Panel, {
104 title: '标题',
105 width: 500,
106 height: 100
107 });
108 Ext.extend 用来继承已有的类 这里给 title,width,height加上了默认值
109 第12行至37行，简单介绍了组件的继承，如：平时我们在用MessageBox.show()时，一般会有4种情况，“成功”，“失败”，“出错”,“确认”。。
110 我们通过简单的继承，就可以把这4类文本框封装的很好，每次使用时new我们的新类即可。
111 (2)第38--82行，我做了个组件套用子组件的例子，给组件附加子组件须在 initComponent: function () {} 初始化组件时加入，
112 并且在完成后，还要显示的调用 MyFormPanel.superclass.initComponent.call(this, arguments); //调用父类的initComponent
113 我们在开发中，常会用到 GridPanel，会定义分页组件，按钮等，经过这个实例，我们可以在把原有的 GridPanel再包一层，以保证软件中的“单一原则”。
114 其中变化的部分我们可以通过定义新属性把他外露出来。如上例所示。
115 -->
116 </body>
117 </html>
2.效果如下：
无废话ExtJs 入门教程二十一[继承：Extend]的更多相关文章
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程二[Hello World]
无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程十一[下拉列表：Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- 无废话ExtJs 入门教程六[按钮：Button]
无废话ExtJs 入门教程六[按钮:Button] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个按钮“提交”与重置.如下所示代码区的第68行位置, butt ...
- 无废话ExtJs 入门教程四[表单：FormPanel]
无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. ...
随机推荐
- JavaScript零基础学习系列二
条件控制 if(条件){//语句块}如果条件(小括号里面的)满足true.那么才会执行大括号里面的代码,如果条件不满足(false),那么不执行,注意:有可能代码不会执行. 例如: if(3>1 ...
- yii2.0归档安装方法
我前几天用composer安装 一直没成功 我就用归档的方法安装了 所以这篇文字只帮助那些用归档方法安装的朋友 Yii是一个高性能的,适用于开发WEB2.0应用的PHP框架. Yii自带了丰富的功 ...
- 用类(function(){})()实现点击显示index索引值的详解
code: <script type="text/javascript"> ; i < ; i++){ var btn = document.createElem ...
- BZOJ 3223: Tyvj 1729 文艺平衡树
3223: Tyvj 1729 文艺平衡树 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 3628 Solved: 2052[Submit][Sta ...
- mysql设置远程访问权限
查一下你的MYSQL用户表里, 是否允许远程连接 1.授权 mysql>grant all privileges on *.* to 'root'@'%' identified by ...
- WordPress数据库优化技巧
各位站长都知道wordpress用久了就会越来越慢.今天就给大家介绍如何给自己的wordpress提速,分两种方法:1.插件属性wordpress的都知道其插件是相当的多,只要你能想得到的基本都有,在 ...
- MYSQL入门全套(第三部)
MYSQL入门全套(第一部) MYSQL入门全套(第二部) 索引简介 索引是对数据库表中一个或多个列(例如,employee 表的姓名 (name) 列)的值进行排序的结构.如果想按特定职员的姓来查找 ...
- B：Wordpress不同分类调用不同的模板
这里指的是默认文章类型的模板(single.php,category.php) 应用场景: 默认文章默认有2个大类(新闻资讯.游戏资料) 新闻资讯下的所有子分类调用"新闻资讯列表模板,新闻内 ...
- Backbone 学习笔记
Backbone 是一款基于模型-视图-控制器 MVC 模式的轻量级javascript 框架 ,可以用来帮助开发人员创建单页Web应用. 借助Backbone 我们可以使用REST的方式来最小化客户 ...
- windows7下php5.4成功安装imageMagick，及解决php imagick常见错误问题。（phpinfo中显示不出来是因为：1.imagick软件本身、php本身、php扩展三方版本要一致，2.需要把CORE_RL_*.dll多个文件放到/php/目录下面）
windows7下 php5.4成功安装imageMagick . (phpinfo中显示不出来是因为:1.软件本身.php本身.php扩展三方版本要一致,2.需要把CORE_RL_*.dll多个 ...