ExtJS5_主介面上加入頂部和底部地區

標籤：style   blog   http   io   color   ar   使用   sp   java   

為主介面加一個頂部地區和底部地區。一個管理系統的介面可以粗分為頂部標題部分、中間資料展示和處理的部分、底部備忘和狀態部分。

在增加這二個地區之前，我們先在MainModel.js中加入一些資料。

Ext.define(‘app.view.main.MainModel‘, {    extend : ‘Ext.app.ViewModel‘,    alias : ‘viewmodel.main‘,    data : {        name : ‘app‘,        // 系統資訊        system : {            name : ‘工程項目合約及資金管理系統‘,            version : ‘5.2014.06.60‘,            iconUrl : ‘‘        },        // 使用者單位資訊和使用者資訊        user : {            company : ‘武當太極公司‘,            department : ‘工程部‘,            name : ‘張三丰‘        },        // 服務單位和服務人員資訊        service : {            company : ‘無錫熙旺公司‘,            name : ‘蔣鋒‘,            phonenumber : ‘1320528----‘,            qq : ‘78580822‘,            email : ‘[email protected]‘,            copyright : ‘熙旺公司‘        }    }        // TODO - add data, formulas and/or methods to support your view    });

    在上面的代碼中，在data中增加了三個類型的資料，下面分別有些屬性。這些值和屬性以後可以從後台獲得。比如說背景系統名稱改過了，前台重新整理一下介面，就能展示新的system.name。這也符合我這個系統的開發宗旨，能夠動態資訊盡量動態化，修改的時候只要在前台配置就可以，不要去修改背景js或java代碼。

        下面在main的目錄下加入二個檔案，分別為Top.js和Bottom.js。目錄結構如下：

Top.js定義了一個類，其類名為‘app.view.main.region.Top’，注意其類名的前面和其路徑是一致的。extjs的類載入機制就是根據類名來找到具體的類檔案在哪裡的。

/** * 系統首頁的頂部地區，主要放置系統名稱，菜單，和一些快捷按鈕 */Ext.define(‘app.view.main.region.Top‘, {            extend : ‘Ext.toolbar.Toolbar‘,            alias : ‘widget.maintop‘, // 定義了這個組件的xtype類型為maintop            items : [{                        xtype : ‘image‘,                        bind : { // 資料繫結到MainModel中data的ystem.iconUrl                            hidden : ‘{!system.iconUrl}‘, // 如果system.iconUrl未設定，則此image不顯示                            src : ‘{system.iconUrl}‘ // 根據system.iconUrl的設定來載入圖片                        }                    }, {                        xtype : ‘label‘,                        bind : {                            text : ‘{system.name}‘ // text值綁定到system.name                        },                        style : ‘font-size : 20px; color : blue;‘                    }, {                        xtype : ‘label‘,                        bind : {                            text : ‘{system.version}‘                        }                    }, ‘->‘, {                        text : ‘菜單‘,                        menu : [{                                    text : ‘工程管理‘,                                    menu : [{                                                text : ‘工程項目‘                                            }, {                                                text : ‘工程標段‘                                            }]                                }]                    }, ‘ ‘, ‘ ‘, {                        text : ‘首頁‘                    }, {                        text : ‘協助‘                    }, {                        text : ‘關於‘                    }, {                        text : ‘登出‘                    }, ‘->‘, ‘->‘, {                        text : ‘設定‘                    }]        });

    上面是Top.js類的定義，這是一個toolbar控制項，裡面加入了一些label和Button,用於顯示系統名稱以及用來實現一些操作。toolbar的items下預設的xtype是Button。原始碼的注釋裡面也寫入了如何綁定到MainModel 的資料的備忘。

        下面是Button.js的代碼：

/** * 系統首頁的底部地區，主要放置使用者單位資訊，服務單位和服務人員資訊 */Ext.define(‘app.view.main.region.Bottom‘, {            extend : ‘Ext.toolbar.Toolbar‘,            alias : ‘widget.mainbottom‘,            items : [{                        bind : {                            text : ‘使用單位:{user.name}‘                        }                    }, {                        bind : {                            text : ‘使用者:{user.name}‘                        }                    }, ‘->‘, {                        bind : {                            text : ‘服務單位:{service.company}‘                        }                    }, {                        bind : {                            text : ‘服務人員:{service.name}‘                        }                    }, {                        bind : {                            text : ‘tel:{service.phonenumber}‘                        }                    }, {                        bind : {                            hidden : ‘{!service.email}‘, // 綁定值前面加！表示取反，如果有email則不隱藏，如果email未設定，則隱藏                            text : ‘eMail:{service.email}‘                        }                    }, {                        bind : {                            text : ‘©{service.copyright}‘                        }                    }]        });

至此要加入的二個js檔案已經就緒，現在我們要把他們放到Main的首頁面之中。Main.js也需要修改一下，需要引入上面這二個類，以及把他們放到items下，並設定好位置。

/** * This class is the main view for the application. It is specified in app.js as * the "autoCreateViewport" property. That setting automatically applies the * "viewport" plugin to promote that instance of this class to the body element. *  * TODO - Replace this content of this view to suite the needs of your * application. */Ext.define(‘app.view.main.Main‘, {    extend : ‘Ext.container.Container‘,    xtype : ‘app-main‘,    uses : [‘app.view.main.region.Top‘, ‘app.view.main.region.Bottom‘],    controller : ‘main‘,    // MVVM架構的控制器的名稱，會在當前路徑中根據‘Main’ + Controller 來確定檔案名稱    // 這個我沒找到其他任何可以自動載入MainController.js的依據，只能作上面的判斷了    viewModel : {        type : ‘main‘        // MVVM架構的viewModel的類型，會在當前路徑中根據‘Main’ + Model 來確定檔案名稱    },    layout : {        type : ‘border‘ // 系統的首頁面的布局    },    items : [{                xtype : ‘maintop‘,                region : ‘north‘ // 把他放在最頂上            }, {                xtype : ‘mainbottom‘,                region : ‘south‘ // 把他放在最底下            }, {                xtype : ‘panel‘,                bind : {                    title : ‘{name}‘                },                region : ‘west‘, // 左邊面板                html : ‘<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>‘,                width : 250,                split : true,                tbar : [{                            text : ‘Button‘,                            handler : ‘onClickButton‘                        }]            }, {                region : ‘center‘, // 中間面版                xtype : ‘tabpanel‘,                items : [{                            title : ‘Tab 1‘,                            html : ‘<h2>Content appropriate for the current navigation.</h2>‘                        }]            }]});

        extjs中有許多布局，其中的一個border比較常用，他可以將items分成上、下、左、右、和中間五個部分。經過上面幾步以後，在瀏覽器重新整理一下網頁，會看到如下結果：

ExtJS5_主介面上加入頂部和底部地區