當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
ExtJS MVC学习手记 1
生活随笔
收集整理的這篇文章主要介紹了
ExtJS MVC学习手记 1
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
開發環境：
ExtJS4.2
eclipse indigo
開發目標?
搭建項目框架，創建viewport
開發步驟說明
這次主要使用extjs4的mvc模式創建viewport。籍此初步了解mvc模式的結構。
下圖為項目結構：
重點是app的目錄結構：
其中controller、model、store、view一般來說是必須存在的目錄。
app.js是應用的引導頁。需要在首頁中顯式調用。
如下是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中調用了app.js頁。app.js頁的代碼：
1: Ext.application({ 2: name: 'zero', 3: controllers:[], 4: autoCreateViewport: true 5: });目前app.js內容很簡單。簡要說下涉及到的3個屬性：
name： 應用名稱（這里使用了項目名，也可自定義，比如“ZE“，但注意不要使用敏感詞），也是view、contoller、model、store的命名空間；
controller： 控制器，暫未使用，后期使用再行說明；
autoCreateViewport :? 默認值是false，此時需要顯示的創建viewport。值為true時，會自動調用”命名空間.view.Viewport“類。項目中這個類一般定義在app/view/Viewport.js中。
Viewport.js文件內容如下：
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中完整的目錄結構是這樣的：
如下是運行結果：
?
?
參考說明：
參考了extjs4.0文檔中的兩個類：
轉載于:https://www.cnblogs.com/amunote/p/3701533.html
總結
以上是生活随笔為你收集整理的ExtJS MVC学习手记 1的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android开源项目分包方式学习（eo
- 下一篇： 新手学linux之-----------