Sencha Touch 2中如何动态添加button - 推酷
Sencha Touch 2中如何动态添加button
欢迎加入sencha touch交流群：
原理很简单无非就是在一个容器上面选中id，用容器的add方法将button循环加入。
现在我们来试一下
1.先定义一个Container组件用，以后在里面添加button
'container'
2.（lz使用的是mvc架构）在app.js的启动launch函数中执行以下方法：
(i=0;i&=3;i++)
&&&&&&&&&&&&
button = Ext.create(
'Ext.Button'
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&
'rightButton'
&&&&&&&&&&&&&&&&
'20 0 0 0'
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&
&dfdsfdsf&
&&&&&&&&&&&&&&&&
&&&&&&&&&&&&
&&&&&&&&&&&&
Ext.getCmp(
).add(button);
如此便可动态的添加button进入容器
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示CF西西的博客 | sencha touch 2
在新的cmd 3.0中不需要生成jsb3文件了
可以直接用sencha app build的命令生成压缩的项目
p.s compass如果报错的话记得装ruby
1.首先安装RailsInstaller.exe 地址（http://railsftw.bryanbibat.net/）
2.安装 compass：
[plain]&view plaincopy
gem&install&compass&&
安装 compass 成功之后如下图所示：
3.如此便可正常使用sencha app build命令
如有问题可去我的Q群提问（）。
db507f0e-ee4c-4fcc-b7a7-ea|0|.0|ad-47ef-9e05-950bb762570c
877cb90a-fd21-bb|0|.0|ad-47ef-9e05-950bb762570c
Sencha Touch 交流 QQ 群
欢迎您的加入&
use&this&getActiveIndex()&method&it&will&gives&you&index&of&active&item大家试试这个方法哦~~
代码示例：
& painted: function (sender, opts) {
& & & & & & & & & & sender.element.on('dragend',
& & & & & & & & & & function (e) {
& & & & & & & & & & & & if (sender.offset == 0) {
& & & & & & & & & & & & & & if (sender.getActiveIndex() == sender.getMaxItemIndex()) { //当幻灯片转到最后一页时加载主页
& & & & & & & & & & & & & & }
& & & & & & & & & & & & }
& & & & & & & & & & });
& & & & & & & & & &
& & & & & & & & }
afbabed1-ed9a-4b0a-8aae-116fee343cb3|0|.0|ad-47ef-9e05-950bb762570c
最新2.2版将支持ie10游览器
Sencha Touch 最新版下载（论坛发布)
[url]/forum/announcement.php?f=105&a=36[/url]
2.2版更新记录
[url]/touch/alpha/2.2.0.52/release-notes.html[/url]
e0b086c8--|ad-47ef-9e05-950bb762570c
原文：/blog/1602474
第一步 下载： /download.html&&第二步 解压 spket-1.6.23.zip&&&&&&& 复制到 eclipse的 根目录下,重启eclipse&第三步：配置 选择：Window & Preferences & Spket & JavaScript Profiles 点击 New&输入&Sencha&点击OK；选择&Sencha& 并点击&Add File&然后在下拉条中选取&ExtJS& 然后找到& Sencha Touch 包下的 touch.jsb3 并设置成默认；&这里我勾选了 几个常用的&&br&&&接下来 就是默认 Spket 打开 *.js文件了。选择Window &Preferences&General&Editors&file Associations&然后找到 *.js (把spket设为js默认的编辑器)效果：&br/&
86a6e2c6-ffd5-4f31-be14-c09e|0|.0|ad-47ef-9e05-950bb762570c
window.innerWidth是可以正常取到值的，前提是把viewport设置正确
&meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&
最后一个是关键，target-densitydpi设置成device-dpi就可以取到正确的值了
7-4b36-9cd9-3af5dc648d76|0|.0|ad-47ef-9e05-950bb762570c
0.先下载 sencha cmd 3.0
(/products/sencha-cmd/download/sencha-cmd/windows)
1.首先将你的路径路由到你sdk包下方：
2.和2.0 sdk tool不同
路由到该路径后执行命令：
cmd 3.0命令：sencha generate app&MyApp /path/to/www/myapp&
或&sencha g a&MyApp /path/to/www/myapp&
而2.0命令行：sencha app create MyApp /path/to/www/myapp&
格式参考：
sencha generate app [app_name] [app_path]
sencha g a [app_name] [app_path]
f-429d-823f-963bbc1a60ab|0|.0|ad-47ef-9e05-950bb762570c
用啥jquery包。 。 st中&&this.el.dom.querySelector('#xxx .xxx'); 一样支持/&其实可以用这个代替jquery
b6cd6e6a--8a7a-4|0|.0|ad-47ef-9e05-950bb762570c
对indexBar项设置object对象。&
xtype:'list',
style:'margin-top:10px',
itemTpl: '&div class="contact"&{firstName} &strong&{lastName}&/strong&&/div&',
store:'QuestionStore',
//grouped: true,
indexBar:{
style:'font-size:2.6em'
8b8f-43e2-a5a9-c432e36ce115|0|.0|ad-47ef-9e05-950bb762570c
大家做st应用的时候可以先把目的地页面的内容隐藏掉，切换完成后去显示，这样可以快很多类似这样
先hide（），然后切换完成后show（）
&不然打页面控件太多容易造成delay的特别是有图表的页面
canvas渲染极慢(如果是做在低端安卓机上需要很多样式的app不建议使用st)
有疑问可去q群交流
82a8c8ab-274e-4fd4-aab0-bbcd1f2a|ad-47ef-9e05-950bb762570c
参考：/forum/showthread.php?153560-Tap-event-for-Panel
查看了doc文档发现这个panel控件中是没有tap事件的，怎么办，好在我们可以对元素绑定进行绑定，于是我们可以这么干，在panel的initialize事件中绑定tap事件，代码如下：
'panel[itemId=brandSearch]':{
initialize:function(me,eOpts){
me.element.on({
tap: function(me,e,eOpts) {
alert("sdddsadsad");
b48ebf16-9ec9-0ab39a330a|0|.0|ad-47ef-9e05-950bb762570c
&var&divs&=&Ext.query("div[class=bcitem]");&
060d3d6c-f1a6-4f8e-823d-66b774d683ce|0|.0|ad-47ef-9e05-950bb762570c
var aaa=&6&8&
Ext.String.htmlEncode(aaa)
lz用的是Sencha Touch的框架直接调用Ext.String.htmlEncode方法即可解决，也可以用游览器api的encode，异曲同工。
114edc02--914f-c64fbc46bf7c|0|.0|ad-47ef-9e05-950bb762570c
原文：/forum/showthread.php?148588-Dynamically-change-background-image-of-a-panel
亲测非常好用~~~
appIndex.getBannerThree().element.setStyle({backgroundSize: 'contain'});
appIndex.getBannerThree().element.setStyle({backgroundImage: 'url('+localAdData.videoInfo.videoImgPath+')'});
044b409d-baa3--3f|0|.0|ad-47ef-9e05-950bb762570c
在 itemtap上判断。 &
if (e.target.tagName == 'SPAN' && e.target.className == 'x-button-label'){
& & // 这样就表示当前点击的是这个按钮了。 .
ad13e99e-8388-44bb-9ef1-ff6d4ae8e5cc|0|.0|ad-47ef-9e05-950bb762570c
最新2.2版将支持ie10游览器
Sencha Touch 最新版下载（论坛发布)
/forum/announcement.php?f=105&a=36
2.2版更新记录
/touch/alpha/2.2.0.52/release-notes.html
6039982b-d509-d5c3a8ddb9|0|.0|ad-47ef-9e05-950bb762570c
如下先用乘再用加，否则系统可能会当做字符串
itemTpl: [
'&div class="search-item"&',
/* '&div class="delete"&&/div&',*/
'&div class="action delete"&&/div&',
'&span&' +
'&tpl if="question_count & 0 "&' +
'&tpl if="overdue_tag & 0"&'+
style="color: red"&({question_count*1+1})&&/span&' +
'&tpl if="overdue_tag == 0"&'+
style="color: red"&({question_count})&&/span&' +
'&/tpl&' +
'&tpl if="question_count == 0 "&' +
'&tpl if="overdue_tag == 1"&'+
style="color: red"&({question_count*1+1})&&/span&' +
'&/tpl&' +
'{brand_name}' +
'&/span&',
2132ecc1--a6ec-bb1eace10ade|0|.0|ad-47ef-9e05-950bb762570c
lz在尝试像st1一样动态设置badge，首先想到的是用addCls方法,
1.首先调出st2 tabpanel中有的badgeText属性，这样会出现一个样式。
2.然后选中这个badge Dom的id。
3.对这个dom进行addCls操作，有的样式用（!important）
4.然后就在这个时候神奇的事发生了。。。。在pc上成功的，在ipad2上测试却发生了无法更新的情况。
1dc2461b-a665-460a-b33c-6a|0|.0|ad-47ef-9e05-950bb762570c
原文：//create-image-gallery-using-sencha-touch/
fa5-47ad-b6dd-b02b5b619dd0|0|.0|ad-47ef-9e05-950bb762570c
大家有没有注意到DataView中没有IndexBar这个组件的，但是list中确是有的。。。。。这个真的是非常的蛋疼，但是我们又惊奇的发现在list是继承自dataView的，因此，实际上我们是有办法将indexBar通过和list中一样的办法嵌套进dataView的。
首先我们来看一下效果：
通过indexBar字母的变换我们可以匹配不同的数据。
下面简单说下做法：
1.首先需要自定义一个indexBar
Ext.define('App.view.NewIndexBar', {
extend: 'ponent',
alternateClassName: 'Ext.NewIndexBar',
* @event index
* Fires when an item in the index bar display has been tapped.
* @param {Ext.dataview.IndexBar} this The IndexBar instance
* @param {String} html The HTML inside the tapped node.
* @param {Ext.dom.Element} target The node on the indexbar that has been tapped.
baseCls: Ext.baseCSSPrefix + 'indexbar',
* @cfg {String} direction
* Layout direction, can be either 'vertical' or 'horizontal'
* @accessor
direction: 'vertical',
* @cfg {Array} letters
* The letters to show on the index bar.
* @accessor
letters: ['一', '二', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
ui: 'alphabet',
* @cfg {String} listPrefix
* The prefix string to be appended at the beginning of the list.
* E.g: useful to add a "#" prefix before numbers.
* @accessor
listPrefix: null
// @private
itemCls: Ext.baseCSSPrefix + '',
updateDirection: function(newDirection, oldDirection) {
alert("4");
var baseCls = this.getBaseCls();
this.element.replaceCls(baseCls + '-' + oldDirection, baseCls + '-' + newDirection);
getElementConfig: function() {
alert("5");
reference: 'wrapper',
classList: ['x-centered', 'x-indexbar-wrapper'],
children: [this.callParent()]
updateLetters: function(letters) {
alert("6");
this.innerElement.setHtml('');
if (letters) {
var ln = letters.length,
for (i = 0; i & i++) {
this.innerElement.createChild({
html: letters[i]
updateListPrefix: function(listPrefix) {
alert("7");
if (listPrefix && listPrefix.length) {
this.innerElement.createChild({
html: listPrefix
// @private
initialize: function() {
this.callParent();
this.innerElement.on({
touchstart: this.onTouchStart,
touchend: this.onTouchEnd,
touchmove: this.onTouchMove,
scope: this
// @private
onTouchStart: function(e, t) {
alert("8");
e.stopPropagation();
this.innerElement.addCls(this.getBaseCls() + '-pressed');//附加indexbar样式
this.pageBox = this.innerElement.getPageBox();
this.onTouchMove(e);
// @private
onTouchEnd: function(e) {
alert("9");
this.innerElement.removeCls(this.getBaseCls() + '-pressed');
// @private
onTouchMove: function(e) {
var point = Ext.util.Point.fromEvent(e),
pageBox = this.pageB
/* console.log('point:'+point);
console.log('target:'+target);
console.log('pageBox:'+pageBox);*/
if (!pageBox) {
//console.log(pageBox);
pageBox = this.pageBox = this.el.getPageBox();
if (this.getDirection() === 'vertical') {
if (point.y & pageBox.bottom || point.y & pageBox.top) {
target = Ext.Element.fromPoint(pageBox.left + (pageBox.width / 2), point.y);
//console.log(target);
if (point.x & pageBox.right || point.x & pageBox.left) {
target = Ext.Element.fromPoint(point.x, pageBox.top + (pageBox.height / 2));
if (target) {
this.fireEvent('index',this, target.dom.innerHTML,target);
destroy: function() {
alert("11");
var me = this,
elements = Array.prototype.slice.call(me.innerElement.dom.childNodes),
ln = elements.length,
for (; i & i++) {
Ext.removeNode(elements[i]);
this.callParent();
}, function() {
//&deprecated product=touch since=2.0&
* @member Ext.dataview.IndexBar
* @method isHorizontal
* Returns true when direction is horizontal.
* @removed 2.0.0
Ext.deprecateMethod(this, 'isHorizontal', null, "Ext.dataview.NewIndexBar.isHorizontal() has been removed");
* @member Ext.dataview.IndexBar
* @method isVertical
* Returns true when direction is vertical.
* @removed 2.0.0
Ext.deprecateMethod(this, 'isVertical', null, "Ext.dataview.NewIndexBar.isVertical() has been removed");
* @member Ext.dataview.IndexBar
* @method refresh
* Refreshes the view by reloading the data from the store and re-rendering the template.
* @removed 2.0.0
Ext.deprecateMethod(this, 'refresh', null, "Ext.dataview.NewIndexBar.refresh() has been removed");
* @Member Ext.dataview.IndexBar
* @cfg {Boolean} alphabet
* True to use the letters property to show a list of the alphabet.
* @removed 2.0.0
Ext.deprecateProperty(this, 'alphabet', null, "Ext.dataview.NewIndexBar.alphabet has been removed");
* @member Ext.dataview.IndexBar
* @cfg {Boolean} itemSelector
* A simple CSS selector for items.
* @removed 2.0.0
Ext.deprecateProperty(this, 'itemSelector', null, "Ext.dataview.NewIndexBar.itemSelector has been removed");
* @member Ext.dataview.IndexBar
* @cfg {Boolean} store
* The store to be used for displaying data on the index bar.
* @removed 2.0.0
Ext.deprecateProperty(this, 'store', null, "Ext.dataview.NewIndexBar.store has been removed");
//&/deprecated&
2.嵌套的dataView
Ext.define('App.view.Homepage', {
extend: 'Ext.dataview.DataView',
xtype: 'homepage',
requires: [
'Ext.TitleBar',
'App.view.NewIndexBar',
'Ext.dataview.IndexBar'
baseCls: 'categories-list',
itemTpl: [
'&div class="image" style="background-image:url(/static/mobile/image2-iPad/{urlId}.png)"&&/div&',
'&div class="name"&{label}&/div&'
].join(''),
scrollable: true,
store:'Categories',
NewIndexBar:true
updateInline: function(newInline) {
alert("saddsdsa");
this.callParent(arguments);
if (newInline) {
this.setOnItemDisclosure(false);
this.setNewIndexBar(false);
this.setGrouped(false);
applyNewIndexBar: function(NewIndexBar) {
return Ext.factory(NewIndexBar, App.view.NewIndexBar, this.getNewIndexBar());
updateNewIndexBar: function(NewIndexBar) {
alert("2")
if (NewIndexBar && this.getScrollable()) {
this.indexBarElement = this.getScrollableBehavior().getScrollView().getElement().appendChild(NewIndexBar.renderElement);
NewIndexBar.on({
index: 'onIndex',
scope: this
this.element.addCls(this.getBaseCls() + '-indexed');
onIndex: function(NewIndexBar, index) {
Ext.getStore('Categories').clearFilter();
var me = this,
key = index.toLowerCase(),
store = me.getStore(),
//store=Ext.getStore('Categories'),
//groups = store.getGroups(),
//ln = groups.length,
scrollable = me.getScrollable(),
scroller, group, i, closest, id,
eval("var re = /^" + index + ".*/");
Ext.getStore('Categories').filter("label",re);
destroy: function() {
Ext.destroy(this.getNewIndexBar(), this.indexBarElement, this.header);
this.callParent();
时间有限不能逐一讲解，有问题或者项目下载可去我的qq群共享下载（） DataView集合IndexBar.rar
4c7e67d9-095f-4de0-b1ed-85b039c|ad-47ef-9e05-950bb762570c
st app一个按钮上两个样式，附带许多好的demo
/demo/cart/
/kostysh/Simple-shopping-cart-for-Sencha-Touch-2
fc5f5cc7--a8db-d069abcd53d1|0|.0|ad-47ef-9e05-950bb762570c
大家在使用NavigatorView的时候是不是只能切换一次页面，第二次返回的时候，不能切换了。。。。
实际上这是sencha的一个不人性的设置，因为当我们返回的时候，实际上对旧有页面调用了一个pop()事件，而pop事件实际上会将你旧有的页面destory，然后重新生成一个页面，这样你原来监听的那些事件就都无效了。。。。。。。
大家只要将navigaotrView的autoDestory配置项设置为false即可。
论坛管理员解释：
/forum/archive/index.php/t-181064.html?s=c5edaa3ef3cec581bb3c0
When you pop a view (or tap on back button) the view is destroyed. In the detailsPage component if you set autoDestroy to false this will prevent it but I would just create the new view each time you want to push it.
Sencha Touch 交流 QQ 群
欢迎您的加入
0bb-49b2-a99b-df2deeb|ad-47ef-9e05-950bb762570c
为了使界面变得好看,这次采用了将写好的html页面嵌套入panel控件的方法，然后在launch函数中使用Ext.get()函数选取id后在绑定点击事件。做法：
&Sencha Touch 交流 QQ 群
欢迎您的加入。&1.lz在controller中定义了一个launch函数，在这个launch函数中执行绑定操作。2.执行绑定（这里对一个图片绑定了一个点击事件，使其点击后跳转到另外一个页面）
p.s在图片上定义了一个id:banner1
var content = Ext.get('banner1');
content.on('tap', function(){
myApp.showView(1,'pop');
-18db-4c20-b9a2-774ac|.0|ad-47ef-9e05-950bb762570c
原文： /showtopic-52.aspx
效果如下:大家注意在store中需要截取model中某个属性的首字符当做字母分组的依据.List中还需要将idexBar这个属性设置为true即可代码如下：st界面代码:
xtype: 'list',
itemTpl: '&div class="contact"&{firstName} &strong&{lastName}&/strong&&/div&',
indexBar: true,
//give it a link to the store instance
store: getStore(),
grouped: true,
emptyText: '&div style="margin-top: 20 text-align: center"&No Matching Items&/div&',
disableSelection: true,
xtype: 'toolbar',
docked: 'top',
{ xtype: 'spacer' },
xtype: 'searchfield',
placeHolder: 'Search...'
{ xtype: 'spacer' }
获取store中的数据定义在一个函数中（getStore()函数)
function getStore() {
//check if a store has already been set
if (!this.store) {
//if not, create one
this.store = Ext.create('Ext.data.Store', {
//define the stores fields
fields: ['firstName', 'lastName'],
//sort the store using the lastname field
sorters: 'firstName',
//group the store using the lastName field
grouper: {
groupFn: function(record) {
return record.get('firstName')[0];
//and give it some data
{ firstName: 'Tommy',
lastName: 'Maintz' },
{ firstName: 'Rob',
lastName: 'Dougan' },
{ firstName: 'Ed',
lastName: 'Avins' },
{ firstName: 'Jamie',
lastName: 'Avins' },
{ firstName: 'Dave',
lastName: 'Dougan' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jacky',
lastName: 'Ngyuyen' },
{ firstName: 'Jay',
lastName: 'Ngyuyen' },
{ firstName: 'Jay',
lastName: 'Robinson' },
{ firstName: 'Rob',
lastName: 'Avins' },
{ firstName: 'Ed',
lastName: 'Dougan' },
{ firstName: 'Jamie',
lastName: 'Poulden' },
{ firstName: 'Dave',
lastName: 'Spencer' },
{ firstName: 'Abraham',
lastName: 'Avins' },
{ firstName: 'Jacky',
lastName: 'Avins' },
{ firstName: 'Rob',
lastName: 'Kaneda' },
{ firstName: 'Ed', lastName: 'Elias' },
{ firstName: 'Tommy',
lastName: 'Dougan' },
{ firstName: 'Rob',
lastName: 'Robinson' }
//return the store instance
return this.
05bf1a93-16a8-4a35-9b3f-863e3e4ffc4a|0|.0|ad-47ef-9e05-950bb762570c
&sencha&create&jsb&-a&index.html&-p&test.jsb3
折腾了一天，找到的资料模糊不清，最后终于搞定了。下面是使用jsb3的方法。1.首先要确定安装了 Sencha SDK Tools 没安装的去官网上下载。2.用命令行进入程序的文件夹 cd path/www/yourapp&&3.用sencha命令生成你要的.jsb3文件 sencha create jsb -a index.html -p app.jsb3&&这里生成的文件基本不需要动，如有需求可点击文件进行编辑，文件很好理解，就是一个json文件。4.命令生成allclass.js命令行 sencha build -p app.jsb3 -d aaa &(添加一个aaa文件夹里面有allclass.js)这样把所有js文件打包成一个js 文件了。
38dea211-87e5-4a6b-b8ac-e36efbf85fd2|0|.0|ad-47ef-9e05-950bb762570c
http://www.oschina.net/p/jquery-qrcode-js
/blog//jquery-qrcode/
12ecc771-f215--c35f|.0|ad-47ef-9e05-950bb762570c
f2c7ccd3--be9b-53d2c4f85d8e|0|.0|ad-47ef-9e05-950bb762570c
已知的有：Cover, Fade, Flip, Pop, Reveal, Scroll, Slide,&
card布局中貌似cube没有包含在里面。。。。但是在tabpanel确是可以使用
P.S.如果遇到不能用的话大家参看这篇文章：/forum/archive/index.php/t-186158.html?s=05b52b0e79b8c9eda0a9
Ext.fx.layout.card.Cube is commented out in Ext.fx.layout.Card so it's currently not supported. You can try to use it but don't blame us if it doesn't work :)
可能st2只能再等等了，大家可以用st1的cube效果
24c7f47c-31ef-460a-a3ed-0e1ea80f|ad-47ef-9e05-950bb762570c
&Sencha Touch 交流 QQ 群
欢迎您的加入。
今天在看到一个app的切换效果被震撼到了。。。。。。后来一问原来是st里面的cube效果，真是没文化害死人。。。附上st文档效果介绍
其中cube效果为立方体翻面时候的动画效果，pop为弹出，wipe为从右至左像吸管（扫描机）一样的一闪而过的效果。
cube&:&Object
Cube Animation
No comments. Click to add
Ext.animsview source
fade&:&Object
Fade Animation
Ext.animsview source
flip&:&Object
Flip Animation
Ext.animsview source
pop&:&Object
Pop Animation
Ext.animsview source
slide&:&Object
Slide Animation
Ext.animsview source
wipe&:&Object
21f3d6fd--8cf7-e0c814ee467f|0|.0|ad-47ef-9e05-950bb762570c
原文：http://blog.csdn.net/xiaoguang44/article/details/6947291
想了四天，今天终于搞定。。。。。。。感慨万分。。。。。
首先，wcf项目可以从github所在地址：/jaredfaris/WCF-REST-JSON-Examples可以下载到rest-wcf-service的项目
按照自己的需要修改，由于项目内可以host整个服务，因此无需发布到iis，运行后使用app.config中的地址即可request数据。
然后是界面的调用，由于我用的是sencha touch 2.0的控件，因此代码如下
Ext.application({
name: 'Sencha',
launch: function () {
Ext.regModel('Tweet', {
fields: [{
name: 'MetricId',
type: 'int'
name: 'HostName',
type: 'string'
name: 'MetricName',
type: 'string'
var store = new Ext.data.Store({
model: 'Tweet',
url: 'http://localhost:8080/exampleJsonpService/Metrics',
type: 'jsonp',
extraParams: {
pagesize: 10
store.getProxy();
//.extraParams.q = 'ipad';
store.read();
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
xtype: 'toolbar',
docked: 'top',
height: 50,
scrollable: {
direction: 'horizontal',
indicators: false
{ ui: 'back', text: 'Back' },
{ text: 'Default' },
{ ui: 'round', text: 'Round' },
{ xtype: 'spacer' },
xtype: 'segmentedbutton',
{ text: 'Option 1' },
{ text: 'Option 2', pressed: true },
{ text: 'Option 3' }
{ xtype: 'spacer' },
{ ui: 'action', text: 'Action' },
{ ui: 'forward', text: 'Forward' },
xtype: 'segmentedbutton',
allowMultiple: true,
{ text: 'Toggle 1', pressed: true },
{ text: 'Toggle 2', pressed: true },
{ text: 'Toggle 3' }
xtype: 'list',
disclosure: true,
onItemDisclosure: {
scope: 'test',
handler: function (record, btn, index) {
store.getProxy();
//.extraParams.q = 'ipad';
store.read();
itemSelector: '.tweet',
itemTpl: '&div class="contact2"&&strong&{HostName}&/strong& {MetricId}&/div&',
store: store,
xtype: 'panel',
html: 'message preview',
显示效果：
9aa15b64-eea4-4c01-b291-863fc|.0|ad-47ef-9e05-950bb762570c
大家可以参考一个例子这里面有st在以一个card布局的Container容器里面做切换的，还可以自己设置动画效果项目文件太大超过限制有兴趣可去qq群共享下载：
edea68b7-7e98-4c20-9d7f-|0|.0|ad-47ef-9e05-950bb762570c
下载地址：/showtopic-23.aspx
Sencha Touch 交流 QQ 群
欢迎您的加入
78ba9e83-e489-425b-9aef-fcaa|.0|ad-47ef-9e05-950bb762570c
&直接写就行了&html&manifest="offline.appcache"&以后修改offline.appcache中的版本号就会重新再下载&
参考1：/forum/showthread.php?102054-How-make-a-sencha-touch-app-offline-usable-with-html5-cache-manifest&p=478955#post478955
参考2：/forum/archive/index.php/t-102054.html
8bbfaa30-da57-941c7cf0f4|0|.0|ad-47ef-9e05-950bb762570c
hasMany association with itemTpl
原文：/forum/showthread.php?182945-hasMany-association-with-itemTpl
Sencha Touch 交流 QQ 群
欢迎您的加入。
I have a search model with multiple hasMany associations (videos, albums, models) that correspond to JSON data that I get via an ajax proxy. I apply the search store to a dataview List. I want to be able to use the itemTpl to loop through each of the child associations and render a new list item for each video, album, model. I can access this data successfully inside an Xtemplate using a &tpl for="videos"&&/tpl& for example but this spits out each video inside a single list item. In other words, I'm asking if there's a way to concatenate data from multiple stores into a single root object that can be read from the itemTpl. I hope the question is clear.This is similar to the Twitter example in the docs but instead of only one hasMany (tweets), I have three. I want to join them all into a single List.
Ext.define('mt.model.search', {
extend: 'Ext.data.Model',
requires: ['mt.proxy.search'],
//{ name: 'total', type: 'int' },
//{ name: 'videos', type: 'array' },
//{ name: 'models', type: 'array' },
//{ name: 'albums', type: 'array' }
belongsTo: 'user',
hasMany: [{
associatedModel: 'mt.model.video',
name : 'videos',
associationKey: 'videos'
associatedModel: 'mt.model.album',
name: 'albums',
associationKey: 'albums'
associatedModel: 'mt.model.model',
name: 'models',
associationKey: 'models'
type: 'search'
This is the function in my controller that sets the search query and pulls the search results from my server.
onSearchSelect: function(list, record) {
var search = record.searches(),
resultsList = this.getResultList();
resultsList.setStore(search);
search.load();
Here's my List&
Ext.define('mt.view.resultlist', {
extend: 'Ext.dataview.List',
xtype: 'resultlist',
requires: [
'Ext.XTemplate'
//'mt.view.resultlistitem'
cls: 'listItem',
onItemDisclosure: true,
allowDeselect: false,
//useComponents: true,
emptyText: 'No results found.',
//defaultType
: 'resultlistitem',
//grouped: true,
itemTpl: new Ext.XTemplate(
'&tpl for="."&', // I can set this to for="videos" or for="albums" but everything renders inside one list item
'&img src="{thumb}" height="80"/&',
'&strong&{title}&/strong&'
plugins: [
type: 'listpaging',
autoPaging: true,
loadMoreText: 'More results&'
管理员给出的结论：
You would have to do this outside of the list, iterate through one store and add items to the store being used ont he list.
言下之意我们不得获得一的那个数据仓库（Store）然后用枚举的方式依次得到多关系的那个model的值然后加入到绑定List的那个Store中去，非常的麻烦。
25ea0a80-71af-e-7d036a|.0|ad-47ef-9e05-950bb762570c
/senchalearn
be4c8e0e-9b28-46df-adf3-bc0|0|.0|ad-47ef-9e05-950bb762570c
Sencha Touch 交流 QQ 群
欢迎您的加入。
&var&model=Ext.getStore("storeId").getData();
取出来的是model数组
&取出items即可~~
&var&tempData=[];&
var&data=Ext.getStore(chartsDone).getData();Ext.each(data,function(t){&&&&tempData.push(t.raw);});
console.log(tempData);
&var&tempData=[];Ext.getStore(chartsDone).each(function(t){&&&&tempData.push(t.raw);});console.log(tempData);
&var&tempData=[]; var&data=Ext.getStore(chartsDone);Ext.each(data,function(t){&&&&tempData.push(t.raw);
});console.log(tempData);&
8bb9d9bc-29c3-462f-99da-3ccd6442ebc6|0|.0|ad-47ef-9e05-950bb762570c
Sencha Touch 交流 QQ 群
欢迎您的加入。
原文：/touch/2-0/#!/api/Ext.util.DelayedTask
//create a textfield where we can listen to text
var field = Ext.create('Ext.field.Text', {
xtype: 'textfield',
label: 'Length: 0'
//add the textfield into a fieldset
Ext.Viewport.add({
xtype: 'formpanel',
xtype: 'fieldset',
items: [field],
instructions: 'Type into the field and watch the count go up after 500ms.'
//create our delayed task with a function that returns the fields length as the fields label
var task = Ext.create('Ext.util.DelayedTask', function() {
field.setLabel('Length: ' + field.getValue().length);
// Wait 500ms before calling our function. If the user presses another key
// during that 500ms, it will be cancelled and we'll wait another 500ms.
field.on('keyup', function() {
task.delay(500);
jquery的调用时需要引入sencha-touch.js 90k
和一个src/util/DelayedTask.js文件，这样除了可以调用一些ext的函数外，还能对一个input标签进行调用。
e20b800c--8ea0-cb|0|.0|ad-47ef-9e05-950bb762570c
原文：/touch/2-0/#!/api/Ext.data.proxy.Server-cfg-limitParam
配置limitParam属性
介绍：The name of the 'limit' parameter to send in a request. Defaults to 'limit'. Set this to false if you don't want to send a limit parameter.
Defaults to:&"limit"
e054decd-4e62-d-ec|0|.0|ad-47ef-9e05-950bb762570c
只需配置noCache属性。
3b9f3fe1-c-b699-696c31b6f896|0|.0|ad-47ef-9e05-950bb762570c
原文：/touch/2-0/#!/guide/history_support
控制路由拼写的办法被找到！
To achieve a decent history state, just two things are required: - Set up a route-method in some controller (e.g. as stated in the documentation). - Call redirectTo(url) on either a&controller&or the&application&object
For example:
Ext.define('MyApp.controller.Products', {
extend: 'Ext.app.Controller',
'settings': 'showSettings'
control: {
"#settingsBtn": {
tap: 'onSettingsTap'
showSettings: function() {
console.log('show the settings');
onSettingsButtonTap : function(){
// when someone taps on this button, 'redirect' to the next page
this.redirectTo('settings');
The effect of tapping on the settingsBtn is now that the URL will have #settings appended and the route function will be activated. Please note that if the route is unkown, this function will not return an error, but will just be ignored.
There you have it, decent back-button support! This is very nice to have for Android devices!
23b0ae24-182a--65|0|.0|ad-47ef-9e05-950bb762570c
之后的文章1
RecentPosts未评分未评分未评分未评分未评分未评分未评分未评分未评分未评分Statistics
842 篇文章
60746 次访问
访问统计开始于 日
平均日访问 386 次
当前 8 人在线友情链接