廢話不多說了,上篇文章建立了比較基礎的檔案。今天開始搭建大體的框架,由於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版本為extjs4.02a以下版本,則不需要任何改動。完全可以顯示完整框架。
ext.loader.setconfig();
name: 'sms',
autocreateviewport: true,
controllers: [
'main'
] });
設定。
Extjs4開發筆記(一) 準備工作
重寫原因 由於開始準備的時候,就是按照傳統開發去做的,寫了一部分之後,有和同事提出 為什麼不用mvc模式 呢?這樣的問題讓我對目前傳 統開發的心發生了一些細微變法,對啊,為什麼不用mvc模式呢?我徵求了一下同事及熱心的意見,都同意使用mvc模式開發。從而,我刪掉了原來所有目 錄,重新按照mvc模式去...
ExtJS4學習筆記 一 window的建立
extjs4,建立ext元件有了新的方式,就是ext.create 而且可以使用動態載入js的方式來加快元件的渲染,我們再也不必一次載入已經達到1mb的ext all.js了,本文介紹如何在extjs4中建立乙個window。編者注 修正於2011 7 8 中所有ext.window應該是ext.w...
Extjs4開發中的一些問題
1.子frame重新整理的問題 一般在jsp裡面,要實現介面跳轉,有很多方法,最典型的就是window.location.href href 但是在巢狀有iframe框架的頁面布局,使用上述語句,只會使iframe本身實現跳轉,如果遇到session超時,而進入登入介面的時候,也會使登入介面顯示在i...