富客户端程序设计实例 - 视图层(Ext JS) - 页面脚本结构

11年前

        simple.html作为前端页面的入口，app.js作为javascript脚本的入口点被simple.html所引用。app.js在整个Ext JS MVC中是入口的作用。app.js代码如下：
[javascript] view plaincopy
  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. });  
        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
  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. });  
  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. });  
        Controller的主要作用就是加载store、model和view。在这里要列出相对应的引用。