|
ExtJs4之简单MVC应用
2011年05月23日 星期一 10:43
我们的 简单MVC应用 具有以下文件夹结构：
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 包含所有的应用程序库和任何所需的Ext JS的 app.js 其中包含应用程序类。 Ext JS的提供工具，使我们能够产生（）JSBuilder文件格式的文件JSB3所有依赖关系的形式一，营造一个最小的自定义生成的正是我们的应用需求，但我们不打算使用，在这个例子并包括 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个应用程序级开始应用的实例，这个类包含应用程序的全局设置的，它也包含一个发射功能，它运行时自动加载的一切。 我们的应用程序类包含属性 名称 定义了我们的应用程序的全局命名空间。 在默认情况下申请财产 autoCreateViewport 设置为 真 ，因此它会自动创建一个视口，但我们只想要一个根格在一个文档，所以我将其设置为 假 。 控制器 应用程序中的属性列表所有控制器。 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(); } }); 主控制器的作用是监听事件，并采取一些行动。 所有的控制器继承父 Ext.app.Controller ，模型 财产清单所有的模型，它定义了协会的数据和格式， 存储 列出所有的商店，它定义了数据或获取并从服务器 的意见 ，列出了所有的意见在我们的应用需要它的网格。 simplemvc/model/User.js Ext.define('USERS.model.User', { extend: 'Ext.data.Model', fields: ['id', 'name', 'email'] }); 模型定义了数据格式和协会，我们的数据有编号，姓名和电子邮件. 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' } } }); 从我们的商店获取我们前面定义的模型为基础的服务器数据 simplemvc/view/Panel.js Ext.define('USERS.view.Panel', { extend: 'Ext.panel.Panel' }); 该面板是用来作为网格组件容器。 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 }] }); 我们的网格视图中有两列 名 和 电子邮件 ，并显示数据存储获取的 用户 ，我们前面定义 simplemvc/data/users.json { success: true, users: [ {id: 1, name: 'Amit Sidhpura', email: 'amit@'}, {id: 2, name: 'Ishan Nanavati', email: 'ishan@'} ] } 我们的数据是在JSON以上。 |
|
|
