朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
在開發中，我們在使用視圖組件時，經常要設置寬度，高度，標題等屬性。而這些屬性可以通過“繼承”定義在我們定義的新組件中，從而達到重用的目地。
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.效果如下：
