ExtJs七(ExtJs Mvc創建ViewPort)

前言

在4.1的時候，要先創建一個擴展于Ext.app.Application的類，然后用create創建它的實例來開始應用程序的。而在4.1.1，則可直接調用application方法開始執行應用程序，簡化了。調用application方法，其參數是一個配置對象，主要配置項有以下三個： name：用來定義應用程序的名稱，在這里是ExtMVCOne。 appFolder：應用程序的路徑，這里是scripts/app autoCreateViewport：默認值為false，在這里要設置為true，讓它自動加載\Script\app\View目錄下的Viewport.js文件。因為目錄已經在Loader中配置好了，因而不用設置目錄。

這是上一節中的配置

Ext.Loader.setConfig({
                enabled: true,
                paths: {
                    'Ext.ux': 'scripts/extjs/ux',
                    'ExtMVCOne': 'scripts/app'
                }
            });

創建ViewPort

在VS2010中，打開首頁Index.cshtml，在用戶信息下加入以下代碼后變成：

這樣，應用程序就運行起來了，現在要創建Viewport.js。在解決方案資源管理器中，在\Script\app\View目錄上單擊右鍵添加一個名為Viewport.js的腳本文本。在文件中需要定義一個從Ext.container.Viewport派生的類，用來搭建應用程序的整體界面。本示例將構建一個類似于Ext JS API的用戶界面，分頂部、主區域、底部三部分。頂部主要是顯示系統名稱和退出等按鈕，主區域使用標簽頁來顯示管理的內容，而文章內容的詳細信息頁也會已標簽頁形式顯示。底部純粹是占位區，可以寫一些狀態信息等，但是在本示例就不做了，有興趣自己研究一下。

目標明確后，先將新類的框架定義好，代碼如下：

Ext.define('ExtMVCOne.view.Viewport', {
    extend: 'Ext.container.Viewport',
    initComponent: function () {
        var me = this;
         me.callParent(arguments);
    }
});

代碼中，一定要注意類名，類名中最后一個小數點之前的內容為目錄，之后的是文件名。在這里因為ExtMVCOne指向的目錄是scripts/app，因而文件所在目錄是scripts/app/view，正是當前文件所在目錄。

現在考慮一下使用什么布局，因為是垂直劃分的三部分，因而不需要使用到Border布局了，使用VBox就可以了，現在加入布局：

layout: { type: 'vbox', align: 'stretch' },

這里一定要加align，以便布局可以填滿寬度。

現在，在items中加入界面的三個部分。頂部因為還要添加按鈕，因而使用一個工具欄比較方便；中部是標簽頁；底部只是占位，用Component就行了。代碼如下：

me.items = [
    { xtype: "toolbar", height: 53, id:"North" },
    { xtype: "tabpanel",flex:1,
        items: [
            { title: "文章管理" },
            { title: "圖片管理" },
            { title: "用戶管理" }
        ]
    },
    { xtype: "component",height:13,id:"South" }
];

代碼中，頂部的高度是53，底部是13。主體部分設置flex為1，表示它會占據剩余的空間。定義id，既方便未來訪問，也方便定義樣式。

現在可以F5運行，登錄后可以看到如下圖所示界面：

基本框架出來了，要美化一下頂部和底部。在app目錄下創建一個resources目錄，在這里將存放應用程序的資源，如樣式文件和圖片。接著下下面創建css目錄和images目錄，css目錄用來放置應用程序樣式文件，images目錄用來放置圖片。在css目錄下創建一個app.css的樣式文件。然后添加一下樣式：

#North,#South{

     background:#6C86AE !important;

     background-image: -webkit-gradient(linear,50% 0%, 50% 100%, color-stop(0%, #6C86AE), color-stop(100%, #526C95)) !important;

     background-image: -webkit-linear-gradient(top,#6C86AE, #526C95) !important;

     background-image: -moz-linear-gradient(top,#6C86AE, #526C95) !important;

     background-image: -o-linear-gradient(top,#6C86AE, #526C95) !important;

     background-image: -ms-linear-gradient(top,#6C86AE, #526C95) !important;

     background-image: linear-gradient(top,#6C86AE, #526C95) !important;

     border: 1px solid #567422 !important;

}

將樣式文件添加到首頁，然后刷新一下頁面，可以看到如下的效果

現在看上去樣子差不多了，接下來我們來改一下頂部的顯示。先加一個Component來顯示項目名稱，代碼如下：

xtype: "toolbar", height: 53, id: "North",
                items: [
                    { xtype:'component',cls:'logo',html:'ExtJs MVC 系統'},
                ]

這里需要為組件定義一個樣式logo來改變顯示文字的大小，樣式代碼如下：

.logo {
  padding: 10px 10px 10px 31px !important;
  /*background: url(../images/logo.png)no-repeat 10px 12px;*/
  color: #fff !important ;
  font-size: 18px !important;
  font-weight: bold !important;
  text-shadow: 0 1px 0 #4e691f !important;

}

接著在工具來的最右邊加一個退出按鈕，用圖標顯示。先將圖標文件（logout.png）復制到images目錄。然后，添加以下代碼來添加圖標：

"->",
{ iconCls: "logout", tooltip: "退出", scale: "large",
    handler: function () {
        window.location = "Account/Logout";
    }
}

“->”符合會讓工具欄的圖標顯示在右邊。圖標定義了scale為large，表示顯示的是32*32的大圖標。單擊按鈕會將頁面轉到Account控制器的Logout方法。 在css文件中添加logout樣式：

.logout{
     background:url("../Images/logout.png") !important;
}

當然還要在Images文件夾中添加相應的圖片哦。

刷新一下頁面看看

退出操作不難，順便完成了，切換到Account控制器，添加一個Logout方法，方法內，調用SignOut方法退出認證，并調整到首頁就行了，代碼如下：

public ActionResult Logout()
        {
            FormsAuthentication.SignOut();
            return RedirectToAction("Index", "Home");
        }

重新生成一下應用程序，然后在瀏覽器打開頁面測試一下退出按鈕�？梢郧袚Q到登錄頁，表示退出操作已經完成了。

現在考慮主面板部分。因為用戶管理只有系統管理員可以看到，因而現在這模式不便于進行處理，需要將它抽出來，先創建面板對象，然后根據權限添加需要的標簽頁。將items中的主面板代碼刪除，然后在它之前添加創建主面板的代碼：

me.mainpanel = Ext.widget("tabpanel", {
            flex: 1, id: "mainPanel",
            items: [
                { title: "文章管理" },
                { title: "圖片管理" }
            ]
        });

代碼中，添加了一個id，以便未來調用。文章管理和圖片管理因為全部用戶都可見，因而可以預添加在標簽頁里。 在Viewport的items里，把mainpanel添加到原來的代碼位置。

接著要做的是通過Userinfo判斷用戶是否管理員，如果是，添加用戶管理標簽頁，代碼如下：

varroles = "." + ExtMVCOne.Userinfo.Roles.join('.') + ".";
        if (roles.indexOf(".系統管理員.") >= 0) {
            me.mainpanel.add({ title: "用戶管理" });
        }

因為在Userinfo中，角色是保存在數組中的，因而這里將其轉換為字符串后再比較。調用標簽頁的add方法就可將新標簽添加到標簽頁中了。

現在，在瀏覽器中用test用戶登錄頁面，將看不到用戶管理了。換admin登錄，就可看到用戶管理。這說明權限控制已經成功了。

這是用admin登錄的結果

同理，這是用test普通用戶登錄的

示例代碼下載鏈接 http://files.cnblogs.com/aehyok/ExtJsViewPort.rar