jQuery MiniUI,Ajax Web开发

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