Sencha Touch学习使用心得 Unit 2

继续我们的征途......

Chapter 1:创建View

　　　　创建一个View,遵循app.js配置的命名空间,extend相当于继承,继承在Ext.form.Panel下(SenchaTouch是基于Extjs的),config就是配置页面组件了,比较通俗易懂了,重点在控制器如何操作视图......

Ext.define('ST.view.query', {       //创建视图
    extend: 'Ext.form.Panel',//继承在Ext.form.Panel下
    config: {
        tabBar: {
            ui: "neutral",
            layout: {
                pack: "center"
            }
        },
        fullscreen: true,
        id: "queryForm",
        items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: '查询页'
        },
        { xtype: "spacer", height: 30 },
        {
            xtype: "fieldset",
            title: " ",
            instructions: "Please enter your info.",
            defaults: {
                labelWidth: '35%'
            },
            items: [{
                            xtype: 'textfield',
                            id: "login_phonenum",
                            placeHolder: "请输入手机号",
                            label: '手机号'
                        },
                        {
                            xtype: 'textfield',
                            border: 1,
                            id: "login_appleid",
                            placeHolder: "请输入AppleID",
                            label: 'AppleID'
                        }
]
        },
        { xtype: "spacer", height: "4px" }, {
            xtype: 'button',
            itemId: 'btnQuery',
            text: '查询'
        },
                    {
                        xtype: 'toolbar',
                        docked: 'bottom',
                        items: [{
                            xtype: 'spacer'
                        }
                        ]
}]
    }
});

 

Chapter 2:创建Controller

　　　　要知道在控制器中有三个流程，取到页面组件,页面组件触发事件,事件执行逻辑函数.

　　　　创建方法都一样,继承在Ext.app.Controller下,接下来配置config,配置refs和control.

　　　　refs 取到组件:例:QueryForm: "#queryForm",通过ID取整个View,

　　　　　　　　　　　　 btnQuery: "#queryForm button[itemId=btnQuery]",取View中ID为btnQuery的Button

　　　　View被赋值给QueryForm，Button被赋值给btnQuery（Button为页面的查询按钮）等

　　　　备注:在函数中,通过Ext.getCmp(id)来取到组件进行操作.

　　　　control 触发事件调用函数:例:btnQuery触发tap事件而调用onBtnQueryTap这个函数

　　　　　　　　　　　　　　　　　　QueryForm触发initialize事件（initialize为页面加载事件,只有页面加载触发,其他动作皆触发tap）.

　　　　onBtnQueryTap和fnQuery皆为逻辑函数,不用深究,按需向其中加入逻辑代码,如JS前台验证,后台数据验证等,成功后最终调用跳转页面函数,跳转另一个View.逻辑代码都不难,主要是了解JS的MVC如何工作的,

　　　　最后执行代码,看成果！！！

Ext.define('ST.controller.query', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            QueryForm: "#queryForm",
            btnQuery: "#queryForm button[itemId=btnQuery]"
        },
        control: {
         QueryForm: {
                initialize: "onInitialize"
            },
            btnQuery: {
                tap: "onBtnQueryTap"
            }
        }
    },
    onInitialize: function() {

},
        //获取页面参数函数
        onBtnQueryTap: function() {
        var QueryForm = this.getQueryForm();
        var itcode = QueryForm.down("#login_itcode").getValue();
        var phonenum = QueryForm.down("#login_phonenum").getValue();
        var appid = QueryForm.down("#login_appleid").getValue();
        
        this.fnQuery(itcode, phonenum, appid);
    },
    //参数验证函数
    fnQuery: function(itcode, phonenum, appid) {


        this.setCard("querylist", "ST.view.QueryList");

    },
    //跳转页面函数------id为页面id（getCmp()可以通过ID找到页面）-----createCard为view创建地址
    setCard: function(id, createCard) {
        var nextCard = Ext.getCmp(id)
        var card = null;
        if (typeof (nextCard) == 'undefined') {
            card = Ext.create(createCard);
        } else {
            card = nextCard;
        }
        Ext.Viewport.animateActiveItem(card, {
            type: 'slide',
            direction: 'left'
        });
    }

});

　　　　页面展示:

请期待下文......