一步一步使用Ext JS MVC與Asp.Net MVC 3開發簡單的CMS後台管理系統之建立Viewport（1）

忙活了那麼久，終於進入正題，Ext JS MVC開發。

開始前，先說說4.1.1的一點點變化。在4.1的時候，要先建立一個擴充於Ext.app.Application的類，然後用create建立它的執行個體來開始應用程式的。而在4.1.1，則可直接調用application方法開始執行應用程式，簡化了。

調用application方法，其參數是一個設定物件，主要配置項有以下兩個：

l name：用來定義應用程式的名稱，在這裡是SimpleCMS。

l appFolder：應用程式的路徑，這裡是scripts/app

l autoCreateViewport：預設值為false，在這裡要設定為true，讓它自動載入\Script\app\View目錄下的Viewport.js檔案。因為目錄已經在Loader中配置好了，因而不用設定目錄。

在VS2010中，開啟首頁Index.cshtml，在使用者資訊下加入以下代碼：

                Ext.onReady(function () {

                    if (Ext.BLANK_IMAGE_URL.substr(0, 4)!= "data") {

                        Ext.BLANK_IMAGE_URL = "Content/Images/s.gif";

                    }

 

                    Ext.application({

                        name:"SimpleCMS",

                      appFolder:"scripts/app",

                        autoCreateViewport:true

                    });

 

                })

 

 

這樣，應用程式就運行起來了，現在要建立Viewport.js。在方案總管中，在\Script\app\View目錄上單擊右鍵添加一個名為Viewport.js的指令碼文本。在檔案中需要定義一個從Ext.container.Viewport派生的類，用來搭建應用程式的整體介面。本樣本將構建一個類似於Ext JS API的使用者介面，分頂部、主地區、底部三部分。頂部主要是顯示系統名稱和退出等按鈕，主地區使用標籤頁來顯示管理的內容，而文章內容的詳細資料頁也會已標籤頁形式顯示。底部純粹是佔位區，可以寫一些狀態資訊等，但是在本樣本就不做了，有興趣自己研究一下。

目標明確後，先下好新類的定義架構，代碼如下：

Ext.define('SimpleCMS.view.Viewport',{

    extend: 'Ext.container.Viewport',

 

   initComponent: function () {

       varme=this;

       me.callParent(arguments);

    }

 

});

 

 

代碼中，一定要注意類名，類名中最後一個小數點之前的內容為目錄，之後的是檔案名稱。在這裡因為SimpleCMS指向的目錄是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，既方便未來訪問，也方便定義樣式。

現在，在瀏覽器開啟頁面，登入後將看到17所示的效果。

圖17 基本架構

基本架構出來了，要美化一下頂部和底部。在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;

}

 

 

將樣式檔案添加到首頁，然後重新整理一下頁面，將看到18所示的效果。

圖18 美化後的架構

現在看上去差不多了。

接著來完善一下頂部的顯示，先加一個Component來顯示項目名稱，代碼如下：

            { xtype: "toolbar", height:53,id:"North" ,

                items: [

                    { xtype: 'component', cls: 'logo', html: '簡單的CMS後台管理系統' },

                ]

            },

 

這裡需要為組件定義一個樣式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;

}

代碼中屏蔽了logo，如果有logo，可以恢複代碼顯示logo。

重新整理一下頁面會看到19所示的標題。

圖19 頁面標題

接著在工具來的最右邊加一個退出按鈕，用表徵圖顯示。先將表徵圖檔案（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;

}

 

重新整理一下頁面，會看到20所示的退出表徵圖。

圖20 退出表徵圖

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

        public ActionResult Logout()

        {

            FormsAuthentication.SignOut();

            return RedirectToAction("Index", "Home");

        }

 

重建一下應用程式，然後在瀏覽器開啟頁面測試一下退出按鈕。可以切換到登入頁，表示退出操作已經完成了。

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

        me.mainpanel = Ext.widget("tabpanel", {

            flex: 1, id: "mainPanel",

            items: [

                { title: "文章管理" },

                { title: "圖片管理" }

            ]

        });

 

代碼中，添加了一個id，以便未來調用。文章管理和圖片管理因為全部使用者都可見，因而可以預添加在標籤頁裡。

在Viewport的items裡，把mainpanel添加到原來的代碼位置。

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

varroles = "." + SimpleCMS.Userinfo.Roles.join('.') + ".";

if(roles.indexOf(".系統管理員.") >= 0) {

    me.mainpanel.add({ title: "使用者管理" });

}

 

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

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

以上控制許可權的方法之後筆者習慣使用的方式，您可以根據自己的需要利用不同的方式，控制按鈕、頁面顯示等方式都是一樣的。Ext JS 4一個方便的地方就是用add、remove等方法可以很容易添加或移除組件。

好了，今天就到這了。

 

 原始碼：http://download.csdn.net/detail/tianxiaode/4573793