ExtJS 4 MVC架构讲解

最新推荐文章于 2017-03-15 14:10:31 发布
最新推荐文章于 2017-03-15 14:10:31 发布
阅读量2.3k 收藏 1
点赞数 1
分类专栏： ExtJS4学习 文章标签： extjs mvc 架构 界面开发 设计

本文转自：Show Framework

转载链接：http://showframework.com/blog/2012/07/02/extjs-mvc-architecture/

大规模客户端应用通常不好实现不好组织也不好维护，因为功能和人力的不断增加，这些应用的规模很快就会超出掌控能力，ExtJS 4 带来了一个新的应用架构，不但可以组织代码，还可以减少实现的内容
新的应用架构遵照一个类MVC的模式，模型（Models）和控制器（Controllers）首次被引入。业界有很多种MVC架构，基本大同小异，ExtJS 4的定义如下：

  • Model模型 是字段和它们的数据的集合，例如User模型带有username和password字段，模型知道如何持久化自己的数据，并且可以和其他模型关联，模型跟ExtJS 3 中的Record类有点像（区别是，Record只是单纯的扁平结构，而Model可以nest），通常都用在Store中去展示grid和其他组件的数据
  • View视图 是组件的一种，专注于界面展示 - grid, tree, panel 都是view
  • Controllers控制器 一个安放所有使你的app正确工作的代码的位置，具体一点应该是所有动作，例如如何渲染view，如何初始化model，和app的其他逻辑

这篇教程中将创建一个简单的管理用户数据的例子，做完这个例子，你会学会如何用ExtJS 4的架构把简单的应用组织到一起。
应用架构是关于提供结构和一致性，是关于真实的类和框架代码的，遵守约定可以带来很多重要的好处：

  • 每个应用都是相同的工作方式，所以你只需要学习一次
  • 可以很容易的共享代码，因为所有应用工作模式都一样
  • 可以创建属于自己的混淆的版本用于发布

File Structure文件结构

ExtJS 4 应用都遵循一个统一的目录结构，每个应有都相同。详情可以参见ExtJS 4 入门，MVC中，所有类都放在app目录里面，这个目录可以有子目录，代表的是命名空间（一个子目录对应一个命名空间），使用不同的目录存放views,models,controllers,stores，当我们完成例子的时候，目录结构应该和下面截图一样：

folderStructure

在这个例子中所有文件都在'account_manager'目录中，ExtJS SDK必须的文件在目录ext-4.0中，因此，index.html应该如下：

1
2
3
4
5
6
7
8
9
10
11
12

<html>
<head>
    <title>Account Manager</title>

    <link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css">

    <script type="text/javascript" src="ext-4.0/ext-debug.js"></script>

    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

Creating the application in app.js 在app.js中创建应用

每个ExtJS 4的应用都从一个Application类的实例开始，这个实例包含应用的全局配置（例如应用的名字），这个实例也负责维护对全部模型、视图、控制器的引用的维护，还有一个launch函数，会在所有加载项加载完成之后调用。
让我们创建一个简单的Account Manager应用管理用户帐户。首先需要选择一个全局命名空间，所有ExtJS4应用都需要有一个全局命名空间，以让所有应用中的类安放到其中，这个例子中我们使用AM(Account Manager)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Ext.application({
    requires: 'Ext.container.Viewport',
    name: 'AM',

    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                }
            ]
        });
    }
});

首先我们调用了Ext.application创建了一个应用实例，并设置了应用名称”AM”，这样做会自动创建一个全局变量”AM”，并自动注册命名空间”AM”到Ext.Loader，用类似的方式也设置了app作为appFolder。另外在launch函数中，创建了一个Viewport，只包含一个撑满浏览器窗口的Panel。

panelView

Defining a Controller 定义一个控制器

控制器是应用的粘合剂，它们所作的事情就是监听事件并执行动作，继续我们的Account Manager应用，创建一个控制器。创建app/controller/Users.js这个文件，并添加如下代码：

