分類  >  Web前端 >

EXT-基礎概念小結(基於Ext4.2.1)

tags:    時間:2013-12-09 23:22:08
EXT--基礎概念總結(基於Ext4.2.1)

1. Ext.application
2. Ext.onReady()
3. Ext.define()
4. Ext.data.proxy.Proxy
5. Ext的組合屬性-mixins
6. Ext.create()
7. Ext.ComponentQuery、refs:
8. Init: function(){}
9. Ext.Class.alias
10. Ext.AbstractComponent -> xtype
11. this.callParent(arguments)
12. Ext.data.Model.validations: 合法性驗證
13. 動態類載入

 

 

//指定Ext Framework 類載入路徑 Ext.Loader.setConfig({enabled:true, paths:{Hongbo:"app"}});  Ext.application( {     //定義一個全局命名空間 Hongbo     name: 'Hongbo',  //自動創建一個 Hongbo.view.Viewport 實例目標直接對應app/view/目錄下的//Viewport.js     autoCreateViewport: true,      controllers:     [         'frame.C_Frame'//#C_Frame#2013/07/01 指定控制器     ] }); 

 



 

 

 

<script type="text/javascript"> 	var fn = function() 	{ 		alert("此用戶的名字是:" + this.name); 	} 	var user = { 		name : "屌緦周" 	} 	Ext.onReady(fn , user); </script> 

 

 



 

<script type="text/javascript">     Ext.define("Hongbo.Person" ,             // 該對象用於為Hongbo.Person類指定屬性             {                 name:"匿名",                 age:0,                 walk:function()                 {                     alert(this.name + "正在慢慢地走...");                 }             }, function() // 指定類創建成功的回調函數             {                 alert("Hongbo.Person類創建成功!");                 // 該回調函數中的this代表了Hongbo.Person類本身                 alert(this.self == Hongbo.Person.Class);             });     var p = new Hongbo.Person();     p.walk(); </script> 

 



 

Ext.define("MyClass.A", {      showA: function(){           console.log("A");      } }); Ext.define("MyClass.B", {      showB: function(){           console.log("B");      } }); Ext.define("MyClass.C", {      mixins: {           classA: "MyClass.A",           classB: "MyClass.B"      },      showC: function(){           console.log("C");      } }); var objC = Ext.create("MyClass.C"); objC.showA(); // 控制台結果:A objC.showB(); // 控制台結果:B objC.showC(); // 控制台結果:C 

 



 

<script type="text/javascript"> Ext.define("Hongbo.User", 	{ 		// 定義靜態成員,這些靜態成員可以被子類繼承 		config: { 			name:"fkjava", 			password:"8888" 		}, 		// 定義構造器,直接接受config指定的選項 		constructor: function(cfg)  		{ 			this.initConfig(cfg); 		} 	}); // 創建一個Hongbo.User對象 var user = Ext.create("Hongbo.User", 	{ 		name: "屌緦周", 		password: "1234" 	}); alert(user.name + "-->" + user.password); </script> 

 



 



 

 

Ext.define('MyApp.CoolPanel', {     extend: 'Ext.panel.Panel',     alias: ['widget.coolpanel'],     title: 'Yeah!' });  // Using Ext.create Ext.create('widget.coolpanel');  // Using the shorthand for defining widgets by xtype Ext.widget('panel', {     items: [         {xtype: 'coolpanel', html: 'Foo'},         {xtype: 'coolpanel', html: 'Bar'}     ] }); 

 



 

items: [      Ext.create('Ext.form.field.Text',      {          fieldLabel: 'Foo'      }),      Ext.create('Ext.form.field.Text',      {          fieldLabel: 'Bar'      }),      Ext.create('Ext.form.field.Number',      {          fieldLabel: 'Num'      })  ] 上面的創建方式改用:xtype   items: [      {          xtype: 'textfield',          fieldLabel: 'Foo'      },      {          xtype: 'textfield',          fieldLabel: 'Bar'      },      {          xtype: 'numberfield',          fieldLabel: 'Num'      }  ] 

 

 



 

Ext.define("Patient",  {     extend: "Ext.data.Model",     fields:      [          {name:'id'},         {name:'dwdm'},    //單位代碼         {name:'dwccm'},  //單位層次碼         {name:'dwqc'}     ],     validations:      [         {             field: "age",              type: "presence"         },          {             field: "name",              type: "presence"         },          {             field: "name",              type: "length", min: 2, max: 60         },          {             field: "name",              type: "format", matcher: /([a-z ]+)/         },          {             field: "gender",              type: "inclusion", list: ['M', 'F']         },          {             field: "weight",              type: "exclusion", list: [0]         },         {             field: "email",              type: "email"         }     ] });     var p = Ext.create("Patient",      {         name: "L",         phone: "9876-5432",         gender: "Unknown",         birthday: "95/26/1986"     });      var errors = p.validate();     errors.isValid(); 

 



 



 

 

 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網