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

sencha touch总结相关推荐

Sencha Touch 2 DataView / List 分页
Sencha Touch 2的List的分页功能想必不用过多的介绍了,应该都了解,官方也有例子. 但是想直接把List的分页功能拷贝到DataView上,是不够完美的,存在一个小Bug,导致一直在加载 ...
从零开始学习Sencha Touch MVC应用之七
在此我们将要继续构建我们的Sencha Touch MVC app应用工程,这次我们将探索控制器action的不同调用方式. 控制器action的调用方式将按下面三种方式: l 利用路 ...
Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)...
常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样 ...
sencha touch tabsidebar 源码扩展
先上图看效果没错,这是一个sencha touch 项目,而这里的右边推出效果(下文叫做tabsiderbar),使用插件tabsiderbar来扩展的. 插件js下载地址:http://www.m ...
第二步（仅供参考） sencha touch + PhoneGap(cordova 2.9 及其以下版本) 使用 adt eclipse进行打包...
首先你得安装一个adt-eclipse 参考资料 http://www.crifan.com/android_eclipse_offline_install_adt/ 然后就可以运行adt-eclip ...
sencha touch 组件选择器getCmp和ComponentQuery.query()的效率解析
昨天无意中在网上看到一篇讲解sencha touch组件选择器的文章,名为 Sencha touch 2通过Ext.ComponentQuery.query查找组件. 里面对组件选择器的效率讲解完全反 ...
Sencha Touch 笔记
Sencha Touch 的动画方式 HIERARCHY Ext.Base Ext.fx.Animation REQUIRES Ext.fx.animation.Fade Ext.fx.animati ...
sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)
基于sencha touch 2.2所写代码: 1 /* 2 *模仿tabpanel导航栏 3 */ 4 Ext.define('ux.TabBar', { 5 alternateClassName ...
Sencha Touch 搭建命令
Sencha Touch 搭建命令进入到 F:\..\doc\touch-2.4.0 touch包目录下然后执行命令 sencha generate app MyApp .. ...
开始 Sencha Touch 2 之旅之三
现在我们已经看到了一个比较体面拿的出手的主页页面了,接下来让我们来做一些扩展.我们先用虚构的数据在一个单独的选项卡显示最新博客文章列表(用List显示).在这里实现上我们选取了几个来自http://s ...

sencha touch总结

sencha touch总结相关推荐

最新文章

热门文章