EXTJS4控制器Controller详解

原文地址:http://docs.sencha.com/ext-js/4-1/#!/api/Ext.app.Controller

控制器Controller通常是和application绑定在一起的。它们主要作用是监听事件(通常对view),并采取一些action。下面是我们如何创建一个Controller来管理用户:

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

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

init函数是一个特殊的方法,在你的application启动时调用。它是在application的Viewport被创建以前执行的。
init函数是通常作用就是Controller与View进行交互设置,通常用于与另一个Controller的功能 - 控制相结合。控制功能可以很容易地监听View的事件,并采取一些action和handler。如果我们要当panel渲染的时候使用Controller来通知我们,代码如下:

Ext.define('MyApp.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.control中设置了listeners,就和在View中设置是一样的效果。使用了ext4新的组建选择器,如果你还不熟悉ext4新的选择器,请看博文http://www.yuuzle.com/extjs4-and-jquery-selector-comparison.html

使用refs

新的refs系统是Controller最有用的功能。通过使用新Ext.ComponentQuery,很容易很方便的找到View中的引用。让我们来看看在现在这样一个例子:

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

    refs: [
        {
            ref: 'list',
            selector: 'grid'
        }
    ],

    init: function() {
        this.control({
            'button': {
                click: this.refreshGrid
            }
        });
    },

    refreshGrid: function() {
        this.getList().store.load();
    }
});

上面的例子refs中定义了选择器“grid”引用名为“list”,在这里就可以使用getList()方法来调用选择器的结果值了

通常的getter方法

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

    models: ['User'],
    stores: ['AllUsers', 'AdminUsers'],

    init: function() {
        var User = this.getUserModel(),
            allUsers = this.getAllUsersStore();

        var ed = new User({name: 'Ed'});
        allUsers.add(ed);
    }
});

通过指定Model、Store和Controller的关系,再动态加载它们的文件位置(app/model/User.js, app/store/AllUsers.js 和 app/store/AdminUsers.js),并创建他们的getter函数。上面的例子会创建一个新的用户Model实例,并把它添加到ALLUSERS Store。在这个函数中你可以做任何事情,这里只是做了一些简单的功能演示。


转载地址:http://www.yuuzle.com/extjs4-controller-controller-detailed.html

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值