ExtJS4開發筆記 二 框架的搭建

2021-05-27 19:37:43 字數 2535 閱讀 7668

廢話不多說了,上篇文章建立了比較基礎的檔案。今天開始搭建大體的框架,由於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...