Extjs MVC模式開發，按部就班（一）

時間  2019-11-10
標籤 extjs mvc 模式 開發 按部就班 简体版
原文   原文鏈接

本文講述extjs mvc的Helloworld，tabPanel，event，頁面佈局layout等內容。javascript

本頁包含：MVC模式案例（一）~MVC模式案例（六），從搭建extjs mvc到點擊按鈕生成tab頁，事件點擊css

本文代碼位置：http://download.csdn.net/download/xiaoliu123586/10156915html

代碼使用idea打開便可，若是在windows下直接用瀏覽器打開index.html，加載data.json樹文件會找不到，必須在某服務器裏打開或者或者idea打開，前端

訪問url相似：http://localhost:63342/extdemo/index.html?_ijt=8bt5l2b9lkvqhvs1gukmm1j5mkjava

而不是　　file:///C:/Users/Mike/Desktop/extdemo/index.htmlajax

MVC模式案例（一）

即將實現網頁的佈局有三部分組成：頂部標題、左側菜單和右側主題內容顯示。這裏咱們對案例的佈局有個初步印象，方便從此咱們的進一步學習。json

瞭解了項目的最終效果，下面來看一下該案例最終的文件結構：bootstrap

　　　　　　　　　　　　

文件結構能夠看出，在整個項目中，app文件夾是咱們的主要工做目錄，其中包含：controller（控制器）、model（數據模型）、store（數據集）、view（視圖）。另外還有server文件夾，其主要目的是代替後臺服務器爲項目提供數據。這些內容咱們將在從此的文章中逐步講解，今天咱們來看一下index.html和app.js這兩個文件。
index.html文件代碼：windows

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ExtJS學習：MVC模式案例</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../extjs/examples/shared/example.css" />
<script type="text/javascript" src="../extjs/bootstrap.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<iframe id='contentIframe' name='contentIframe' style='height:100%;width:100%' frameborder="no"></iframe>
</body>
</html>

這個文件主要的目的就是對ExtJS框架文件的引用，這裏咱們不作過多的介紹。
app.js文件代碼：後端

Ext.onReady(function(){
    //開啓懸浮提示功能
    Ext.QuickTips.init();
    //開啓動態加載
    Ext.Loader.setConfig({
        enabled: true
    });
    //建立應用程序的實例
    Ext.application({
        //設定命名空間
        name: 'Demo',
        //指定配置選項，設置相應的路徑
        appFolder: 'app',
        //加載控制器
        controllers: ['demoController'],
        //自動加載和實例化Viewport文件
        autoCreateViewport: true
    });
});

 app.js文件能夠當作是對咱們整個項目的全局設置，其中咱們須要注意的有：
       （1）Ext.Loader.setConfig幫咱們開啓了自動加載的功能，這個功能默認是不開啓的，須要咱們手動開啓，不然之後開發的不少文件都會找不到，報錯。

　　（2）name: ‘Demo’給項目規定了一個命名空間，它將做爲一個全局變量應用於整個項目中，幫助咱們識別屬於本項目的應用文件。
       （3）appFolder: ‘app’這個配置項，幫咱們指定到app文件夾中。

MVC模式案例（二）

ExtjS框架怎麼使用MVC模式對代碼進行佈局。
      到目前爲止咱們現有的文件只有根目錄下的index.html和app.js兩個文件，不具備任何的實際意義。下面咱們開始着手建立咱們的項目，讓它可以實實在在的展示在咱們的瀏覽器中。首先，咱們在根目錄下建立app文件夾，而後在app文件夾下建立controller和view兩個文件夾，分別存放咱們的控制器文件和視圖文件。

定義ViewPort

      VeiwPort表明整個瀏覽器顯示區域，該對象渲染到頁面的body區域，並會隨着瀏覽器顯示區域的大小自動改變，一個頁面中只能有一個ViewPort 實例。下面咱們在view文件夾中建立Viewport.js文件，而後添加以下代碼：

Ext.define('Demo.view.Viewport', {
    extend: 'Ext.container.Viewport',
    //佈局方式：border
    layout: 'border',
    items: [{
        title:'ExtJS案例',
        collapisble: true,
        region:'north',
        height: 100,
        html: '<br><center><font size=5>MVC模式實現的ExtJS案例</font><br><font size=2>源碼來源:ITLee博客</font></center>'
    },{
        title: '功能菜單',
        region: 'west',
        width: 180,
        split: true,
        collapisble: true,
        html:'這裏是菜單部分'
    }, {
        id: 'mainContent',
        title: '主題內容顯示',
        layout: 'fit',
        region: 'center',
        collapisble: true,
        contentEl: 'contentIframe'
    }]
});

 在Viewport中咱們用border的佈局方式將整個網頁分爲三個部分：頭部（north）、左部（west)、主題部分（center）。

