被遺忘的瞇瞇: ExtJS

顯示具有 ExtJS 標籤的文章。顯示所有文章

ExtJS 基本介紹 - 7. Data Model&Data Access

ExtJS的資料模型與資料處理結構主要元件有三:

Model - 負責定義描述資料結構,變數名稱與資料型態{auto,string,int,float,date,bool}.
Proxy - 負責描述與後端Server Side溝通方式{ajax,json,direct}與對應url.
Store - 負責Model集合資料處理{sort/filter/groupping}.

ExtJS 基本介紹 - 6. Layout&Container

官方提供基本11種,客製化1種共12種Layout方式:

官方Sample 網址

Absolute: 將視窗以CSS絕對位置定位其x,y座標.

Accordion:以手風琴面板的方式顯示,堆疊多個title/html的items.

Anchor:利用anchor與height分別定義視窗width/height,或直接由anchor定義寬高.anchor數值可以為整數或Container的百分比.當anchor為負值時以container-anchor數值為顯示寬度.

Border:允許以區域方式{left,right,top,bottom,center}分配多個container空間.

TabPanel:Tab Panel的Layout方式.

Card:類似精靈模式(Warizad)的排版方式.

Column:以column方式依序定義container空間.

Fit:填滿parent container空間.

Table:以table row/column的方式定義container,允許使用rowspan/colspan來跨cell定義container.

vBox:垂直Stack方式定義Container.

hBox:水平Stack方式定義Container.

Center:特殊定位方式,至於parent center位置.

ExtJS 基本介紹 - 5. MVC Architecture

此篇文章主要參考ExtJS官方網站文件後記錄,因此圖形與內容有部分直接引用官網資料.

ExtJS是利用MVC-like的一套Application Architecture,用以組織(或者說限制)你的程式碼,同時也提供現成的功能來輔助開發,降低寫程式的量.

Model - 在此定義成一個資料集合,在此模組內能夠保存資料提供其他模組或其他Model引用.
View - 所有的Components (Grid,Tree,Panel...).
Control - 由Programming負責開發Application運作邏輯與控制Model/View.

ExtJS架構的優點:

所以Application運作方式皆採用相同手法,只需要入門就都適用.
很容易分享程式碼,因為手法相同.
可以利用ExtJS Builder Tool最佳化程式.

ExJS MVC 檔案結構:

MVC Example:

設計一個User列表Grid畫面,在連擊Item Row的時,開啟編輯視窗提供修改,並且在點選儲存時,以JSON方式呼叫Server端.

在上述的設計架構下,需分別定義:

Model - 設計User結構.

View - 設計List畫面、Edit畫面.

Store - 設計與Server端溝通(JSON)與對應網址.

Control - 將UI畫面與Model進行綁定,並讓UI事件設計如何呼叫Store,以取得/更新Server Side資料.

ExtJS 基本介紹 - 4. ExtJS 4.0 Class System

官方的Class System很簡單扼要的把UI跟事件切割乾淨,並利用mixin的方式組合出所需的元件.

以Windows元件來看關係圖:

1. Windows是Panel的延伸功能,Panel為基礎元件延伸,並混入觀察者介面以便取得UI Event.

2. Window擴充UI功能,允許變更視窗大小(Resizeable)、允許拖曳(Draggable).

ExtJS 基本介紹 - 3. Exception Handling

Exception Sample:
`Ext.define('NewClass', {`
`constructor: function() {`
`throw new Error('[' + Ext.getDisplayName(arguments.callee) + '] constructor Error');`
`return this;`
`}`
`});`
`var A1 = Ext.create('NewClass', 'A1');`
用Google Chrome程式開發工具查看Exception顯示結果:

ExtJS 基本介紹 - 2. class宣告方式

ExtJS 3.3以前支援的宣告方式:
namespace宣告方式:
Ext.namespace('My.cool'); `Ext.ns('My.cool');        // ns是namspace的別名`

class宣告方式:
`var MyWindow = Ext.extend(Object, { ... });`
`My.cool.Window = Ext.extend(Ext.Window, { ... }); // My.cool需先定義好`
ExtJS 4新增的宣告方式:
namespace宣告方式:
使用新的定義方式Ext.define時,會自動宣告.
class宣告方式:
`Ext.define(className, members, onClassCreated);`

class繼承宣告方式:
`Ext.define(`className`, {`
`extend: parentClassName,`
`...`
`});`
class Mixins: 混合複數classes.
可以利用class.mixins.xxxx分別指定使用的class內容,或直接呼叫.
`Ext.define('CanPlayGuitar', {`
`playGuitar: function() {`
`alert("F#...G...D...A");`
`}`
`});`

`Ext.define('CanSing', {`
`sing: function() {`
`alert("I'm on the highway to hell...")`
`}`
`});`

`Ext.define('CoolPerson', {`
`extend: 'Person',`

`mixins: {`
`canPlayGuitar: 'CanPlayGuitar',`
`canSing: 'CanSing'`
`},`