1
2
3
4
5
6
7

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        console.log('Initialized Users! This happens before the Application launch function is called');
    }
});

接下来在app.js中添加对Users控制器的引用：

1
2
3
4
5
6
7
8
9

Ext.application({
    ...

    controllers: [
        'Users'
    ],

    ...
});

当我们通过index.html查看应用，Users控制器会被自动加载（因为在app.js的Application中增加了引用），并且Users的init方法会在launch之前调用
init方法是个极好的地方，可以用来设置如何和view交互，通常都使用Controller的一个方法control，control方法使得监听view的事件变的容易，更新一下控制器，让它告知我们panel何时渲染：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },

    onPanelRendered: function() {
        console.log('The panel was rendered');
    }
});

我们已经更新了init方法，使用this.controll给视图设置监听器。这个controll方法，使用最新的组件查询引擎（ComponentQuery）可以快速方便的找到页面上的组件。如果你对ComponentQuery不熟悉，可以查看ComponentQuery文档进行详细了解。简要一点，ComponentQuery可以允许我们使用一个类似css选择器的方式找到组件。
在例子的init方法中我们应用了'viewport > panel'，可以解释为“查找Viewport直接后代中的所有Panel组件”，然后我们提供了一个对象匹配事件名称（这个例子中只用了render）来提供响应函数。全部的影响就是无论哪个组件符合我们的选择器，当它的render事件触发时，我们的onPanelRendered函数都会被调用。
当我们运行应用程序，可以看到如下图所示：

firstControllerListener

这不是最激动人心的应用，但是它展示给我们，开始一段有组织的代码是多么容易。让我们增加一点内容，加一个grid。

Defining a View 定义一个视图

直到现在，我们的应用只有很少代码，只有两个文件app.js和app/controller/Users.js，现在我们想增加一个grid显示所有系统中的用户，是时候更好的组织一下逻辑并开始使用视图了。
视图也是组件，通常都是ExtJS现有组件的子类，现在准备创建用户表，先创建app/view/user/List.js，添加代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    title : 'All Users',

    initComponent: function() {
        this.store = {
            fields: ['name', 'email'],
            data  : [
                {name: 'Ed',    email: 'ed@sencha.com'},
                {name: 'Tommy', email: 'tommy@sencha.com'}
            ]
        };

        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];

        this.callParent(arguments);
    }
});

我们的视图类就是一个普通的类，这个例子中我们扩展了Grid组件，并设置了别名，这样我们可以用xtype的方式调用这个组件，另外我们也添加了store和columns的配置。

接下来我们需要添加这个视图到Users控制器。因为我们用'widget.'设置了别名，所以我们可以使用userlist作为xtype，就像我们使用之前使用的'panel'。

1
2
3
4
5
6
7
8
9
10
11

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List'
    ],

    init: ...

    onPanelRendered: ...
});

接下来修改app.js让视图在viewport中渲染，需要修改launch方法

1
2
3
4
5
6
7
8
9
10
11
12

Ext.application({
    ...

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: {
                xtype: 'userlist'
            }
        });
    }
});

唯一需要注意的是我们在views数组中指定了'user.List'，这告诉应用去自动加载对应的文件，ExtJS4 的动态加载系统会根据规则从服务器自动拉取文件，例如user.List就是规则，把.替换成/就是文件存放路径。刷新一下页面：

firstView

Controlling the grid 对列表的控制

注意onPanelRendered方法依然被调用，因为我们的grid依然满足'viewport > panel'选择器，因为我们的视图继承自Grid，从而继承自Panel

现在我们需要收紧一下选择器，我们使用xtype作为选择器替换之前的'viewport > panel'，监听双击事件，以便继续做编辑用户信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List'
    ],

    init: function() {
        this.control({
            'userlist': {
                itemdblclick: this.editUser
            }
        });
    },

    editUser: function(grid, record) {
        console.log('Double clicked on ' + record.get('name'));
    }
});

