ExtJS4.2學習(一)Ext自訂類

最後更新：2013-12-29 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

650) this.width=650;" width="203" height="72" src="http://www.bkjia.com/uploads/allimg/131229/12255K1B-0.jpg" border="0" style="margin:0px;padding:0px;border:medium none;line-height:1.6em;" alt="57ed1fc60469de81f5fc732e2aaf02f0.jpg" />

晚上看書的感悟：學習轉化為能力的過程：學習-複習-體會-實踐-理解-能力。不要以為自己夠聰明，其實學習只能記住20%，複習記住30%，體會得到40%，實踐得出50%，理解得到60%，理解了70%後轉換為能力的才有80%。智慧才是力量，因為智慧對行動的影響更大。將知識變成智慧地過程常常是一個痛苦的過程。
好了，言歸正傳，我們開始學習ExtJS4.2需要的JS包可以從官網下載，這裡不多說。這裡為什麼先說資料基本方式，不要覺得無聊，因為只有這些最重點弄懂了，其他的一些屬性用到的時候查下就好了。
1、建立一個新類

//demo 01 Ext.define('demo.Demo',{     name:'ThinkDiary',     hello:function(){         return 'Hello'+this.name;     } }); //demo 02 Ext.define('demo.DemoWindow',{     extends:'Ext.Window',     title:'demo hello',     initComponent:function(){ //初始化         Ext.apply(this,{//將一批屬性複製給當前對象             items:[{                 html:'panel1'             },{                 html:'panel2'             }]         });         this.callParent();//快捷調用父類函數     },     mixins:['demo.Demo'], //多重繼承     config:{ //協助工具功能屬性         title:'demo'     },     statics:{ //定義靜態成員         TYPE_DEFAULT:0     },     constructor:function(){ //自訂初始化建構函式，先執行此再執行initComponet         //do something init     } });

我們在外部可以這樣調用new demo.DemoWindow();
這樣更傾向於面向對面的思想了，這正是4.2的新特性之一，下面來個例子：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Hello Extjs4.2</title> <link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet"> <!-- <script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script> --> <script src="../ExtJS4.2/ext-all.js"></script> <script type="text/javascript"> /* Start ExtJS 中自訂類 **/ Ext.define("Person", {     Name: '',     Age: 0,     Say: function (msg) {         Ext.Msg.alert(this.Name + " Says:", msg);     },     constructor: function (name, age) {         this.Name = name;         this.Age = age;     } }); Ext.onReady(function(){     var Tom = new Person("束洋洋", 22);     Tom.Say("你好，ExtJs4.2"); }); /* END ExtJS 中自訂類 **/       </script> </head> <body> <h1>我的ExtJS4.2學習之路</h1> <hr /> 作者：束洋洋 開始日期：2013年10月29日 00:51:00 <h2>第二個例子：ExtJS 中自訂類</h2> </body> </html>

彈出效果：
650) this.width=650;" width="700" height="447" src="http://www.bkjia.com/uploads/allimg/131229/12255H4H-1.jpg" border="0" style="margin:0px;padding:0px;border:medium none;line-height:1.6em;" alt="b24bdcf63a7dcb700c760878c1f710f8.jpg" />

連載中，請大家繼續關注！本文出自我的個人網站思考者日記網

本文出自 “On My Way” 部落格，請務必保留此出處http://shuyangyang.blog.51cto.com/1685768/1328232

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More