ExtJS學習：MVC模式案例（一）

原創

2020-02-21 04:34

這裏感謝http://www.lihuai.net的李壞老師，這篇文章是他的原創，轉載過來希望能讓更多需要幫助的人看到。

ExtJS是一種主要用於創建前端用戶界面的ajax框架。相比於傳統的WEB開發，ExtJS更適合做企業級的系統應用。ExtJS框架不但功能強大，由於其省去了不少的前端開發工作，其開發速度也是快的驚人，所以目前有很多的WEB開發者更願意用它開發企業內部的系統。
      ITLee由於工作的需要，最近也接觸了一下ExtJS，用它開發了一些簡單的系統應用。學習的過程中，發現很多接觸ExtJS較早的人都說ExtJS3.0與ExtJS4.0有較大的區別，由於ITLee本人沒用過3.0版的這裏不做過多的介紹。只是簡單的說一下，ExtJS4.X中最大的改變恐怕就是Ext本身的MVC模式了，由於本人天資愚鈍且基礎薄弱，還是費了很大勁才摸到它的門檻的。這裏給出一個小的案例，方便大家今後學習參考。
      由於ITLee在實際應用中，使用ExtJS的MVC模式確實是費了一些周折，所以本案例的主要目的是幫助大家瞭解一下它的MVC模式以及學會最基礎的佈局。廢話不多說，下面來看一下案例最終的實現效果：

      由上圖可知，網頁的佈局有三部分組成：頂部標題、左側菜單和右側主題內容顯示。這裏我們對案例的佈局有個初步印象，方便今後我們的進一步學習。
      瞭解了項目的最終效果，下面來看一下該案例最終的文件結構：

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

<!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文件夾中。
      至此，我們對案例已經有了一個整體的認識。下一講我們將會詳解項目的整體佈局。
      歡迎各位瀏覽糾錯，共同交流！

如非特殊說明，文章均爲ITLee原創，轉載請註明！
原文地址： http://www.lihuai.net/qianduan/extjs/457.html/