sencha touch总结

Panel:全部显示
TabPanel:只显示一个组件，tabBar实现切换
布局：盒布局(上下左右…)、Fit（填充满父组件，只有一个子组件）、Card（只显示一个组件）
Carousel 使用Card布局，实现滑动
NavigationView 栈结构，实现页面的前进后退
defaults中可以指定items中子组件的特性：flex,xtype…xtype具有延迟渲染的特性（重要！）
mvc：view conrtoller model
controller: refs：指定页面组件的定位 control：根据refs中的key指定函调函数 回调函数：回调函数可以通过this.get名字来获取refs中指定的组件
自定义组件：
XTemplate模板：Ext.XTemplate apply(data) overwrite(compoent,data)
<tpl for=".">表示遍历数组 <tpl for=属性>表示遍历属性中的数组
<tpl>中嵌套的<tpl>访问上层使用{parent.属性}
“<” 用 < “>”用>
模板内置变量 values当前访问数据对象，parent上层数据对象，xindex当前数据项在数组中的位置，第一项为1，xcount当前数组中的数据条数
自定义组件：Ext.define(类名字,config),自定义组件中得到的方法不能通过Ext.get(id)得到的对象来调用

DataView 显示问题，DataView放在TabPanel里面时需要设置高度才能显示
使用jsonp获取数据：
store:

Ext.require([
    'Ext.data.proxy.JsonP'
    ]);
Ext.define('Jsonp.store.FamilyMembers',{
    extend:'Ext.data.Store',
    config:{
        autoLoad:false,
        model:'Jsonp.model.User',
        proxy:{
            type:'jsonp',
            url:'http://localhost:8080/sencha_jsonp/dataService.action',
            reader:{
                type:'json',
                rootProperty:'data'
            }
        },
        pageSize:30,
        listeners:{
        beforeload:function() {
            console.log("store开始加载数据");
        },
        load:function() {
            console.log("store加载数据");
        }
    }
    },

});

DataView:

Ext.define('Jsonp.view.FamilyMemberData',{
    extend:'Ext.dataview.component.DataItem',
    xtype:'_xt_familyMemberData',
    config:{
        layout:'hbox',
        items:[
            {
                xtype:'panel',
                itemId:'id'
            },
            {
                xtype:'panel',
                itemId:'name'
            }
        ]
    },
    updateRecord:function(record){
        console.log("开始更新记录");
        me = this;
        if (record == null) {
            console.log("数据为空");
            return;
        }
        var id = record.get("id");
        var name = record.get("name");
        me.down("#id").setHtml('id:'+id);
        me.down("#name").setHtml('name:'+name);
        me.callParent(arguments); 
    }
});

DataItem:

Ext.define('Jsonp.view.FamilyMemberDataList',{
    extend:'Ext.dataview.DataView',
    xtype:'_xt_familyMemberDataList',
    config:{
        store:'FamilyMembers',
        defaultType:'_xt_familyMemberData',
        useComponents:true
    }
});

controller:

Ext.define('Jsonp.controller.MainController',{
    extend:'Ext.app.Controller',
    config:{
        refs:{
            MainContainer:'_xt_mainContainer',

        },
        control:{
            MainContainer:{
                show:'mainContainer_onshow'
            }
        }
    },
    mainContainer_onshow:function() {
        var me = this;
console.log("mainContainer初始化");
        var FamilyMembersStore = Ext.getStore('FamilyMembers');
        FamilyMembersStore.load(function(records, operation, success) {
                    }, me);

    }
});

打包编译
在项目文件目录下 命令行
sencha app build production