ext.js的mvc开发模式详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ext.js的mvc开发模式详解相关的知识,希望对你有一定的参考价值。

ext.js的mvc开发模式详解和环境配置

  在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成Model-View-Controller三层,为JS应用程序的如何组织代码指明了方向,同时使得大规模JS代码变得更加易于重用和维护;这就是Extjs MVC开发模式的初衷。

  找了很多博客才找到能让新手也容易理解的从传统的html,css,js引入的模式到mvc的开发。

  mvc是Model-View-Controller三层

先来一个例子,下面是效果图,它的功能非常简单:在页面打开的时候加载一个列表,当双击列表中一行数据的时候打开编辑窗口,编辑完成之后点击保存按钮,然后更新列表。

技术分享

 

这边是代码:

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--ExtJs框架开始-->
    <script type="text/javascript" src="Ext/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
    <!--ExtJs框架结束-->
    <script type="text/javascript">
        Ext.onReady(function () {
            //1.定义Model
            Ext.define("MyApp.model.User", {
                extend: "Ext.data.Model",
                fields: [
                    { name: name, type: string },
                    { name: age, type: int },
                    { name: phone, type: string }
                ]
            });

            //2.创建store
            var store = Ext.create("Ext.data.Store", {
                model: "MyApp.model.User",
                data: [
                    { name: "Tom", age: 5, phone: "123456" },
                    { name: "Jerry", age: 3, phone: "654321" }
                ]
            });

            //3.创建grid
            var viewport = Ext.create("Ext.container.Viewport", {
                layout: "fit",
                items: {
                    xtype: "grid",
                    model: "MyApp.model.User",
                    store: store,
                    columns: [
                        { text: 姓名, dataIndex: name },
                        { text: 年龄, dataIndex: age, xtype: numbercolumn, format: 0 },
                        { text: 电话, dataIndex: phone }
                    ]
                }
            });

            //4.添加双击编辑
            var grid = viewport.down("grid");
            grid.on("itemdblclick", function (me, record, item, index, e, eopts) {
                //5.创建编辑表单
                var win = Ext.create("Ext.window.Window", {
                    title: "编辑用户",
                    width: 300,
                    height: 200,
                    layout: "fit",
                    items: {
                        xtype: "form",
                        margin: 5,
                        border: false,
                        fieldDefaults: {
                            labelAlign: left,
                            labelWidth: 60
                        },
                        items: [
                            { xtype: "textfield", name: "name", fieldLabel: "姓名" },
                            { xtype: "numberfield", name: "age", fieldLabel: "年龄" },
                            { xtype: "textfield", name: "phone", fieldLabel: "电话" }
                        ]
                    },
                    buttons: [
                        {
                            text: "保存", handler: function () {
                            win.down("form").updateRecord();
                            record.commit();
                            win.close();
                        }
                        }
                    ]
                });
                win.down("form").loadRecord(record);
                win.show();
            });
        });
    </script>
</head>
<body>
</body>
</html>
不是mvc的上图效果代码

 

以上是关于ext.js的mvc开发模式详解的主要内容,如果未能解决你的问题,请参考以下文章

ext.js的mvc

Ext JS 6开发实例

JavaScript MVC 与 ASP.NET MVC(模式差异)

Ext JS MVC 中的可重用操作

详解 MVC ,教你设计架构模式

MVC设计模式详解