|
ExtJs4之簡單MVC應(yīng)用
2011年05月23日 星期一 10:43
我們的 簡單MVC應(yīng)用 具有以下文件夾結(jié)構(gòu)：
simplemvc/Index.html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title id="page-title">Simple MVC Application</title> <link rel="stylesheet" type="text/css" href="../../../../../resources/css/ext-all.css"> <script type="text/javascript" src="../../../../ext-all.js"></script> <script type="text/javascript" src="app.js"></script> </head> <body> </body> </html> 我們的HTML文件中包含 ext- all.css 其中包含所有的樣式， ext all.js 包含所有的應(yīng)用程序庫和任何所需的Ext JS的 app.js 其中包含應(yīng)用程序類。 Ext JS的提供工具，使我們能夠產(chǎn)生（）JSBuilder文件格式的文件JSB3所有依賴關(guān)系的形式一，營造一個最小的自定義生成的正是我們的應(yīng)用需求，但我們不打算使用，在這個例子并包括 ext- all.js 其中包含所需的一切。 simplemvc/app.js Ext.Loader.setConfig({ enabled: true }); Ext.create('Ext.app.Application', { name: 'USERS', autoCreateViewport: false, controllers: ['Users'], launch: function() { } }); Ext JS的每4個應(yīng)用程序級開始應(yīng)用的實例，這個類包含應(yīng)用程序的全局設(shè)置的，它也包含一個發(fā)射功能，它運行時自動加載的一切。 我們的應(yīng)用程序類包含屬性 名稱 定義了我們的應(yīng)用程序的全局命名空間。 在默認(rèn)情況下申請財產(chǎn) autoCreateViewport 設(shè)置為 真 ，因此它會自動創(chuàng)建一個視口，但我們只想要一個根格在一個文檔，所以我將其設(shè)置為 假 。 控制器 應(yīng)用程序中的屬性列表所有控制器。 simplemvc/controller/Users.js Ext.define('USERS.controller.Users', { extend: 'Ext.app.Controller', models: ['User'], stores: ['Users'], views: ['Panel', 'Grid'], init: function() { Ext.create('Ext.panel.Panel', { layout: 'fit', height: 300, width: 500, items: { xtype: 'userlist' }, renderTo: document.body }); Ext.create('USERS.view.Grid').show(); } }); 主控制器的作用是監(jiān)聽事件，并采取一些行動。 所有的控制器繼承父 Ext.app.Controller ，模型 財產(chǎn)清單所有的模型，它定義了協(xié)會的數(shù)據(jù)和格式， 存儲 列出所有的商店，它定義了數(shù)據(jù)或獲取并從服務(wù)器 的意見 ，列出了所有的意見在我們的應(yīng)用需要它的網(wǎng)格。 simplemvc/model/User.js Ext.define('USERS.model.User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email'] }); 模型定義了數(shù)據(jù)格式和協(xié)會，我們的數(shù)據(jù)有編號，姓名和電子郵件. simplemvc/store/Users. js Ext.define('USERS.store.Users', { extend: 'Ext.data.Store', model: 'USERS.model.User', autoLoad: true, proxy: { type: 'ajax', api: { read: 'data/users.json' }, reader: { type: 'json', root: 'users', successProperty: 'success' } } }); 從我們的商店獲取我們前面定義的模型為基礎(chǔ)的服務(wù)器數(shù)據(jù) simplemvc/view/Panel.js Ext.define('USERS.view.Panel', { extend: 'Ext.panel.Panel' }); 該面板是用來作為網(wǎng)格組件容器。 simplemvc/view/Grid.js Ext.define('USERS.view.Grid' , { extend: 'Ext.grid.Panel', alias : 'widget.userlist', title : 'All Users', store: 'Users', columns: [{ header: 'Name', dataIndex: 'name', flex: 1 },{ header: 'Email', dataIndex: 'email', flex: 1 }] }); 我們的網(wǎng)格視圖中有兩列 名 和 電子郵件 ，并顯示數(shù)據(jù)存儲獲取的 用戶 ，我們前面定義 simplemvc/data/users.json { success: true, users: [ {id: 1, name: 'Amit Sidhpura', email: 'amit@'}, {id: 2, name: 'Ishan Nanavati', email: 'ishan@'} ] } 我們的數(shù)據(jù)是在JSON以上。 |
|
|
