這一節(jié)為主界面加一個頂部區(qū)域和底部區(qū)域。一個管理系統(tǒng)的界面可以粗分為頂部標題部分、中間數(shù)據(jù)展示和處理的部分、底部備注和狀態(tài)部分。

在增加這二個區(qū)域之前，我們先在MainModel.js中加入一些數(shù)據(jù)。

1 Ext.define('app.view.main.MainModel', { 2 extend: 'Ext.app.ViewModel', 3 4 alias: 'viewmodel.main', 5 6 data: { 7 name: 'app', 8 9 // 系統(tǒng)信息 10 system: { 11 name: '工程項目合同及資金管理系統(tǒng)', 12 version: '5.2014.06.60', 13 iconUrl: '' 14 }, 15 16 // 用戶單位信息和用戶信息 17 user: { 18 company: '武當太極公司', 19 department: '工程部', 20 name: '張三豐' 21 }, 22 23 // 服務(wù)單位和服務(wù)人員信息 24 service: { 25 company: '無錫熙旺公司', 26 name: '蔣鋒', 27 phonenumber: '1320528----', 28 qq: '78580822', 29 email: 'jfok1972@qq.com', 30 copyright: '熙旺公司' 31 } 32 } 33 // TODO - add data, formulas and/or methods to support your view 34 });

?

在上面的代碼中，在data中增加了三個類型的數(shù)據(jù)，下面分別有些屬性。這些值和屬性以后可以從后臺獲得。比如說后臺的系統(tǒng)名稱改過了，前臺刷新一下界面，就能展示新的system.name。這也符合我這個系統(tǒng)的開發(fā)宗旨，能夠動態(tài)的信息盡量動態(tài)化，修改的時候只要在前臺配置就可以，不要去修改后臺的js或java代碼。

下面在main的目錄下加入二個文件，分別為Top.js和Bottom.js。目錄結(jié)構(gòu)如下：

Top.js定義了一個類，其類名為‘a(chǎn)pp.view.main.region.Top’，注意其類名的前面和其路徑是一致的。extjs的類加載機制就是根據(jù)類名來找到具體的類文件在哪里的。

1 /** 2 * 系統(tǒng)主頁的頂部區(qū)域，主要放置系統(tǒng)名稱，菜單，和一些快捷按鈕 3 */ 4 Ext.define('app.view.main.region.Top', { 5 6 extend: 'Ext.toolbar.Toolbar', 7 8 alias: 'widget.maintop', // 定義了這個組件的xtype類型為maintop 9 10 items: [{ 11 xtype: 'image', 12 bind: { // 數(shù)據(jù)綁定到MainModel中data的ystem.iconUrl 13 hidden: '{!system.iconUrl}', // 如果system.iconUrl未設(shè)置，則此image不顯示 14 src: '{system.iconUrl}' // 根據(jù)system.iconUrl的設(shè)置來加載圖片 15 } 16 }, { 17 xtype: 'label', 18 bind: { 19 text: '{system.name}' // text值綁定到system.name 20 }, 21 style: 'font-size : 20px; color : blue;' 22 }, { 23 xtype: 'label', 24 bind: { 25 text: '{system.version}' 26 } 27 }, '->', { 28 text: '菜單', 29 menu: [{ 30 text: '工程管理', 31 menu: [{ 32 text: '工程項目' 33 }, { 34 text: '工程標段' 35 }] 36 }] 37 }, ' ', ' ', { 38 text: '主頁' 39 }, { 40 text: '幫助' 41 }, { 42 text: '關(guān)于' 43 }, { 44 text: '注銷' 45 }, '->', '->', { 46 text: '設(shè)置' 47 }] 48 49 });

?

上面是Top.js類的定義，這是一個toolbar控件，里面加入了一些label和Button,用于顯示系統(tǒng)名稱以及用來實現(xiàn)一些操作。toolbar的items下默認的xtype是Button。源代碼的注釋里面也寫入了如何綁定到MainModel 的數(shù)據(jù)的備注。

下面是Button.js的代碼：

1 /** 2 * 系統(tǒng)主頁的底部區(qū)域，主要放置用戶單位信息，服務(wù)單位和服務(wù)人員信息 3 */ 4 Ext.define('app.view.main.region.Bottom', { 5 6 extend: 'Ext.toolbar.Toolbar', 7 8 alias: 'widget.mainbottom', 9 10 items: [{ 11 bind: { 12 text: '使用單位:{user.name}' 13 } 14 }, { 15 bind: { 16 text: '用戶:{user.name}' 17 } 18 }, '->', { 19 bind: { 20 text: '服務(wù)單位:{service.company}' 21 } 22 }, { 23 bind: { 24 text: '服務(wù)人員:{service.name}' 25 } 26 }, { 27 bind: { 28 text: 'tel:{service.phonenumber}' 29 } 30 }, { 31 bind: { 32 hidden: '{!service.email}', // 綁定值前面加！表示取反，如果有email則不隱藏，如果email未設(shè)置，則隱藏 33 text: 'eMail:{service.email}' 34 } 35 }, { 36 bind: { 37 text: '?{service.copyright}' 38 } 39 }] 40 });

?

至此要加入的二個js文件已經(jīng)就緒，現(xiàn)在我們要把他們放到Main的主頁面之中。Main.js也需要修改一下，需要引入上面這二個類，以及把他們放到items下，并設(shè)置好位置。

1 /** 2 * This class is the main view for the application. It is specified in app.js as 3 * the "autoCreateViewport" property. That setting automatically applies the 4 * "viewport" plugin to promote that instance of this class to the body element. 5 * 6 * TODO - Replace this content of this view to suite the needs of your 7 * application. 8 */ 9 Ext.define('app.view.main.Main', { 10 extend: 'Ext.container.Container', 11 12 xtype: 'app-main', 13 14 uses: ['app.view.main.region.Top', 'app.view.main.region.Bottom'], 15 16 controller: 'main', 17 // MVVM架構(gòu)的控制器的名稱，會在當前路徑中根據(jù)‘Main’ + Controller 來確定文件名 18 // 這個我沒找到其他任何可以自動加載MainController.js的依據(jù)，只能作上面的判斷了 19 viewModel: { 20 type: 'main' 21 // MVVM架構(gòu)的viewModel的類型，會在當前路徑中根據(jù)‘Main’ + Model 來確定文件名 22 }, 23 24 layout: { 25 type: 'border' // 系統(tǒng)的主頁面的布局 26 }, 27 28 items: [{ 29 xtype: 'maintop', 30 region: 'north' // 把他放在最頂上 31 }, { 32 xtype: 'mainbottom', 33 region: 'south' // 把他放在最底下 34 }, { 35 xtype: 'panel', 36 bind: { 37 title: '{name}' 38 }, 39 region: 'west', // 左邊面板 40 html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>', 41 width: 250, 42 split: true, 43 tbar: [{ 44 text: 'Button', 45 handler: 'onClickButton' 46 }] 47 }, { 48 region: 'center', // 中間面版 49 xtype: 'tabpanel', 50 items: [{ 51 title: 'Tab 1', 52 html: '<h2>Content appropriate for the current navigation.</h2>' 53 }] 54 }] 55 });

?

extjs中有許多布局，其中的一個border比較常用，他可以將items分成上、下、左、右、和中間五個部分。經(jīng)過上面幾步以后，在瀏覽器刷新一下網(wǎng)頁，會看到如下結(jié)果：

轉(zhuǎn)載于:https://www.cnblogs.com/isonre/p/4703873.html

總結(jié)

以上是生活随笔為你收集整理的extjs5(05--主界面上加入顶部和底部区域)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。