首先，我們來看看效果，這是需要實現的東東，經典布局，好吧，我承認，這玩意已經被做爛了，但是還是寫寫，記錄下吧，高手略過哦。我不打算寫什么分步的教程，教你如何去使用控件，我們的目標只有一個，實現功能，並且我們的時間不多，畢竟時間寶貴，4天完成，后台我采用php(兩天學的)，兩天寫ext后台(其實還有個前台界面，那個就不說了)。
好了，第一天，我們先准備下工具:
1、Sublime_text2 不得不說的編輯器，相當牛掰。
2、PremiumSoft 不說了，一個很不錯的數據庫工具，放棄phpmyadmin吧
3、ExtJs庫，在這里我講的將是extjs 3.4庫，extjs 4.0.7千萬別用，不然哭了可不要說我沒提醒，4.1沒用過不發表意見，總體，我認為extjs4這個版本的開發效率提高了不少，但是運行效率還是省省吧，不過extjs有個問題，越高的版本對ie6支持就越差勁，所以，如果你有ie6的客戶，別選太高的版本，
好了，我們需要准備的就這么多了，php就是簡單啊，難怪asp.net不能獨步啊。
我們正式開始，按照我的習慣，我喜歡先把程序的原型做出來,那么第一步，我們來認識一下viewport這個元素。
ViewPort,ExtJs用來提供的布局管理器，類似於winform中的dock布局，一個簡單的例子，看起來像這樣：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--ext css--> <link rel="stylesheet" type="text/css" href="..//Jscript/resources/css/ext-all.css" /> <script type="text/javascript" src="..//Jscript/ext-base.js"></script> <script type="text/javascript" src="..//Jscript/ext-all.js"></script> <script type="text/javascript" src="..//Jscript/locale/ext-lang-zh_CN.js"></script> </head> <body> <script type="text/javascript"> //在ext 4以前的版本中這個非常重要，不然會引起界面的混亂 Ext.BLANK_IMAGE_URL = '/jscript/resources/images/default/s.gif'; //Ext的標准提示初始化，當然沒有它也可以 Ext.QuickTips.init(); //很熟悉吧，Jquery(document).ready(); ^^ Ext.onReady(function () { var north = new Ext.Panel({ id:'south', html : '<div>這里是我們的管理系統標題哦</div>', bodyStyle: 'background:#133984;padding:20px', height : 60, region : 'north', split : false //禁止拖動 }); var south = new Ext.Panel({ id : 'north', html : '<div style="text-align:center">這里是版權哦</div>', region : 'south', split : false }); var west = new Ext.Panel({ id : 'west', html : '<div>這里是樹導航哦</div>', width : 200, region : 'west', split : 'true' }) var content = new Ext.Panel({ id : 'center', html : '這里是主體內容哦', split : 'true', region : 'center' //這里是最重要的，在4版本后如果沒有center渲染會報錯的 }); var view = new Ext.Viewport({ layout:'border', items : [north,south,west,content] }) }) </script> </body> </html>
這樣，你看到的樣子應該是這樣的：
在這里，有幾點提示：
1、大家最好引入html的dtd文件，防止出現莫名的錯誤。
2、設定meta為utf8，亂碼了別哭哦。
3、大家最好去下載extjs的幫助文檔，如果找不到的話，在文章的最后提供給大家下載，如何去看這個幫助文檔很重要。
接下來，有幾個注意獻給大家講下：
1、在extjs中，如果一個控件有items屬性，那么可以簡寫成這樣，類似於下面提供的樣子：
(當然，中括號有問題，自己補全下哦^^)
我們要說的是，在items中每個{}號代表一個panel，如果你不加xtype屬性的話。
好了，第一大步已經完成了，下面給大家介紹重量級控件，tree控件，鼓掌~~~~~。
我們就不在這里給大家寫什么靜態樹了，直接來ajax加載，接上面viewport。
tree的根節點是一個異步節點，名字叫做Ext.tree.AsyncTreeNode，大家可以在api文檔中自行查找，建立的方式看起來是這個樣子的：
解釋下這段代碼的結構：
1、id：這個是要像服務器去取值的，必填屬性。
2、text：顯示出來給大家看的，必填屬性。
3、leaf ： 是否是葉節點，必填屬性，這個如果不填，那么前面的小圖標會不對的。
改寫我們viewport的west段代碼，使其看起來像這樣：
ok，我們的樹做完了，相當easy吧，這樣子，這棵樹就已經是一顆ajax tree了，但是注意哦，后台需要返回的數據是由格式需求的，他們看起來大概是這樣的：
[{"id":true,"text":"網站首頁","leaf":false},{"id":"2","text":"xxxxx","leaf":false}]
注意看其格式，不然的話會顯示出五花八門的錯誤。
好了，今天就先到這里吧，下課。
哦，忘記了，好像要上傳文件的，api在這里哦