Extjs 4.2.0 MVC 架构
内容：
1. 文件结构
2. 创建项目
3. 定义控制器
4. 定义视图
5. 控制Grid
6. 创建Model和Store
7. 通过Model保存数据
8. 保存到服务器端
大型客户端程序通常都难写，难组织，难以维护。项目经常由于增加功能，增加开发人员而很快失控。Ext JS 4提出新的项目结构，不仅组织你的代码，并且减少代码量。
我们的系统结构延续“类MVC模式”，第一次引入Models（模型）和Controllers（控制器）的概念。现在有很多MVC架构，他们或多或少有细微差别。以下是我们对MVC的定义：
∙ Model是字段和对应数据的组合（例如User Model有username和password两个字段）。Models知道如何通过数据包(data package)持久化，还可以通过associations（联系）同其他models关联。Models很类似于Ext Js 3里的Record类，通常与Stores一起将数据展现到grids和其他components上。
∙ View可以是任何类型的component，grids, trees和panels都是视图。
∙ Controllers 是一个特殊的地方，用来放使application工作的代码 - 可以是渲染视图的，初始化models的，或者其他的应用逻辑。
在这篇文档中我们将创建一个管理用户数据的简单应用，最终你将指导如何使用Ext JS 4应用架构去组织你的应用。
对系统架构来说，提供结构和保持一致性，与实际的类和framework代码同样重要。遵循我们的惯例可以带来一系列非常重要的好处：
∙ 所有的应用都以同一种方式工作，所以你只需要学习一次。
∙ 不同应用之间可以共享代码，因为他们都以同种方式工作
∙ 你可以用我们的build工具来创建你的系统的优化版本供production使用
1. 文件结构
------------------------------------------------------------------------------------------------------------
Ext JS 4 对所有应用定义相同的目录结构。关于应用的基本文件结构的详细解释请参考Getting Started Guide. 应用MVC结构，所有的类都在app/文件夹下，依次包含子文件夹来命名你的models, views, controllers和stores。以下是我们做完这个简单的例子后，最终的文件结构：
在这个例子里，我们将整个application放到”account_manager”文件夹下，Ext JS 4 SDK里的必要文件放到 ext-4/文件夹下。因此我们的index.hmtl内容如下：
<html>
<head>
    <title>Account Manager</title>
    <link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">
    <script type="text/javascript" src="ext-4/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
2.在app.js里创建项目
Ext JS 4的所有应用都以Application这个实例作为入口。Application里包含你的应用的全局
设置（例如应用的名称），并且维护此应用中所有models, views 和controllers的引用。Application同事包含launch方法，这个方法在加载时自动运行。
现在让我们创建一个简单的Account Manager应用来帮助我们管理用户账号。首先我们定义一个全局namespace。所有Ext JS的应用程序应该只使用一个单一的全局变量，应用所有的类都嵌套在这个全局变量中。通常我们希望这个全局变量短一点，所以在这个例子里我们使用“AM“：
Ext.application({
    requires: ['ainer.Viewport'],
    name: 'AM',
    appFolder: 'app',
    launch: function() {
        ate('ainer.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                }
            ]
        });
    }
});
这里发生了几件事情。首先我们invoke（触发）了Ext.application来创建一个Application类的实例，传了一个名称“AM“给它。这将自动为我们创建一个全局变量AM，代表由”appFoder”配置的“app”文件夹，并将这个namespace注册到Ext.Loader。其次，为我们提供了一个简单的launch方法，创建了一个Viewport, 这个Viewport包含一个填充整个screen的Panel。
3.定义控制器
Controllers-控制器是用来绑定整个application的胶水。它们真正做的就是监听视图（通常来自于视图）以及做出响应。接着Account Manager这个例子，我们创建一个控制器。在app/Controller下创建一个User.js，加上以下代码：
Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    init: function() {
        console.log('Initialized Users! This happens before the Application launch function is called');
mvc实例    }
});
现在让我们在app.js里加上刚创建的Users 控制器：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。