senchatouch之container层注册事件

      假设界面有一个登录按钮， 点击登录按钮执行登录操作。按照senchatouch的mvc框架约定，界面代码要在view层写，事件需要在container层写，那怎样在container层注册事件将view层串联起来呢？

   我们先上界面view层代码：

Ext.define('Mpos.view.Login', {
	extend: 'Ext.form.Panel',
	alias: 'widget.login',
	requires : [ 'Ext.TitleBar', 'Ext.form.Panel', 'Ext.form.FieldSet',
			'Ext.field.Text', 'Ext.field.Password'],
	config : {
		itemId: 'login', 
		cls : 'login',
		fullscreen : true,
		layout : {
			type : 'vbox',
			align : 'middle'
		},
		items : [ {
			xtype : 'titlebar',
			title : '登录Demo',
			docked : 'top'
		}, {
			xtype : 'container',
			height : '20%'
		},

		{
			xtype : 'container',
			layout : 'hbox',
			width : '60%',
			items : [ {
				xtype : 'container',
				flex : 1,
				layout : 'vbox',
				items : [ {
					itemId : 'loginForm',
					xtype : 'formpanel',
					width : '100%',
					height : 180,
					items : [ {
						xtype : 'fieldset',
						title : '请登录',
						items : [{
							itemId : 'username',
							xtype : 'textfield',
							name : 'emp.code',
							label : '用户名',
							nextFocus : 'password'
						}, {
							itemId : 'password',
							xtype : 'passwordfield',
							name : 'emp.password',
							label : '密码'
						} ]
					} ]
				}, {
					xtype : 'container',
					layout : 'hbox',
					items : [ {
						flex : 1
					}, {
						itemId : 'loginButton',
						xtype : 'button',
						text : '登录'
					}, {
						flex : 1
					} ]
				}, {
					itemId : 'message',
					xtype : 'container',
					height : 50
				} ]
			}, {
				itemId : 'numberpad',
				xtype : 'numberpad'
			} ]
		}

		]
	}

});

用户需要输入用户名、密码点击登录按钮登录。为界面定义了别名alias: 'widget.login'， 另外定了3个控件的ID, 用户名输入框itemId : 'username',，密码输入框itemId : 'password'，登录按钮itemId : 'loginButton'， 这三个值非常重要。在container层写事件代码时要用到。现在上container层代码：

我们定义一个EmployeeManager管理用户相关界面操作

Ext.define('Mpos.controller.EmployeeManager', {
    extend: 'Ext.app.Controller',
	requires: ['Mpos.service.Session'],
    config: {
        refs: {
        },
        control: {
            "login #loginButton": {
            	tap: 'onLoginButtonTap'
            }
        }
    },
    
    //用户登录按钮响应事件
    onLoginButtonTap: function(button, e, eOpts) {
    	console.log('用户登录按钮响应事件');
    	var form = button.up('formpanel');
	session.login({
		params: form.getValues(),
		callback : function() {
			Ext.Viewport.removeAll(true);
			var view = Ext.create('Mpos.view.Main');
			view.setMerchantUser();
			Ext.Viewport.add(view);
		}
	});
    }
});

注册登录按钮事件是这一句话：

        control: {
            "login #loginButton": {
            	tap: 'onLoginButtonTap'
            }
        }

这样是不是就结束了？ 不是的，要注意app.js 要声明view 和container的两个js文件，否则js很可能没被加载，导致点击登录按钮没有反应。代码如下：

Ext.application({
	name: 'Mpos',
	requires: ['Ext.MessageBox'],
	views: ['Login'],
        controllers: ['EmployeeManager']
});

如果要访问view的控件要这么做：

首先定义引用refs

	config:{
		refs:{
			flowon: "login #<span style="font-family:Arial, Helvetica, sans-serif;">username</span>"
		},
		control:{
			}
		}
	},

如果要获取输入的用户名，代码： this.getFlowno().getValue();

如果要使用户名输入框获取焦点，代码：this.getFlowno().focus();