注意我们更换了组件查询选择器为'userlist'，监听的事件更改为'itemdblclick'，响应函数设置为'editUser'，现在只是简单的日志出双击行的name属性：

doubleClickHandler.png

可以看到日志是正确的，但我们实际想做的是编辑用户信息，让我们现在做，创建一个新的视图app/view/user/Edit.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

Ext.define('AM.view.user.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.useredit',

    title : 'Edit User',
    layout: 'fit',
    autoShow: true,

    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        fieldLabel: 'Name'
                    },
                    {
                        xtype: 'textfield',
                        name : 'email',
                        fieldLabel: 'Email'
                    }
                ]
            }
        ];

        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
        ];

        this.callParent(arguments);
    }
});

这回我们还是继承自一个现存的类Ext.window.Window，还是使用的initComponent方法去指定复杂的items和buttons对象，我们使用了一个'fit'布局和一个表单，表单包括了要编辑的用户信息字段，最后我们创建了两个按钮，一个用来关闭窗口，另一个用来保存变更。
现在我们要做的就是在控制器加载这个视图，渲染并且加载用户信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List',
        'user.Edit'
    ],

    init: ...

    editUser: function(grid, record) {
        var view = Ext.widget('useredit');

        view.down('form').loadRecord(record);
    }
});

首先我们用Ext.widget方法创建了视图，这个方法等同于Ext.create('widget.useredit')，然后我们又一次借助组件查询找到了窗口中的表单，每个ExtJS4中的组件都有一个down方法，可以借助组件查询支持的选择器来迅速找到任意下层的组件。
双击表格中的一行可以看到：

loadedForm

Creating a Model and a Store

现在我们有了表单，可以开始编辑和保存用户信息了，但是这之前需要做一点点重构。
AM.view.user.List创建了一个内联的Store，这样可以工作但是我们需要把Store分离出来以便我们在应用的其他位置可以引用并更新其中的信息，我们把它放在它应该在的文件中app/store/Users.js：

1
2
3
4
5
6
7
8

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    fields: ['name', 'email'],
    data: [
        {name: 'Ed',    email: 'ed@sencha.com'},
        {name: 'Tommy', email: 'tommy@sencha.com'}
    ]
});

现在我们需要做两处变更，首先我们需要让Users初始化的时候加载这个Store：

1
2
3
4
5
6
7

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: [
        'Users'
    ],
    ...
});

然后我们要把之前直接在视图中内联的store更改掉，app/view/user/List.js，改成用id引用store

1
2
3
4
5
6
7
8
9

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    //we no longer define the Users store in the `initComponent` method
    store: 'Users',

    ...
});

控制器的代码中中引入了store，store会被自动加载到页面并赋予一个storeId，这让视图中使用store变的容易（这个例子中，只要配置store: 'Users'就可以了）
现在我们只是在store中内联的定义了两个字段 (‘name’ 和 ‘email’)，这样可以工作，但是ExtJS4中有一个强大的Ext.data.Model类，在编辑用户的时候我们可以借助它，使用Model重构一下Store，在app/model/User.js中创建一个Model：

1
2
3
4

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

这就是定义我们的Model需要做的，现在需要让Store引用Model替换掉使用内联字段的方式，并且让控制器也引用Model：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//the Users controller will make sure that the User model is included on the page and available to our app
Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: ['Users'],
    models: ['User'],
    ...
});

// we now reference the Model instead of defining fields inline
Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',

    data: [
        {name: 'Ed',    email: 'ed@sencha.com'},
        {name: 'Tommy', email: 'tommy@sencha.com'}
    ]
});

我们的重构可以让接下来的工作简单一下，但是不会影响现有功能，我们刷新一下页面，检查一下是否正常工作：

loadedForm

Saving data with the Model 利用模型保存数据

