Sencha Touch开发一些须要注意的地方

Sencha Touch开发一些须要注意的问题

现在Sencha Touch已经升级到2.4了，功能更增强大，性能也有所提高。
但因为一些功能的改进，文档并无及时更新，致使开发时会遇到一些困难。
结合我使用的经验总结一些须要注意的地方，但愿能帮助你们。

-------------------
Sencha Touch的开发流程

下载SDK，安装Sencha Cmd。

建立项目:

sencha generate app MyApp ../test

打包项目（压缩，便于部署）

sencha app build

由cmd生成的项目会自动加载类库文件，文件太多，致使等待时间过长，
能够直接引入resources/css/sencha.css和sencha_touch_all.js来提升速度，
但打包时须要还原，不然会出错

根目录下的app.js是程序的入口文件，代码以下所示：

Ext.application({
    name: 'MyApp', //The name is used to create a single global namespace for your entire app

    requires: [
        'Ext.MessageBox',
        'Ext.navigation.View',
        'Ext.dataview.List',
        'Ext.plugin.PullRefresh',
        'Ext.plugin.ListPaging'
    ],

    controllers:[
        'Main'
    ],

    views: [
        'Main',
        'ArticleList'
    ],

    models:[
        'MyApp.model.Article'
    ],

    stores:[
        'MyApp.store.Articles'
    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add(Ext.create('MyApp.view.Main'));
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

用到的组件都须要在requires中引入，不然JS调试器中会有警告，
Sencha Touch采用MVC结构，全部controller、model、store、view文件须要在这里引入.
实际文件存放在app文件夹下的相应目录
-------------------------------------
自定义组件除了extend属性,其余属性须要写在config下：

Ext.define("MyApp.model.Article", {
    extend: "Ext.data.Model",
    config: {
        fields: [
            {name: "title", type: "string"},
            {name: "content",  type: "string"},
            {name: "add_time", type: "string"}
        ]
    }
});

Ext.define('MyApp.store.Articles',{
    extend:'Ext.data.Store',
    config:{
        model: "MyApp.model.Article",
        proxy: {
            type: "ajax",
            url : listUrl,
            reader: {
                type: "json",
                rootProperty: "root"
            }
        },
        autoLoad: true,
        pageSize:10,
        listeners:{
            'beforeload':function(store){
                //console.log('start');
                if(store.getAllCount()==0){
                    showMask();
                }
            },
            'load':function(){
                hideMask();
            }
        }
    }
});

----------------------------------
card布局能够配置页面的切换动画

Ext.create('Ext.Panel',{
layout:{
    type:'card',
    animation:'fade'
},
items:[
    {
    .....
    },
    {
    .....
    }
 ]
});

----------------------------------

Ext.dom.Element,同Ext.Element,是Sencha Touch封装的dom对象，
是对普通dom的进一步封装，给dom对象添加了一些新方法

// 根据id获取元素，返回Ext.Element类型
var el = Ext.get("my-div");
// 根据HTMLElement获取元素，返回Ext.Element类型
var el = Ext.get(myDivElement);

//HTMLElement是普通的dom对象

//Ext.Element 获取全部img 返回数组(HTMLElement)
el.query('img');

//Ext.Element 获取第一个img 返回单个对象(HTMLElement)
el.down('img',true);

//返回单个对象(Ext.dom.Element)
el.down('img');

//Ext.dom.Element修改样式
el.applyStyles({
    color:'red'
});

//普通HTMLElement修改样式
el.style.width = '100%';

-----------------------------------

//建立loading
Ext.Viewport.setMasked({
    xtype:'loadmask',
    message:'请稍后...'
});

//关闭loading 为何不是unMask?很奇怪
Ext.Viewport.unmask();

//也可使用
Ext.Viewport.setMasked(false);

-----------------------------------
文档中方法带绿色右箭头表示CHAINABLE，支持相似jQuery的链式语法
------------------------
painted事件
Fires whenever this Element actually becomes visible (painted) on the screen
该事件发生在dom加载完成时
----------------------------------
在使用布局时，必定要注意，若是父元素不配置layout属性（默认将为auto布局）
子元素必定要有高度，不然可能不会显示出来，即高度为0

card布局示例：

var panel = Ext.create('Ext.Panel', {
    layout: 'card',
    items: [
        {
            html: "First Item"
        },
        {
            html: "Second Item"
        },
        {
            html: "Third Item"
        },
        {
            html: "Fourth Item"
        }
    ]
});

panel.setActiveItem(1);

每种布局方式都支持docked（停靠）属性：
灵活使用docked属性，能够很方便建立复杂的布局

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            docked: 'top', //能够是top bottom right left
            xtype: 'panel',
            height: 20,
            html: 'This is docked to the top'
        },
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

pack和align是布局的两个辅助定义项，pack表明了当前布局维度的特性，align则相反
例如对hbox布局，pack的定义表示水平方向的特性，而align表示垂直方向的特性：

layout: {
    type: 'hbox',
    align: 'start', //垂直方向停靠起始位置
    pack: 'start' //水平方向停靠起始方向，效果等同左对齐
},

align和pack可能的值：
start   
center 居中对齐
end
justify 两端对齐（自适应父元素的宽度或高度）

能够理解为word排版中的四种对齐方式：
左对齐
右对齐
居中对齐
两端对齐 

获取容器的布局

var layout = container.getLayout();

-----------------------------------------

对于滚动属性的说明。
每一个容器均可以经过配置scrollable:true来实现滚动，
但要注意，对于子元素有滚动的，父元素不能有滚动，不然可能会出现滚动条冲突的问题

-----------------------------

使用控制器能够是代码变得干净和可读性强，下面的例子展现了controller的使用：

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

    config: {
        refs: {
            loginForm: 'formpanel' //组件查询 使用xtype 
        },
        control: {
            'formpanel button': { //也可使用相似于css选择器的查询方式
                tap: 'doLogin' //该方法在下面定义
            }
        }
    },

    doLogin: function() {
        var form   = this.getLoginForm(), //根据refs中的loginForm自动生成getLoginForm方法

            values = form.getValues();

        MyApp.authenticate(values);
    }
});

-----------------------------------

组件查询(ComponentQuery)，使用组件查询能够像CSS选择器同样
获取应用中的组件，下面经过一些例子来展现这一强大功能。

//获取指定属性的panel
Ext.ComponentQuery.query('panel[cls=my-cls]')

//模糊查询
Ext.ComponentQuery.query('panel[cls~=my-cls]')
//匹配结果
Ext.create('My.Panel', {
    cls : 'foo-cls my-cls bar-cls'
});

//根据id查询
Ext.ComponentQuery.query('#myCt panel');

//查询孩子节点
var directChildPanel = Ext.ComponentQuery.query('#myCt > panel');

//查询多个组件
Ext.ComponentQuery.query('gridpanel, treepanel');

//获取禁用的元素
var disabledFields = myFormPanel.query("{isDisabled()}");

//值得注意的是，相似于isDisabled这样的方法还有一些，只要是返回布尔类型的，均可以做为
//查询参数，另外，query方法不仅是能够用于Ext.ComponentQuery，对于每一个容器组件均可以使用，上面的
//查询将会在myFormPanel的子元素中进行，而Ext.ComponentQuery.query的查询范围是全局
--------------------------------

//利用profile能够为不一样的设备建立不一样的界面，而共享相同的model和store
//现阶段咱们不须要实现这样的功能，因此不作研究

//一些组件的初始化方法的执行顺序：

Controller#init functions called
Profile#launch function called
Application#launch function called
Controller#launch functions called

//能够利用该顺序来合理执行一些初始化逻辑