ExtJS MVC学习手记 1
開發(fā)環(huán)境：
ExtJS4.2
eclipse indigo
開發(fā)目標(biāo)?
搭建項目框架，創(chuàng)建viewport
開發(fā)步驟說明
這次主要使用extjs4的mvc模式創(chuàng)建viewport。籍此初步了解mvc模式的結(jié)構(gòu)。
下圖為項目結(jié)構(gòu)：
重點是app的目錄結(jié)構(gòu)：
其中controller、model、store、view一般來說是必須存在的目錄。
app.js是應(yīng)用的引導(dǎo)頁。需要在首頁中顯式調(diào)用。
如下是index.jsp的代碼：
1: <%@ page language="java" pageEncoding="utf-8"%> 2: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 3: <html> 4: <head> 5: <title>ExtJs MVC 演示</title> 6: <link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css" /> 7: <link rel="stylesheet" type="text/css" href="./theme/theme.css" /> 8: </head> 9: <body> 10: <script type="text/javascript" src="./extjs/ext-all-debug.js"></script> 11: <script type="text/javascript" src="./extjs/locale/ext-lang-zh_CN.js"></script> 12: <script type="text/javascript" src="./app/app.js"></script> 13: </body> 14: </html>在index.jsp中調(diào)用了app.js頁。app.js頁的代碼：
1: Ext.application({ 2: name: 'zero', 3: controllers:[], 4: autoCreateViewport: true 5: });目前app.js內(nèi)容很簡單。簡要說下涉及到的3個屬性：
name： 應(yīng)用名稱（這里使用了項目名，也可自定義，比如“ZE“，但注意不要使用敏感詞），也是view、contoller、model、store的命名空間；
controller： 控制器，暫未使用，后期使用再行說明；
autoCreateViewport :? 默認(rèn)值是false，此時需要顯示的創(chuàng)建viewport。值為true時，會自動調(diào)用”命名空間.view.Viewport“類。項目中這個類一般定義在app/view/Viewport.js中。
Viewport.js文件內(nèi)容如下：
1: Ext.define('zero.view.Viewport', { 2: extend: 'Ext.container.Viewport', 3: ? 4: requires: [], 5: ? 6: layout: 'border', 7: ? 8: items: [{ 9: region: 'north', 10: height: 64 11: },{ 12: region: 'center' 13: }, { 14: region: 'west', 15: width: 225 16: }] 17: });目前app中完整的目錄結(jié)構(gòu)是這樣的：
如下是運行結(jié)果：
?
?
參考說明：
參考了extjs4.0文檔中的兩個類：
轉(zhuǎn)載于:https://www.cnblogs.com/amunote/p/3701533.html
總結(jié)
以上是生活随笔為你收集整理的ExtJS MVC学习手记 1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android开源项目分包方式学习（eo
- 下一篇： 详解SpringMVC中Controll