定義一個控制器

      控制器是整個應用程序的關鍵，他負責監聽事件，並對某些時間作出相應的動做。如今咱們在controller文件夾下建立一個控制器，命名爲demoController.js（這裏的命名應該與app.js文件中加載的控制器名稱相同），而後咱們爲該文件添加如下代碼： 

Ext.define('Demo.controller.demoController', {
    extend: 'Ext.app.Controller',
        //將Viewport.js添加到控制器
    views: ['Viewport']
});

在控制器中咱們經過views配置項，將所需視圖加載到控制器中。如今咱們經過瀏覽器就能夠對項目進行查看了，查看效果以下： 


至此，咱們對網頁的佈局就算是完成了，但願對你們有所幫助。下一講咱們將講解樹形菜單的實現。

MVC模式案例（三）

 

接下來，咱們在view文件夾中添加一個menuTree.js文件，用來做爲樹形菜單組件。爲該文件添加如下代碼：

Ext.define('Demo.view.menuTree', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.menutree',
    border: false,
    //規定錨連接地址的顯示區域
    hrefTarget: 'mainContent',
    //是否顯示根節點
    rootVisible: false,
    //數據集
    store: 'menuStore',
    //菜單樣式
    bodyStyle: {
        background: '#ffc',
        padding: '10px'
    }
});

這樣咱們就建立了一個菜單的組件，可是，如今咱們的菜單還不能正常工做，由於菜單中尚未填充數據。ExtJS4中咱們用單獨的一個文件來建立數據模型和數據集，在建立數據集前咱們首先建立數據模型。在app文件夾下建立model文件夾，而且在該文件夾下建立menuModel.js文件，爲該文件添加如下代碼：

Ext.define('Demo.model.menuModel', {
    extend: 'Ext.data.Model',
    fields:[
        {name:'id', type:'int'},
        {name:'pid', type:'int'},
        {name:'text', type:'varchar'},
        //type爲布爾型時，後面的默認值是必須寫的，要不會出錯
        {name:'leaf', type:'boolean', defaultValue: true},
        {name: 'url', type:'varchar'}
    ]
});

有了數據模型，接下來咱們建立store文件夾，以及在該文件夾下建立menuStore.js文件，添加下面的代碼：

Ext.define("Demo.store.menuStore",{
    extend:'Ext.data.TreeStore',
    defaultRoodId:'root',
    //requires: 'Demo.model.menuModel',//我加了這兩行，會報錯
    //model: 'Demo.model.menuModel',
    proxy:{
        type:'ajax',
        url:'./server/data.json',
        reader:'json',
        autoLoad:true
    }
});

數據集和數據模型都有了，那麼咱們怎麼給菜單添加數據呢？通常狀況下，菜單所需的數據都是有後臺服務器提供，由於咱們這裏主要講解ExtJS的知識，儘可能不去涉及後端的東西，咱們能夠用json格式模擬後臺數據輸出。如今，咱們在根目錄下建立server文件夾，在該文件夾下建立一個data.json的文件用來爲前端提供數據：

[
    {"id":"2",
    "pid":"1",
    "text":"用戶管理",
    "leaf":"0",
    "url":"http:\/\/www.lihuai.net",
    "children":[{
        "id":"5",
        "pid":"2",
        "text":"基本信息",
        "leaf":"1",
        "url":"http:\/\/www.sogou.com",
        "children":""},{
        "id":"11",
        "pid":"2",
        "text":"信息管理",
        "leaf":"1",
        "url":"http:\/\/www.sogou.com",
        "children":""},{
        "id":"12",
        "pid":"2",
        "text":"添加用戶",
        "leaf":"1",
        "url":"http:\/\/www.sogou.com",
        "children":""}]},
    {"id":"3",
    "pid":"1",
    "text":"產品管理",
    "leaf":"0",
    "url":"http:\/\/www.so.com",
    "children":[{
        "id":"7",
        "pid":"3",
        "text":"產品信息",
        "leaf":"1",
        "url":"http:\/\/www.so.com",
        "children":""},{
        "id":"8",
        "pid":"3",
        "text":"產品添加",
        "leaf":"1",
        "url":"http:\/\/www.so.com",
        "children":""}]}
]

爲了簡單起見，每一個節點的url地址咱們用簡單的網頁替代。萬事俱備，只差加載了。那麼，怎麼才能將咱們寫好的菜單組件加載到咱們的項目中呢？
      首先，修改咱們的Viewport.js文件，將菜單組件添加到整個視圖中，修改後的代碼以下：

