无废话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
相关推荐
lupeng 2020-11-14
sjcheck 2020-11-10
sjcheck 2020-11-03
meylovezn 2020-08-28
owhile 2020-08-18
Francismingren 2020-08-17
pythonclass 2020-07-29
sunzhihaofuture 2020-07-19
爱读书的旅行者 2020-07-07
行吟阁 2020-07-05
tianqi 2020-07-05
行吟阁 2020-07-04
冰蝶 2020-07-04
lyg0 2020-07-04
owhile 2020-07-04
opspider 2020-06-28
lengyu0 2020-06-28
tianqi 2020-06-21
dadaooxx 2020-06-16