CFXIXI工作室首页
CF西西的博客 | sencha touch 2

关于Sencha Touch 2.1 Cmd jsb3

9. 一月 2013
在新的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群提问(224711028)。  

sencha touch 2

Sencha Touch 各种Demo

9. 一月 2013
 http://try.sencha.com/

sencha touch 2

【Sencha Touch 2】Carousel如何监听items的数字项

5. 一月 2013
Sencha Touch 交流 QQ 群 224711028 欢迎您的加入  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()) { //当幻灯片转到最后一页时加载主页                               }                         }                     });                                     }  

sencha touch 2

【Sencha Touch 2.2 测试alpha版发布】Sencha Touch 最新版下载(论坛发布)

24. 十二月 2012
最新2.2版将支持ie10游览器   Sencha Touch 最新版下载(论坛发布)   [url]http://www.sencha.com/forum/announcement.php?f=105&a=36[/url]       2.2版更新记录   [url]http://cdn.sencha.com/touch/alpha/2.2.0.52/release-notes.html[/url]

sencha touch 2

Sencha Touch Spket1.6.23 IDE 配置

28. 十一月 2012
原文:http://sailei1.iteye.com/blog/1602474 第一步 下载: http://www.spket.com/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/>

sencha touch 2

【Sencha Touch】window.innerWidth获取屏幕宽度

26. 十一月 2012
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就可以取到正确的值了

sencha touch 2

sencha touch 2.1如何生成MVC框架

8. 十一月 2012
0.先下载 sencha cmd 3.0 (http://www.sencha.com/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] or sencha g a [app_name] [app_path]     3.成功!

sencha touch 2

sencha touch在dom中搜索id

31. 十月 2012
用啥jquery包。 。 st中  this.el.dom.querySelector('#xxx .xxx'); 一样支持http://zeptojs.com/ 其实可以用这个代替jquery

sencha touch 2

Sencha Touch 2如何设置list indexbar的字体大小

30. 十月 2012
对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' }

sencha touch 2

Sencha Touch 2使切换速度加快小贴士

27. 十月 2012
大家做st应用的时候可以先把目的地页面的内容隐藏掉,切换完成后去显示,这样可以快很多类似这样 先hide(),然后切换完成后show()  不然打页面控件太多容易造成delay的特别是有图表的页面 canvas渲染极慢(如果是做在低端安卓机上需要很多样式的app不建议使用st) 有疑问可去q群交流224711028

sencha touch 2

Sencha Touch 2如何在MVC框架中对panel添加Tap事件

21. 十月 2012
参考:http://www.sencha.com/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"); } }); } }

sencha touch 2

sencha touch 如何针对class选取dom

10. 十月 2012
 var divs = Ext.query("div[class=bcitem]"); 

sencha touch 2, sencha-touch1.1

解决安卓web app “&”等特殊字符显示问题

7. 十月 2012
var aaa=“6&8” Ext.String.htmlEncode(aaa) lz用的是Sencha Touch的框架直接调用Ext.String.htmlEncode方法即可解决,也可以用游览器api的encode,异曲同工。

andriod, sencha touch 2

sencha touch动态改变panel里面的background-image元素

4. 十月 2012
原文:http://www.sencha.com/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+')'});

sencha touch 2

Sencha Touch itemTap事件中如何判断点击的按钮

29. 九月 2012
在 itemtap上判断。   if (e.target.tagName == 'SPAN' && e.target.className == 'x-button-label'){     // 这样就表示当前点击的是这个按钮了。 . }  

sencha touch 2

Sencha Touch 最新版下载(论坛发布)

28. 八月 2012
最新2.2版将支持ie10游览器 Sencha Touch 最新版下载(论坛发布) http://www.sencha.com/forum/announcement.php?f=105&a=36   2.2版更新记录 http://cdn.sencha.com/touch/alpha/2.2.0.52/release-notes.html

sencha touch 2

Sencha Touch 如何使模板中的字段数字加一

21. 八月 2012
如下先用乘再用加,否则系统可能会当做字符串 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">'+ '<span style="color: red">({question_count*1+1}) </span>' + '</tpl>'+ '<tpl if="overdue_tag == 0">'+ '<span style="color: red">({question_count}) </span>' + '</tpl>'+ '</tpl>' + '<tpl if="question_count == 0 ">' + '<tpl if="overdue_tag == 1">'+ '<span style="color: red">({question_count*1+1}) </span>' + '</tpl>'+ '</tpl>' + '{brand_name}' + '</span>', '</div>' ]

sencha touch 2

Sencha Touch 2动态设置tabbar的badgeText(ipad2上没有成功)

17. 八月 2012
lz在尝试像st1一样动态设置badge,首先想到的是用addCls方法, 1.首先调出st2 tabpanel中有的badgeText属性,这样会出现一个样式。 2.然后选中这个badge Dom的id。 3.对这个dom进行addCls操作,有的样式用(!important) 4.然后就在这个时候神奇的事发生了。。。。在pc上成功的,在ipad2上测试却发生了无法更新的情况。

sencha touch 2

Sencha Touch 做相册

16. 八月 2012
原文:http://superdit.com/2011/08/20/create-image-gallery-using-sencha-touch/  

sencha touch 2, sencha-touch1.1

Sencha Touch 2中如何在DataView中显示IndexBar

15. 八月 2012
大家有没有注意到DataView中没有IndexBar这个组件的,但是list中确是有的。。。。。这个真的是非常的蛋疼,但是我们又惊奇的发现在list是继承自dataView的,因此,实际上我们是有办法将indexBar通过和list中一样的办法嵌套进dataView的。 首先我们来看一下效果:     通过indexBar字母的变换我们可以匹配不同的数据。 下面简单说下做法: 1.首先需要自定义一个indexBar Ext.define('App.view.NewIndexBar', { extend: 'Ext.Component', 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. */ config: { 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"); return { 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, i; for (i = 0; i < ln; i++) { this.innerElement.createChild({ html: letters[i] }); } } }, updateListPrefix: function(listPrefix) { alert("7"); if (listPrefix && listPrefix.length) { this.innerElement.createChild({ html: listPrefix }, 0); } }, // @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"); if(isExc) { 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'); isExc=true; }, // @private onTouchMove: function(e) { if(isExc) { var point = Ext.util.Point.fromEvent(e), target, pageBox = this.pageBox; /* 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) { return; } target = Ext.Element.fromPoint(pageBox.left + (pageBox.width / 2), point.y); //console.log(target); } else { if (point.x > pageBox.right || point.x < pageBox.left) { return; } 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, i = 0; for (; i < ln; 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' ], config: { baseCls: 'categories-list', itemTpl: [ '<div class="image" style="background-image:url(http://resources.shopstyle.com/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, item; eval("var re = /^" + index + ".*/"); Ext.getStore('Categories').filter("label",re); isExc=false; }, destroy: function() { Ext.destroy(this.getNewIndexBar(), this.indexBarElement, this.header); this.callParent(); } }); 时间有限不能逐一讲解,有问题或者项目下载可去我的qq群共享下载(224711028) DataView集合IndexBar.rar

sencha touch 2

Sencha Touch 2 App一个按钮上两个badge样式,附带许多好的demo

14. 八月 2012
st app一个按钮上两个样式,附带许多好的demo http://mindsaur.com/demo/cart/ https://github.com/kostysh/Simple-shopping-cart-for-Sencha-Touch-2

sencha touch 2

解决Sencha Touch 2 NavigatorView Push事件只触发了一次问题

12. 八月 2012
大家在使用NavigatorView的时候是不是只能切换一次页面,第二次返回的时候,不能切换了。。。。 实际上这是sencha的一个不人性的设置,因为当我们返回的时候,实际上对旧有页面调用了一个pop()事件,而pop事件实际上会将你旧有的页面destory,然后重新生成一个页面,这样你原来监听的那些事件就都无效了。。。。。。。 大家只要将navigaotrView的autoDestory配置项设置为false即可。 论坛管理员解释: http://www.sencha.com/forum/archive/index.php/t-181064.html?s=6637b7134a8c5edaa3ef3cec581bb3c0 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 群 224711028 欢迎您的加入

sencha touch 2

使用Sencha Touch 2MVC框架内嵌html开发

12. 八月 2012
    为了使界面变得好看,这次采用了将写好的html页面嵌套入panel控件的方法,然后在launch函数中使用Ext.get()函数选取id后在绑定点击事件。做法:  Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。 1.lz在controller中定义了一个launch函数,在这个launch函数中执行绑定操作。2.执行绑定(这里对一个图片绑定了一个点击事件,使其点击后跳转到另外一个页面) p.s在图片上定义了一个id:banner1 var content = Ext.get('banner1'); content.on('tap', function(){ myApp.showView(1,'pop'); }, this);

sencha touch 2

如何制作带有字母分组条(indexbar)的List界面

12. 八月 2012
原文: http://bbs.cfxixi.com/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: 20px; text-align: center">No Matching Items</div>', disableSelection: true, items: [ { xtype: 'toolbar', docked: 'top', items: [ { 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 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.store; }

sencha touch 2

jspbuild用法(sencha touch压缩办法)

11. 八月 2012
 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 文件了。  

sencha touch 2

js生成二维码

8. 八月 2012
http://www.oschina.net/p/jquery-qrcode-js http://blog.jetienne.com/blog/2011/04/07/jquery-qrcode/

sencha touch 2

sencha touch 1.1巅峰作品 apphui

8. 八月 2012
http://m.apphui.com/

sencha touch 2

Sencha Touch 2 Card布局页面切换效果

7. 八月 2012
已知的有:Cover, Fade, Flip, Pop, Reveal, Scroll, Slide,  card布局中貌似cube没有包含在里面。。。。但是在tabpanel确是可以使用 P.S.如果遇到不能用的话大家参看这篇文章:http://www.sencha.com/forum/archive/index.php/t-186158.html?s=05b94218754784752b0e79b8c9eda0a9 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效果

sencha touch 2, sencha-touch1.1

Sencha Touch 1.1 切换动画效果

7. 八月 2012
 Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。 今天在m.apphui.com看到一个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

sencha touch 2

如何通过rest-json-wcf对extjs载入数据

7. 八月 2012
原文:http://blog.csdn.net/xiaoguang44/article/details/6947291 想了四天,今天终于搞定。。。。。。。感慨万分。。。。。 首先,wcf项目可以从github所在地址:https://github.com/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', proxy: { url: 'http://localhost:8080/exampleJsonpService/Metrics', type: 'jsonp', extraParams: { page: 4, pagesize: 10 }, reader: { root: '' } } }); store.getProxy(); //.extraParams.q = 'ipad'; store.read(); Ext.create('Ext.Container', { fullscreen: true, layout: 'hbox', items: [ { xtype: 'toolbar', docked: 'top', height: 50, scrollable: { direction: 'horizontal', indicators: false }, items: [ { ui: 'back', text: 'Back' }, { text: 'Default' }, { ui: 'round', text: 'Round' }, { xtype: 'spacer' }, { xtype: 'segmentedbutton', items: [ { 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, items: [ { 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, flex: 1 }, { xtype: 'panel', html: 'message preview', flex: 2 } ] }); } }); 显示效果:

sencha touch 2, sencha-touch1.1

解决Sencha Touch页面间的切换

7. 八月 2012
大家可以参考一个例子这里面有st在以一个card布局的Container容器里面做切换的,还可以自己设置动画效果项目文件太大超过限制有兴趣可去qq群共享下载:224711028

sencha touch 2

navigationview(动态生成页面然后切换)

7. 八月 2012
下载地址:http://bbs.cfxixi.com/showtopic-23.aspx Sencha Touch 交流 QQ 群 224711028 欢迎您的加入  

sencha touch 2

sencha touch manifest 用法(离线应用程序)

6. 八月 2012
 直接写就行了<html manifest="offline.appcache">以后修改offline.appcache中的版本号就会重新再下载    参考1:http://www.sencha.com/forum/showthread.php?102054-How-make-a-sencha-touch-app-offline-usable-with-html5-cache-manifest&p=478955#post478955   参考2:http://www.sencha.com/forum/archive/index.php/t-102054.html  

sencha touch 2, sencha-touch1.1

Sencha Touch一对多的数据关系的Model如何在List模板中显示

2. 八月 2012
hasMany association with itemTpl 原文:http://www.sencha.com/forum/showthread.php?182945-hasMany-association-with-itemTpl Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。 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. Code: Ext.define('mt.model.search', { extend: 'Ext.data.Model', requires: ['mt.proxy.search'], config: { fields: [ //{ 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' }], proxy: { type: 'search' } } }); This is the function in my controller that sets the search query and pulls the search results from my server. Code: onSearchSelect: function(list, record) { var search = record.searches(), resultsList = this.getResultList(); resultsList.setStore(search); search.load(); }, Here's my List… Code: Ext.define('mt.view.resultlist', { extend: 'Ext.dataview.List', xtype: 'resultlist', requires: [ 'Ext.XTemplate' //'mt.view.resultlistitem' ], config: { 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>' '</tpl>' ), 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中去,非常的麻烦。

sencha touch 2

Sencha touch2很多例子学习网站

30. 七月 2012
https://github.com/senchalearn

sencha touch 2

Sencha Touch从store中取出数据

20. 七月 2012
Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。 示例:    var model=Ext.getStore("storeId").getData(); 取出来的是model数组  取出items即可~~ 方法1:  var tempData=[];  var data=Ext.getStore(chartsDone).getData();Ext.each(data,function(t){    tempData.push(t.raw);}); console.log(tempData); 方法2:  var tempData=[];Ext.getStore(chartsDone).each(function(t){    tempData.push(t.raw);});console.log(tempData); 方法3  var tempData=[]; var data=Ext.getStore(chartsDone);Ext.each(data,function(t){    tempData.push(t.raw); });console.log(tempData); 

sencha touch 2

Sencha Touch 多次点击的时候可以取消上一次的操作

20. 七月 2012
Sencha Touch 交流 QQ 群 224711028 欢迎您的加入。 原文:http://docs.sencha.com/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', items: [{ 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标签进行调用。

sencha touch 2

Sencha touch 2中如何去除url中limit的字段

18. 七月 2012
原文:http://docs.sencha.com/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"

sencha touch 2

Sencha Touch 2中如何去掉url中的_dc参数

18. 七月 2012
只需配置noCache属性。

sencha touch 2

sencha touch 2 路由redirectTo(url)的用法

7. 七月 2012
原文:http://docs.sencha.com/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', config: { routes: { '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!

sencha touch 2