`sing: function() {`
this.mixins.canSing.sing.call(this);
`this.playGuitar();`
`}`
`});`

`var me = new CoolPerson("Jacky");`

`me.sing();`
`// alert("I'm on the highway to hell...");`
// alert("F#...G...D...A");
class靜態變數宣告:
class定義時,statics關鍵字下定義之Varibles/Method皆為靜態變數.
`Ext.define('Computer', {`
  `statics: {`
  `instanceCount: 0,`
  `factory: function(brand) {`
`// 'this' in static methods refer to the class itself`
`return new this({brand: brand});`
`}`
`},`
`config: {`
`brand: null`
`},`
`constructor: function(config) {`
`this.initConfig(config);`
`// the 'self' property of an instance refers to its class`
  `this.self.instanceCount ++;`
`return this;`
`}`
`});`
`var dellComputer = Computer.factory('Dell');`
ExtJS 4新增的Config設定
ExtJS4在建置Class時,新增一Config屬性,提供封裝一些預設值資料,在Config陣列內定義ConfigItem Array.並在產生class時,如尚未於class定義apply+ConfigItem同名method下,自動產生ConfigItem之處理程式(set/get/apply三種).如需自行客製化時,則自行設計同名function:{set/get/apply}+ConfigName.

`Ext.define('My.own.Window', {`
`/** @readonly */`
`isWindow: true,`
  `config: {`
  `title: 'Title Here',`
  `bottomBar: {`
`enabled: true,`
`height: 50,`
`resizable: false`
`}`
`},`
`constructor: function(config) {`
`this.initConfig(config);`
`return this;`
`},`
`applyTitle: function(title) {`
`if (!Ext.isString(title) || title.length === 0) {`
`alert('`title沒有定義`');`
`}`
`else {`
`return title;`
`}`
`},`
`applyBottomBar: function(bottomBar) {`
`if (bottomBar && bottomBar.enabled) {`
`if (!this.bottomBar) {`
`return Ext.create('My.own.WindowBottomBar', bottomBar);`
`}`
`else {`
`this.bottomBar.setConfig(bottomBar);`
`}`
`}`
`}`
`}); var myWindow = Ext.create('My.own.Window', {`
`title: 'Hello World', bottomBar: { height: 60 } }); alert(myWindow.getTitle());       // alerts "Hello World"`
`myWindow.setTitle('測試TITLE');`
`alert(myWindow.getTitle());         // alerts "測試TITLE"`
`myWindow.setTitle(null);            // alerts "title沒有定義"`
`myWindow.setBottomBar({ height: 100 }); // height=100`

ExtJS4 Class 載入之定義順序:

如圖所示: Class從Define開始,先由Loader負責載入相依Class(Dynamic loading),在繼承定義之Class(Extend關卡),並進行混和動作(Mixins),與執行Class所定義之Config,經過Statics變數定義後,class進入ready狀態.在後續經過alias(別名)/legacy(舊語法支援)後,classs定義完成.

ExtJS 基本介紹 - 1. 命名規則

ExtJS Class system設計目標在維持嚴謹的Class-based System,且不放棄Javascript原本所具備之動態相容性,在兩者之間去蕪存菁,以期創造一套簡單易學、容易開發、容易除錯、良好相容性、良好擴充性與好維護的架構.

ExtJS的class命名規則:

class名稱允許為{英文字母,數字},但是建議少用數字命名.不允許使用其他特殊符號(如: '_','-',...).

最上層namespace與class名稱皆採用Pascal Casting,其他階層的namespace採用Camel Casting,單字縮寫也請遵循此Naming Rule.

MyCompany.useful_util.Debug_Toolbar (X) - 包含特殊符號

MyCompany.util.Base64

MyCompany.data.CoolProxy

MyCompany.Application

MyCompany.form.action.AutoLoad

Ext.data.JsonProxy

Ext.data.JSONProxy (X) - JSON未遵循Camel Casting

MyCompany.util.HtmlParser

MyCompary.parser.HTMLParser (X) - HTML未遵循Camel Casting

MyCompany.server.Http

MyCompany.server.HTTP (X) - HTTP未遵循Camel Casting

	:Top-Level namespace
	:Class name

Pascal Casting: 開頭大寫,單字與單字之間第一個字母為大寫.

Camel Casting: 開頭小寫,單字語單字之間第一個字母為大寫.

ExtJS的js置放規則:

class命名規則會決定js檔置放位置:

ext.js -> web/ext/ext.js

Ext.util.Observable -> web/ext/src/Ext/util/Observable.js

Ext.form.action.Submit -> web/ext/src/Ext/form/action/Submit.js

MyCompany.chart.axis.Numeric -> web/ext/src/MyCompany/chart/axis/Numeric.js

ExtJS的Method/Varibles/Property命名規則:

Method/Varibles/Property名稱允許為{英文字母,數字},但是建議少用數字命名.不允許使用其他特殊符號(如: '_','-',...).
Method/Varibles/Property採用Camel Casting方式命名.
Property特殊命名規則,當靜態變數採用全大寫命名.