现在我们有了一个用户数据表，双击每一行都能打开一个编辑窗口，现在要做的是保存编辑变更，编辑窗口有一个编辑表单，还有保存按钮，现在我们更新一下控制器让保存按钮有响应：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Ext.define('AM.controller.Users', {
    init: function() {
        this.control({
            'viewport > userlist': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },

    updateUser: function(button) {
        console.log('clicked the Save button');
    }
});

我们在this.control方法中增加了一个组件查询选择器'useredit button[action=save]'，这里说明一下，这个选择器和第一个工作方式相同，注意我们定义保存按钮的时候增加了一个配置{action: 'save'}，这个选择器的意思就是选择xytpe是useredit的组件下的所有action属性是save的按钮
检查一下updateUser是不是被调用了：

saveHandler

上图说明工作正常，接下来填充updateUser真正的逻辑。我们需要把数据从表单中取出，再设置回store中：

1
2
3
4
5
6
7
8
9

updateUser: function(button) {
    var win    = button.up('window'),
        form   = win.down('form'),
        record = form.getRecord(),
        values = form.getValues();

    record.set(values);
    win.close();
}

让我们分解一下这里都做了什么。我们的响应函数接收到按钮的引用，但是我们关心的是表单和窗口，通过按钮和组件查询，可以找到关心的东西，这里首先用了button.up('window')找到了窗口，然后用win.down('form')找到了表单。
这之后我们取出表单关联的record并用表单中的输入值更新了record，最后关闭了窗口关注回到表格上，我们把用户名更改为'Ed Spencer'点击保存应该可以看到：

updatedGridRecord

Saving to the server 保存到服务器

很简单吧。让我们增加和服务器端的交互完成这个例子。现在我们还是应编码了两行表格的数据，现在让我们通过ajax加载：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            successProperty: 'success'
        }
    }
});

这里我们去除了'data'属性，替换成proxy，代理是让Store或者Model加载和保存数据的一个方式，有AJAX，JSONP，HTML5的localStorage本地存储等。这里我们使用了一个简单的AJAX代理，让它通过URL 'data/users.json'加载数据。
我们同时给代理附加了一个reader，reader是用来把服务器返回的数据解码成Store能理解的格式，这次我们使用了JSON reader，并且指定了root和successProperty配置（JSON reader的详细配置看文档），最后我们创建一下数据文件data/users.json，输入内容：

1
2
3
4
5
6
7

{
    success: true,
    users: [
        {id: 1, name: 'Ed',    email: 'ed@sencha.com'},
        {id: 2, name: 'Tommy', email: 'tommy@sencha.com'}
    ]
}

其他的变更就是我们给Store设置了autoLoad属性并设置为true，这意味着Store生成之后会自动让Proxy加载数据，刷新一下页面应该是看到和之前同样的结果，不同的是现在不是在程序中应编码数据了
最后的事情是将变更传回服务器端，这个例子中我们使用静态的JSON文件，没有使用数据库，但足够说明我们例子的了，首先做一点点变化告知proxy用于更新的url：

1
2
3
4
5
6
7
8
9
10
11
12

proxy: {
    type: 'ajax',
    api: {
        read: 'data/users.json',
        update: 'data/updateUsers.json'
    },
    reader: {
        type: 'json',
        root: 'users',
        successProperty: 'success'
    }
}

依然从users.json读取数据，但是变更会发送到updateUsers.json，这里我们做一个模拟的应答回包以让我们知道程序可以正确工作，updateUsers.json只需要包含{"success": true}，其他要做的就是让Store在编辑之后进行同步，需要在updateUser函数中增加一行代码：

1
2
3
4
5
6
7
8
9
10

updateUser: function(button) {
    var win    = button.up('window'),
        form   = win.down('form'),
        record = form.getRecord(),
        values = form.getValues();

    record.set(values);
    win.close();
    this.getUsersStore().sync();
}

现在我们可以运行一下整个例子，检查是不是每个功能都正常，编辑表格中的一行，看看能不能正确的把请求发送给updateUser.json

postUpdatesToServer

Deployment 发布

新出台的Sencha SDK Tools 点此下载 让ExtJS4的应用发布变的轻松。这个工具可以让你生成依赖清单，并生成一个最小化版本
详细介绍可以查看 ExtJS 入门