Ext.define('Demo.view.Viewport', {
    extend: 'Ext.container.Viewport',
    //佈局方式
    layout: 'border',
    items: [{
        title:'ExtJS案例',
        collapisble: true,
        region:'north',
        height: 100,
        html: '<br><center><font size=5>MVC模式實現的ExtJS案例</font><br><font size=2>源碼來源:ITLee博客</font></center>'
    },{
        title: '功能菜單',
        region: 'west',
        width: 180,
        split: true,
        collapisble: true,
                //這裏是修改的部分
        items:[{
            xtype: 'menutree'
        }]
    }, {
        id: 'mainContent',
        title: '主題內容顯示',
        layout: 'fit',
        region: 'center',
        collapisble: true,
        contentEl: 'contentIframe'
    }]
});

 

接下來，修改demoController.js文件，實現對菜單組件的加載，修改後的代碼：

Ext.define('Demo.controller.demoController', {
    extend: 'Ext.app.Controller',
    views: ['Viewport','menuTree'],
    stores: ['menuStore'],
    model: ['menuModel']
});

如今，用瀏覽器查看咱們的案例，左側已經顯示出菜單欄了，效果以下圖：

 

當咱們點擊樹形節點的時候，發現右側主題部分並無顯示網頁內容，這是由於咱們尚未爲節點添加監聽事件的緣由。具體如何添加切換頁面的效果，下一講咱們將會詳細講解。

MVC模式案例（四）

咱們基本實現了MVC模式佈局ExtJS項目的目的，而且在瀏覽器中也能夠看到最爲常見的網頁佈局結構。可是，做爲WEB開發者，並非可以實現網頁佈局就算是完成任務了，咱們還須要實現必定的功能。在這一講中，咱們將實現當點擊ExtJS菜單節點的時候，網頁主題部分顯示相對應的內容。
  　　　　　　　　　　　　　　　　

本講咱們不會添加新的文件，只是對原來的文件進行修改便可。前面咱們說過，控制器的主要做用是監聽事件，控制邏輯。因此，咱們今天主要修改demoController.js這個文件，爲咱們的項目添加切換頁面的功能。

demoController.js文件代碼：

添加對menuTree組件的鼠標點擊事件進行監聽，修改後的代碼：

Ext.define('Demo.controller.demoController', {
    extend:'Ext.app.Controller',
    views: ['Viewport','menuTree'],
    stores: ['menuStore'],
    model: ['menuModel'],
    //經過init函數來監聽視圖事件，控制視圖與控制器的交互
    init:function() {
        //init函數經過this.control來負責監聽
        this.control({
            //被監聽的組件的別名
            'menutree': {
                //監聽鼠標點擊事件，點擊後調用changePage方法
                itemclick:this.changePage,
            }
        });
    },
    changePage:function(){
        alert('success');
    }
});

  

      刷新頁面，點擊菜單幾點，彈出success說明咱們監聽事件成功。下面咱們繼續修改changePage方法，實現對主體內容部分頁面的切換功能。

changePage:function(view, rec, item, index, e){
            //獲取url地址
            var url = rec.get('url');
            //獲取當前節點信息
            var title = rec.get('text');
            //將主體內容部分的url地址指定爲咱們獲取到的url
            Ext.getDom('contentIframe').src = url;
            //將主體內容框的標題設置爲咱們獲取的節點信息
            Ext.getCmp('mainContent').setTitle(title);
        }

 

      經過對changePage方法的修改，刷新頁面，當咱們再次點擊節點的時候，右側主體內容部分將顯示對應url的頁面信息，大功告成。

MVC模式案例（五）

 要實現右鍵菜單的功能，首先咱們須要添加一個菜單組件，在view文件夾中新建contextMenu.js文件，該文件中添加如下代碼：

Ext.define('Demo.view.contextMenu', {
    extend: 'Ext.menu.Menu',
    alias: 'widget.contextmenu',
    float: true,
    items: [{
        xtype: 'button',
        text: '添加',
        action: 'add',
        iconCls: 'leaf'
    }, {
        xtype: 'button',
        text: '刪除',
        action: 'del',
        iconCls: 'leaf'
    }, {
        xtype: 'button',
        text: '編輯',
        action: 'edit',
        iconCls: 'leaf'
    }]
});

 

      正如咱們前面所說的，添加組件後須要在控制器中進行加載，不然ExtJS的自動加載機制將不能找到咱們的文件，下面修改demoController.js文件的view配置項，修改後的代碼以下：

Ext.define('Demo.controller.demoController', {
    extend: 'Ext.app.Controller',
        //此次的修改在這裏，給view配置項添加「contextMenu」
    views: ['Viewport','menuTree','contextMenu'],
    stores: ['menuStore'],
    model: ['menuModel'],
    //經過init函數來監聽視圖事件，控制視圖與控制器的交互
    init: function() {
        //init函數經過this.control來負責監聽
        this.control({
            //被監聽的組件的別名
            'menutree': {
                //監聽鼠標點擊事件，點擊後調用changePage方法
                itemclick: this.changePage,
            }
        });
    },
    changePage:function(view, rec, item, index, e){
        //獲取url地址
        var url = rec.get('url');
        //獲取當前節點信息
        var title = rec.get('text');
        //將主體內容部分的url地址指定爲咱們獲取到的url
        Ext.getDom('contentIframe').src = url;
        //將主體內容框的標題設置爲咱們獲取的節點信息
        Ext.getCmp('mainContent').setTitle(title);
    }
});

 

      作完以上工做後，接下來就是爲咱們的menuTree組件添加右鍵監聽事件了，修改控制器文件demoController.js：

