富客戶端程序設計實例 - 視圖層(Ext JS) - 頁面腳本結構

Yangcl 11年前發布 | 7K 次閱讀


        simple.html作為前端頁面的入口，app.js作為javascript腳本的入口點被simple.html所引用。app.js在整個Ext JS MVC中是入口的作用。app.js代碼如下：

[javascript] view plaincopy
</div>

  1. //指定Ext Framework 類加載路徑  

  2. Ext.Loader.setConfig({enabled:true, paths:{Hongbo:"app"}});  

  3.   

  4. Ext.application(  

  5. {  

  6.     //定義一個全局命名空間 Hongbo  

  7.     name: 'Hongbo',  

  8.   

  9.     //自動創建一個 Hongbo.view.Viewport 實例目標直接對應app/view/目錄下的Viewport.js  

  10.     autoCreateViewport: true,  

  11.   

  12.     controllers:  

  13.     [  

  14.         'C_Frame'//#C_Frame#2013/07/01 指定控制器  

  15.     ]  

  16. });  
    17. </ol> </div> </div>

            Ext.application代表一個ExtJS富客戶端應用程序的入口點。定義Ext.application的文件腳本一般起名為：app.js。app.js文件的作用如下：

                    1.指定Ext Framework 類加載路徑；

                    2.定義全局命名空間；

                    3.定義自動創建視圖屬性；

                    4.羅列控制器。

            app.js在html文件中解釋時，首先加載出app/view/目錄下的Viewpoint.js(目錄結構固定)，由這個文件來加載引用的其他視圖；在羅列控制器的時候，要指定清楚controller文件夾下的腳本文件路徑，如：frame.C_Frame。分別指出Viewport.js 和 C_Frame.js代碼如下：

    [javascript] view plaincopy
    </div>

    1. Ext.define('Hongbo.view.Viewport',  

    2. {  

    3.    extend: 'Ext.container.Viewport', //指定繼承類  

    4.    layout: 'border', //設定布局類型  

    5.     items:[    //羅列出引用視圖  

    6.         { xtype:"south_area" }, //模塊化引用視圖  

    7.         { xtype:"center_area" },  

    8.         { xtype:"east_area" },  

    9.         { xtype:"west_area" },  

    10.         {  

    11.             xtype: 'task_list'  

    12.         }  

    13.     ]  

    14. });  
      15. </ol> </div> </div>

      1. Ext.define('Hongbo.controller.C_Frame',  

      2. {  

      3.     extend: 'Ext.app.Controller',  

      4.     stores:  

      5.     [  

      6.         'north.S_North',  

      7.          'west.ChaKanStore'  

      8.     ],  

      9.   

      10.     models:  

      11.     [  

      12.         'north.M_North',  

      13.         'west.ChaKanModel'  

      14.     ],  

      15.   

      16.     views: [  

      17.         'north.Edit',  

      18.         'north.TaskList',  

      19.         'center.centerArea',  

      20.         'east.eastArea',  

      21.         'south.southArea',  

      22.         'west.westArea'  

      23.     ],  

      24.   

      25.     init: function()  

      26.     {  

      27.     }  

      28. });  
        29. </ol> </div> </div>

                Controller的主要作用就是加載store、model和view。在這里要列出相對應的引用。





       本文由用戶 Yangcl 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
       轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
       本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
      寫博客

      博客分類