无废话ExtJs 入门教程二十一[继承：Extend]

无废话ExtJs 入门教程二十一[继承：Extend]

extjs技术交流，欢迎加群（201926085)

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

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.效果如下：

转载请注明出处：http://www.cnblogs.com/iamlilinfeng

活到老,学到老,练到老...