Next Steps 下一步

这里我们创建了一个非常简单的例子，但是基本功能都囊括了，你可以开始举一反三开发其他功能了，记得遵守开发模式，代码组织方式，以上代码的例子在Ext JS 4 SDK中，examples/app/simple目录中


Sunny123
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs_mvc架构_实例
09-06
extjs_mvc架构_实例
ExtJS 4 MVC架构讲解 – ExtJS4中文教程
weixin_30924087的博客
08-13 312
ExtJS 4 MVC架构讲解 – ExtJS4中文教程 Posted on 2012/07/02 by ishowshao ExtJS MVC架构讲解 本文地址 http://www.showframework.com/2012/07/extjs-mvc-architecture/ 本文PDF下载 大规模客户端应用通常不好实现不好组织也不好维护，因为功能和人力的不...
ExtJS 之MVC框架理解
jwl_yifeng的专栏
08-15 974
这段时间公司让做的项目比较复杂，同时提需求的领导也说了这个项目有些违反常规，所以设计思路有些混乱，但是既然领导交代下来任务，就应该完成。因为刚刚毕业，所以对各种知识的理解不是很深刻，在技术上自己也进行了一些尝试，虽然能满足自己的需求，但是却对后续的项目任务有影响，所以和老员工商量，决定磨刀不误砍柴工---直接上复杂的。对于ExtJS4.0来说可以说是完全没接触过，这也是第一次学习前台框架。 好了
ExtJS中Controller类的动态加载.
weixin_34049948的博客
05-16 99
2019独角兽企业重金招聘Python工程师标准>>> ...
Extjs MVC开发模式详解
luckypeng的专栏
01-16 5963
在JS的开发过程中，大规模的JS脚本难以组织和维护，这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题，在Extjs 4.x版本中引入了MVC开发模式，开始将一个JS（Extjs）应用程序分割成Model-View-Controller三层，为JS应用程序的如何组织代码指明了方向，同时使得大规模JS代码变得更加易于重用和维护；这就是Extjs MVC开发模式的初衷。 在官方给
ExtJS4中的requires使用方法
sd396791336的专栏
12-03 7045
ExtJS4的requires是新增的机制，主要是实现异步加载机制。这样在不点击对应的按钮或者选项的时候就不会加载对应的js文件，提高了加载速度和用户等待时间。 requires机制的实现通过一个Ext.Loader.setConfig函数来设置文件寻找的映射目录，然后在需要用到对应js文件的时候使用Ext.require进行加载。 文件的存储结构如下所示： ux文件
Extjs4 MVC开发笔记源码
12-15
Extjs4 MVC开发笔记源码，此源码已经将命名空间修改为Soyi,由于涉及到一些公司信息，将所有数据库中的数据清除，由于时间仓促。只有备案管理的grid是可以使用的，其他的功能，按照备案管理的文件照猫画虎即可实现。 ...
extjs4mvc的crud
02-25
extjs4 前端mvc模式 货物处理的crud
Extjs4之MVC应用架构
06-08
Extjs4之MVC应用架构，完整的实用例子
ExtJS4 MVC演示项目
05-26
ExtJS4 MVC演示项目
Extjs4.1-mvc框架完整无后端直接运行
08-19
自己项目中完整的基于extjs4.1的mvc框架，我把它从项目中剥离出来，无后端集成，可以直接运行index.html，样式主题可以自己引用ext4.1提供的theme，该框架基于自己封装的自定义的基于ext4mvc的公共组件，需要一定的ext和js基础。
Extjs 4 MVC Demo 示例
11-02
原本是打算采用EXTJS4 的MVC做应用框架，已完成左侧树菜单、tabpanel（内嵌Grid，带查询及分页功能） 但是由于网络上的相关文章太少，公司对这个框架提出疑问，以后会不会遇到问题，所以改用ext3了...唉
Extjs的Requiers作用
热门推荐
曾庆磊的个人博客
12-03 1万+
有的时候项目中要写一些扩展组件，随着扩展组件的增加，会造成有的页面需要使用，而有的页面不需要使用的问题，这对组件的js文件的引用造成了烦恼：如果每个页面都去引用的时候会造成浏览器打开页面的流量的增加而影响资源，如果需要的时候引用管理起来又很麻烦，Extjs4.0帮我们解决了这个问题，那就是Ext.requires。它可以实现根据我们的需要动态加在所需要的组件文件，很灵活也很方便。下面我们用例子进行
extjs4简介
不了了之专栏
12-06 1498
Ext JS 4简介 Ext JS 4目前是Sencha的产品，4.x的正式版本号是4.0.7。Ext JS 4提供商业版本，但如果您的项目是开源的，则可以免费使用Ext JS 4。Ext JS的论坛目前非常活跃；Ext JS还在不但地升级改进，据Sencha官方统计，使用Ext JS的开发者数目在一百万以上。 Ext JS 4与之前版本的比较 渲染效率提高 所有类都经过调
extjs4如何调用controller？
看不过的黑工坊
02-09 3212
转自：http://www.tuicool.com/articles/UreQFzQ extjs mvc动态加载controller 原文  http://peihexian.iteye.com/blog/2028035 app.js var application; Ext.tip.QuickTipManager.init(); E
Ext Controller与ViewController的区别详解
Java7_7的博客
03-15 2363
为组件添加事件，就要用到控制器了。Extjs5提供了两种控制器：Controller和ViewController，这两种控制器都继承自BaseController。从功能上来讲，两者的大多数功能都是一致的，也就是说，在不严格区分的情况下，这两者选哪个都能用。从作用范围上讲，Controller范围比较大，属于应用级别的，ViewController范围比较小，属于界面级别的，也就是说Contro
extjs使用、总结、感悟
zbraccp的博客
12-12 2923
提到ExtJs，笔者可以说是感触颇深，本人经历了Extjs许多个版本，大版本从2.0开始，我第一次关注它！之后再项目中用到了3.0，4.2，6.0等不同版本，可以说见证了Extjs的发展贺强大之处。 简单解释下什么是Extjs。它是一个高度分装的前端开发语言:javascript。高度分装：是指封装了几乎所有项目上都会用的前端组件，而不是不可拆解的。扩展性相当高，是我见到过最强大的前端框架。之前还
extjs 调用controller 调用其他js文件
事多易忘、提笔留忆
09-15 5806
关于ext开发中，不同文件之间函数调用问题   刚开始的时候以为不可以调用其他文件的函数，上网查了也没找到。 仔细看过API文档后发现，ext提供了这个功能。 在extjs的MVC架构中，一般所有处理事件都写在controller中， 所以有些时候可能会用到其他controller的函数。 Ext.app.controller里有个getController这个方法可以获取其他app或
extjs4 api官网
最新发布
11-18
extjs4是一个功能强大的JavaScript框架，用于构建交互式的Web应用程序。它提供了丰富的组件和工具，帮助开发人员快速创建现代化的用户界面。extjs4的API官网为开发人员提供了详细的文档和示例，帮助他们更好地了解和使用该框架。 在extjs4的API官网上，开发人员可以找到extjs4框架的所有核心组件和工具的文档。这些文档包括每个组件和工具的属性、方法和事件等详细信息，帮助开发人员在实际开发中更好地理解和使用这些组件和工具。此外，官网还提供了丰富的示例代码和演示，开发人员可以通过实际的代码来学习如何使用不同的组件和工具来构建各种复杂的交互式界面。 除了文档和示例之外，extjs4的API官网还提供了许多有用的资源，如常见问题解答、用户论坛和文档更新等，帮助开发人员更好地解决问题和获取最新的信息。总之，extjs4的API官网为开发人员提供了一个全面的学习和使用extjs4框架的平台，帮助他们更好地利用这个强大的框架来构建现代化的Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值