ExtJS学习笔记(十) MVC

最新推荐文章于 2017-01-24 15:28:09 发布

原创最新推荐文章于 2017-01-24 15:28:09 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs

ExtJS 专栏收录该内容

13 篇文章

订阅专栏

目录结构

这里写图片描述

app 存放项目所有的类
controller 存放controller类
model      存放model类，定义数据的类型(实体类)
store      存放stroe类，用来获取数据
view       存放view类，页面展示的效果
server     c#后台程序，模拟从数据库获取数据
ux         存放一些其他功能的类
app.js     程序入口
index.html 程序首页

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="/Scripts/extjs-5.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"
        rel="stylesheet" type="text/css" />
    <link href="/Scripts/Awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <title></title>
    <script src="/Scripts/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/extjs-5.1/ext-all.js" type="text/javascript"></script>
    <script src="/Scripts/extjs-5.1/packages/ext-locale/build/ext-locale-zh_CN.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

app.js

// 程序的入口
Ext.application({
    name: "Demo",   //定义的命名空间
    paths: "app",   //指明应用的根目录
    autoCreateViewport: true,    
    // 自动创建application的OPOA视图，默认加载并初始化app/view/Viewport.js
    // launch: function() {}  // 初始化之后调用
    // init: function() {}    // 初始化时调用
});

view/Viewport.js

Ext.define("Demo.view.Viewport", {
    extend: "Ext.container.Viewport",
    requires: [
        "Demo.view.tree.Navigation" // 加载Navigation.js
    ],
    layout: "border",
    defaults: {
        split: true    // 允许手动调整大小,除了中心
    },
    items: [{
        region: "west",
        width: 300,
        collapsible: true,
        title: "菜单列表",
        xtype: "navigation" // 加载导航，navigation是Demo.view.tree.Navigation中定义的别名
    }, {
        id: "centerInfo",
        region: "center",
        title: "内容详情",
        layout: {
            type: "hbox",
            pack: "center",
            align: "middle"
        }
    }]
});

VeiwPort 代表整个浏览器显示区域，该对象渲染到页面的body 区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort 实例。Viewport 不需要再指定renderTo，而我们也看到Viewport 确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改改。Viewport 主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport 上常用的布局有fit、border 等，当然在需要的时候其它布局也会常用。

view/tree/Navigation.js

Ext.define("Demo.view.tree.Navigation", {
    extend: "Ext.tree.Panel",
    requires: [
        "Demo.controller.tree.Navigation"  // 加载对应的控制器
    ],
    alias: "widget.navigation",  // 类的别名
    controller: "demo_tree_controller", // 对应控制器的别名
    useArrows: true,
    animate: true,
    collapsible: true,
    store: Ext.create("Demo.store.tree.Navigation"), // 加在数据
    initComponent: function () {
        this.callParent();
    }
    //    添加控件事件的一种方式，另外一种是加载在controller
    // listeners: {
    //     rowclick: "onClick"   // 点击叶子时候触发的事件，在controler中配置
    // }
});

数据的别名一般都有：
controller.XXX
store.XXX
widget.XXX 这个一般是我们自定义的view类的别名，通常的调用方式是: xtype:"XXX"

controller/tree/Navigation.js

Ext.define("Demo.controller.tree.Navigation", {
    extend: "Ext.app.ViewController",
    alias: "controller.demo_tree_controller",
    init: function () {
        // 添加控件事件的一种方式，另外一种是加载在view
        // 推荐使用这种方式
        this.control({
            "demo_view_navigation": {
                rowclick: this.onClick
            }
        });
    },
    onClick: function (view, rec, item, index, e) {
        if (rec.data.id != -1) {
            var centerInfo = Ext.getCmp("centerInfo");
            centerInfo.removeAll();
            centerInfo.add(Ext.create(rec.data.class));
        }
    }
});

store/tree/Navigation.js

Ext.define("Demo.store.tree.Navigation", {
    extend: "Ext.data.TreeStore",
    model: "Demo.model.tree.Navigation",  // 数据的实体类型
    proxy: {
        type: "ajax",
        url: "/app/server/tree/Navigation.ashx?action=loadData",
        reader: {
            type: 'json',
            rootProperty: 'nodes'
        }
    },
    root: {
        text: "所有菜单",
        id: "-1"
    },
    autoLoad: true // 自动加载数据
});

model/tree/Navigation.js

Ext.define("Demo.model.tree.Navigation", {
    extend: "Ext.data.Model",
    fields: [
        { name: "id", type: "int" },
        { name: "text", type: "string" },
        { name: "class", type: "string" },
        { name: "leaf", type: "boolean" }
    ]
});

server/tree/Navigation.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Ext.app.server.tree
{
    /// <summary>
    /// Navigation 的摘要说明
    /// </summary>
    public class Navigation : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            string action = context.Request["action"];
            switch (action)
            {
                case "loadData":
                    loadData(context);
                    break;
            }
        }

        private void loadData(HttpContext context)
        {
            string[,] data = { { "0", "网格(grid)", "Demo.view.grid.Grid" }, { "1", "表单(form)", "Demo.view.form.Form" }, { "2", "树(tree)", "Demo.view.tree.Tree" } };
            string json = "{\"nodes\":[";
            for (int i = 0; i < data.GetLength(0); i++)
            {
                json += "{\"text\":\"" + data[i, 1] + "\",\"id\":\"" + data[i, 0] + "\",\"class\":\"" + data[i, 2] + "\",\"leaf\":\"true\"},";
            }
            json = json.Substring(0, json.Length - 1) + "]}";
            context.Response.ContentType = "application/json;charset=utf-8";
            context.Response.Write(json);
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

程序源码：https://github.com/ZangYuSong/Ext