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