廢話不多說了，上篇文章建立了比較基礎的檔案。今天開始搭建大體的框架，由於extjs4在元件建立方面有了很大的改變，所以第一次建立的框架頁面還是費了比較長的時間。本章內容增加了一些及css檔案，目的是為了美化整個介面。增加的css檔案：
而頭部、選單、內容區及底部則完全分離成4個js檔案，我們將先實現這幾個檔案的基礎功能，之後我們會慢慢完善這些元件。而整個頁面的填充，也使用 乙個js檔案來完成。也許有人會問，這麼多檔案，是不是要都在index.html中引入啊。這樣想的話，就錯了哦。因為我們使用的是extjs4，所以 我們一定要使用extjs4動態載入功能。
先來看下自定義css（sytle.css）：
#header
#header h1
.tabs{}
.tabs
.manage
.home
.icon-menu
搭建的框架是經典的extjs布局模式，如圖所示：
"-//w3c//dtd xhtml 1.0 transitional//en"
"">
"">
ext.loader.setconfig();
name: 'sms',
controllers: [
'main'
] });
稍做解釋：
ext.loader.setconfig();//意思是開啟ext.loader。ext.loader是動態載入的核心哦。。
配置中的name，我理解為是extjs3.x、extjs2.x中的命名空間。
main.js：
ext.define('sms.controller.main',
})
整理下思路，由於extjs4自動載入了view/viewport.js，而viewport.js檔案包含了頭部、選單、內容區及底部這4個元件，那麼我們必須先完成這4個檔案的編寫，同樣，由於這4個檔案是介面型的，我們將這4個檔案都放到view資料夾下。
view資料夾下共5個js檔案，分別為：
header.js、menu.js、south.js、tabpanel.js及viewport.js
這5個js檔案的作用，我們一一介紹。
header.js：這個是頭部，也就是深藍色底子。白色字型，那塊，上面寫著員工管理系統。
**為：
ext.define('sms.view.header', );
this.callparent(arguments);
} });
menu.js:
ext.define('sms.view.menu',);
this.callparent(arguments);
} })
treepanel並沒有載入選單項，關於extjs4 tree，我們後面會介紹。
tabpanel.js：
ext.define('sms.view.tabpanel',,
activetab: 0,
border: false,
//plain: true,
items:
});
this.callparent(arguments);
} })
south.js：
ext.define('sms.view.south',);
this.callparent(arguments);
} })
檔案都建立好了。我們進行最後一部，布局。
viewport.js：
ext.define('sms.view.viewport',]
});
me.callparent(arguments);
} })
重點：requires屬性，這個我理解為建立引用。稍懂程式語言的人應該都明白。但是光引用還不夠，我們還需要去例項化它，也就是ext.create。至此，我們的框架已經順利搭建完畢。
今天的工作也就是這麼多，搭建完框架之後，會慢慢豐富整個系統。本來想連選單的樹也完成，最後想了想，這工作還是留到明天吧。因為樹涉及到了非同步獲取，需要有服務端程式，今天弄好框架之後，把服務端**寫好了，明天來完成這棵樹的實現吧。
需要注意的一點，在extjs4中，只要定義了布局為border，那麼他的items中必須要有region: 'center'的元件，否則將會提示錯誤。貌似在extjs3.x甚至是以前的版本都沒發現有這樣的要求，因為這個，費了老大的勁才調整過來，再一看，**全部變了，已經跟extjs3.x的風格完全不同了。令人欣喜的是，現在的**完全符合extjs4的風格，也完全符合我的預期。
好了，本章內容就結束了。下篇文章，將實現選單的功能。敬請期待。
學習Extjs4 2 1 簡單視窗
ext中的展現基本都需要視窗的支援，渲染點 技術點比較多，別擔心，慢慢搞定她。這裡先展示乙個簡單的視窗。一 簡單視窗 1 ext.require 23 ext.onready function 19items 40 41 42 43 btna1.dom.disabled true 44 if win...
Extjs學習筆記 （二）
1.配置實用extjs extjs resources css ext all.css rel stylesheet 注 bootstrap.js的作用是用於 自動載入ext all debug.js或者ext all.js 如果實用localhost或者ip的話，將啟動ext all debug，...
Extjs學習筆記 （二）
1.配置實用extjs extjs resources css ext all.css rel stylesheet 注 bootstrap.js的作用是用於 自動載入ext all debug.js或者ext all.js 如果實用localhost或者ip的話，將啟動ext all debug，...