Extjs4 MVC Controller使用方法

這篇文章主要說一下Extjs MVC模式中controller類的使用方法。

很清楚，controller主要幫助我們實現頁面中事件的控制，如下：

1、實現對頁面中某個元素觸發某個事件：將上一篇中的controller改成如下：

Ext.define('MVC.controller.MVCS', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
            'viewport > panel' : {
                render : this.onPanelRendered
            }
        });
    },
    onPanelRendered: function() {
        console.log('The panel was rendered');
    }
});

如上，this.control的功能就是查找到頁面中的某個元素，單引號中的意思是頁面中viewport中的panel元素，render代表當panel渲染完成后出發的事件，后邊為我們寫的事件。

我們可以測試一下在頁面中生成多個panel，app.js改成如下：

Ext.application({
    name: 'MVC',

    appFolder: 'mvc',

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

結果如下：

通過開發工具我們發現輸出了兩次'The panel was rendered',表明我們的controller對viewport中的所有panel元素起了作用。

2、如果相對某一個元素起作用，那么做法如下：

' viewport panel[id = panel1]' : {
        		render : this.onPanelRendered
        	}

　　controller的this.control中的代碼改成如上，意思是viewport中的panel中的id為panel1的元素。

結果：

表明我們的controller對panel1起了作用。

下一篇將view，同時看一下controller和view的搭配使用方法。