Ext.define('Demo.controller.demoController', {
    extend: 'Ext.app.Controller',
    views: ['Viewport','menuTree','contextMenu'],
    stores: ['menuStore'],
    model: ['menuModel'],
    //經過init函數來監聽視圖事件，控制視圖與控制器的交互
    init: function() {
        //init函數經過this.control來負責監聽
        this.control({
            //被監聽的組件的別名
            'menutree': {
                //監聽鼠標點擊事件，點擊後調用changePage方法
                itemclick: this.changePage,
                //監聽鼠標右鍵事件，點擊後調用contextMenu方法
                itemcontextmenu: this.contextMenu
            }
        });
    },
    //頁面切換方法
    changePage:function(view, rec, item, index, e){
        //獲取url地址
        var url = rec.get('url');
        //獲取當前節點信息
        var title = rec.get('text');
        //將主體內容部分的url地址指定爲咱們獲取到的url
        Ext.getDom('contentIframe').src = url;
        //將主體內容框的標題設置爲咱們獲取的節點信息
        Ext.getCmp('mainContent').setTitle(title);
    },
    //顯示右鍵菜單方法
    contextMenu:function(tree, record, item, index, e, eOpts){
        //阻止瀏覽器默認右鍵事件
        e.preventDefault();
        e.stopEvent();
        //顯示右鍵菜單
        var view = Ext.widget('contextmenu');
        view.showAt(e.getXY());
    }
});

      在demoController.js文件中添加以上代碼後，刷新頁面，在菜單節點上點擊右鍵，看到以下效果圖：

　　　　　　　　　　　　

 如今，咱們整個案例教程就結束了，雖然還有不少功能沒實現，若是繼續擴展的話，怕是永遠也講不完了，呵呵，主要目的仍是爲ExtJS的新手們起一個引導的做用，但願對你們有所幫助。

 

 

MVC模式案例（六）

以上代碼的狀況下，改爲點擊菜單，生成tab的狀況

修改demoController的changePage方法

changePage:function(view, rec, item, index, e){
        var title = rec.get('text');
        var leaf = rec.get('leaf');
        var tabPanel = Ext.getCmp('mainContent');
        //子節點才能打開，父節點不設置響應
        if(leaf==false){
            return;
        }
        //以title值設置爲tab的id,打開時，有就使tab active，無則新建tab
        var newTab = tabPanel.getChildByElement(title);
        if (newTab == null) {
            tabPanel.add({
                id: title,
                title: title,
                html: '當前頁面是 ' + title + '<br/><br/>',
                closable: true
            });
        }
        tabPanel.setActiveTab(title);
    }

 

ViewPort.js裏center佈局的部分，改動以下

{
        region: 'center',
        id: 'mainContent',
        xtype:'tabpanel',
        title: '主題內容顯示',
        layout: 'fit',
        collapisble: true
    }

  此時，data.json的id和pid屬性能夠去掉了（沒使用到了）

data.json:

[
  {
    "text":"用戶管理",
    "leaf":"false",
    "url":"http://www.lihuai.net",
    "children":[
      {
      "text":"基本信息",
      "leaf":"true",
      "url":"http://www.sogou.com",
      "children":""
    },
      {
      "text":"信息管理",
      "leaf":"true",
      "url":"http://www.sogou.com",
      "children":""
      },
      {
      "text":"添加用戶",
      "leaf":"true",
      "url":"http://www.sogou.com",
      "children":""
      }]},
  {
    "text":"產品管理",
    "leaf":"false",
    "url":"http://www.so.com",
    "children":[
      {
      "text":"產品信息",
      "leaf":"true",
      "url":"http://www.so.com",
      "children":""
      },
      {
      "text":"產品添加",
      "leaf":"true",
      "url":"http://www.so.com",
      "children":""
      }]}
]
View Code

 

注意，若是須要樹哪一個節點默認展開，就在節點下配置"expanded:true" ，即修改data.json文件

 

 

 ======================================================================================================================

參考自：http://blog.csdn.net/luckypeng/article/details/43151793

有略微修正。

 

一下是一些我的實際代碼的貼出

Ext基本引入文件以下：

<script type="text/javascript" src="ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext/theme-crisp/resources/theme-crisp-all.css" />

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程