【CenchaTouch 学习笔记】Controller

Cencha Touch是一款基于HTML 5和CSS 3以及JavaScript的Web App框架。

Cencha开发遵循MVC开发模型。Model中定义了应用中的数据模型，View中保存了应用的页面布局，Controller中负责响应Web App中的事件，连接数据与页面。

 

Controller保存在应用程序的上下文中，web app初始化时会实例化每个controller并保存他们的映射。

controller的config中的两个核心是refs和control。refs其实是一个名值对，对页面的各个元件命名。control中定义了元件的各个event的处理函数。然后在config之后定义每个函数的行为。如下面例子。

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

    config: {

　　　　refs: {
            loginButton: 'button[action=login]'
       },

　　　　control: {
            loginButton: {
                tap: 'doLogin'
            },
            'button[action=logout]': {
                tap: 'doLogout'
            }
        }
    },

    doLogin: function() {
        // called whenever the Login button is tapped
    },

    doLogout: function() {
        // called whenever any Button with action=logout is tapped
    }
});

 refs中的定义了一个对象loginButton，代表了action为login的按钮。control中定义了loginButton的tap事件触发时，将执行doLogin方法。本例中还有一个没有经过refs定义映射的元件，也在control定义了其事件触发方法，action为logout的按钮在tap事件触发时，执行doLogout方法。