Ext.MessageBox.YES = "Yes"

Ext.MessageBox.NO = "No"

MyCompany.alien.Math.PI = "4.13"

ExtJS 基本介紹 - 0. 結構與第一個範例

- appname // app目錄

- app // 自訂classes

- namespace

- Class1.js

- Class2.js

- ...

- extjs // extsdk位置

- resources // ext所需之css/image等

- css

- images

- ...

- app.js // 此系統的js

- index.html // 網頁進入點

引用extJS的方法:

ext-debug.js - 只載入ext core classes,以個別檔案方式動態載入自製classes,以利debug.
ext.js - 只載入ext core classes,利用deployment建議整合自製classes形成一個app-all.js提升效率.
ext-all-debug.js - 載入ext完整classes,以個別檔案方式動態載入自製classes,以利debug.
ext-all.js - 載入ext完整classes,利用deployment建議整合自製classes形成一個app-all.js提升效率.

Hello Ext Example:

HTML:

<html>

<head>

<title>Hello Ext</title>

</head>

<body>

</body>

</html>

app.js:

Ext.application({

name: 'HelloExt',

launch: function () {

Ext.create('Ext.container.Viewport', {

layout: 'fit',

items: [

{

title: 'Hello Ext',

html: 'Hello! Welcome to Ext JS.'

}

]

});

}

});

Result:

Deployment: Sencha SDK Tools允許將ExtJS Application依據js檔案之相依關係產生JSB3(JSBuilder file format)檔案.讓只包含application所需的程式碼.

1. 產生jsb檔描述該網頁使用classes相依狀態.

sencha create jsb -a index.htm -p app.jsb3

2. 依賴jsb3檔案產生all-classes.js,app-all.js檔案.

sencha build -p app.jsb3 -d .

all-classes.js: debug使用,內含所有使用到的classes但未最佳化.
app-all.js:最佳化使用到之classes,適合產品化出廠使用.此版本=all-classes.js+app.js

HTML網頁可變更為:

<html>

<head>

<title>Hello Ext</title>

</head>

</html>

ExtJS介紹

ExtJS: Ext JS 4 JavaScript Framework for Rich Apps in Every Browser,清楚點明ExtJS它是一套針對跨瀏覽器RIA的JavaScript Framework,既然稱之為framework就表示有規範去限制開發方式,而能夠產品化開始收費,也表示此架構的已經有足夠的完整性與完善程度.

慢慢了解ExtJS的設計後,可以確定的是ExtJS是用一套比較嚴謹的物件導向設計JavaScript.這對於原本開發方式鬆散的javascript來說,我個人覺得是兩面刀:

優點 - 在嚴謹的物件導向架構下,系統的維護與穩定度會將對維質在比較高的水平,再擴充系統的同時也比較容易避免物件之間衝突,適用於企業級系統的Solution.
缺點 - 開發小系統會有點拿大砲打小鳥的疑慮,且當ExtJS沒有適合(不熟悉或真的沒有)的解決方案時,跨出架構去設計其他解決方案時,容易把系統怪獸化,以容易讓原本小問題變成大麻煩,不是要開發企業級系統時,是不是要導入ExtJS就需要評估一下.

ExtJS使用的前置動作

1. 官方網站: http://www.sencha.com/

2. 下載位置: http://www.sencha.com/products/extjs/download/,填入自己的Mail取得Commercial版本,我沒有使用GPLv3授權的版本來測試,目前最新版本為Ext JS 4.

3. 線上文件: http://docs.sencha.com/ext-js/4-0/

支援瀏覽器:

Internet Explorer 6+

FireFox 1.5+ (PC, Mac)
Safari 3+
Chrome 3+
Opera 9+ (PC, Mac)

sheauren的ExtJS記錄

最近開始學習ExtJS,我把心得記錄在這邊,分享給大家.

訂閱：文章 (Atom)

ExtJS的資料模型與資料處理結構主要元件有三:

官方提供基本11種,客製化1種共12種Layout方式:

此篇文章主要參考ExtJS官方網站文件後記錄,因此圖形與內容有部分直接引用官網資料.

ExtJS架構的優點:

ExJS MVC 檔案結構:

MVC Example:

Exception Sample:Ext.define('NewClass', { constructor: function() { throw new Error('[' + Ext.getDisplayName(arguments.callee) + '] constructor Error'); return this; }});var A1 = Ext.create('NewClass', 'A1');用Google Chrome程式開發工具查看Exception顯示結果:

Exception Sample:

用Google Chrome程式開發工具查看Exception顯示結果:

ExtJS 3.3以前支援的宣告方式:

namespace宣告方式:

class宣告方式:

ExtJS 4新增的宣告方式:

namespace宣告方式:

class宣告方式:

class繼承宣告方式:

class Mixins: 混合複數classes.

class靜態變數宣告:

ExtJS 4新增的Config設定