Sencha架构解读

sencha是移动端的html5框架，可以用来制作跨平台的app应用。sencha内部利用mvc结构，使得整个框架在使用时能够保持代码的整洁，也易于测试和修改。

一个 sencha app是一个由model，controller，view，store，profile，再加上一些静态资源，例如：app的图标，加载页面图片等组成的集合
models：表明了app的类型,比如，电子商务型的app应该有 用户，产品，订单等模块
views：负责想用户展示数据，使用sencha 内部已有的组件
controllers:处理内部各部分之间联系，监听用户的点击、滑动并采取相应行动
store：负责加载数据，增强里内部组件的能力，如Lists和DataViews
Profile：能够在公用尽量多的代码的同时，很便利的优化app在平板和手机的UI

建立一个app通常要做的第一件事就是定义application，如下

Ext.application({
    name: 'MyApp',
    models: ['User', 'Product', 'nested.Order'],
    views: ['OrderList', 'OrderDetail', 'Main'],
    controllers: ['Orders'],
 
    launch: function() {
        Ext.create('MyApp.view.Main');
    }
});

上面代码中，name主要的作用是定义命名空间，所有的models，views，controllers和其他的类，都会在这个命名下。如上面，所有的子类的命名都遵循MyApp.model.User的规则。这样可以保证整个app在一个命名空间下，降低了与其他代码冲突的可能

当你执行生成app工程命令时，分配好的文件夹中就已经有model，controller，view等文件夹，把文件放在文件夹里分类好，调用时按上面规则写就ok了
controller简单的例子：

Ext.define('MyApp.controller.Sessions', {
    extend: 'Ext.app.Controller',
 
    config: {
        refs: {
            loginForm: 'formpanel'
        },
        control: {
            'formpanel button': {
                tap: 'doLogin'
            }
        }
    },
 
    doLogin: function() {
        var form   = this.getLoginForm(),
            values = form.getValues();
 
        MyApp.authenticate(values);
    }
});

这个controller名为Sessions，所有的controller都继承于Ext.app.Controller。上面例子里有2中配置属性：refs和control。refs能够非常简单的找到页面中所用的组件（sencha内部定义的）；上面的代码中loginForm将会是所有的xtype为formpanel的组件中的第一个。

control配置属性，用ComponetQuery选择器找到所有xtype为formpanel的并且包含button组件的组件，无论何时任何一个button被触发了tap事件，doLogin就会被调用

doLogin函数中，getLoginForm是在定义refs中的loginForm后自动形成。得到form的相关信息后，只需要把表的值拿出来传给一个authenticate函数就行了。authenticate做了什么呢？其实就是一个ajax验证，及callback函数

未完，待续。。。

作者: lide
原文: http://blog.chukong-inc.com/index.php/2013/02/01/sencha%E6%9E%B6%E6%9E%84%E8%A7%A3%E8%AF%BB/#codesyntax_1