随笔分类 -  Sencha Touch2

摘要:我们以sencha touch ajax为例,在index.html模板中定义'', '', '',插入一个base64的图片数据载入到img标签中,效果如下:什么是Base64:Base64是一种基于64个可打印字符来表示二进制数据的表示方法。由于2的6次方等于64,所以每6个比特为一个单元,对应某个可打印字符。三个字节有24个比特,对应于4个Base64单元,即3个字节需要用4个可打印字符来表示。它可用来作为电子邮件的传输编码。在Base64中的可打印字符包括字母A-Z、a-z、数字0-9 ,这样共有62个字符,此外两个可打印符号在不同的系统 阅读全文
posted @ 2012-05-27 12:16 范永强 阅读(177) 评论(0) 推荐(0)
摘要:1.首先假设有一张list。2.初步代码:定义一个数据仓库store,大体如下3.修改一下,加入排序(sortProperty是一个属性)4.最后在你显示的list里 加 grouped: true, 阅读全文
posted @ 2012-05-27 12:14 范永强 阅读(159) 评论(0) 推荐(0)
摘要:lz使用了时下最火的st mvc框架https://github.com/kostysh/Sencha-Touch-2.0-MVC-test-application-with-NestedList发现部署后无法识别App.json这个文件心急如焚幸亏得到l.m同学的帮助,搞定。需参考两篇文章,让iis识别.json格式才行参考1:http://hi.baidu.com/yashua839/blog/item/e2e8913fe31b59d07c1e7166.html参考2:http://wenku.baidu.com/view/be78b04ffe4733687e21aa62.html 阅读全文
posted @ 2012-05-27 12:12 范永强 阅读(110) 评论(0) 推荐(0)
摘要:1.在jsonp方法中拼json2.参数format jsonproxy: { type: 'jsonp', url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog', params:{ Passport: E... 阅读全文
posted @ 2012-05-27 12:10 范永强 阅读(187) 评论(0) 推荐(0)
摘要:在这里lz使用了很笨的remove,add方法1.Ext.getCmp('testform').remove(Ext.getCmp('question'),true)question是一个fieldset移除form中的一些item,全部清除可以用removeAll的办法2.record.pojoa().each(function(answerArray){ //console.log(answerArray) var checkbox = { name:answerArray.id, xtype:'checkboxfield', label:. 阅读全文
posted @ 2012-05-27 12:08 范永强 阅读(127) 评论(0) 推荐(0)
摘要:0.首先下载mvc框架:https://github.com/kostysh/Sencha-Touch-2.0-MVC-test-application-with-NestedList1.在框架中要在app.js 这个文件中使用:launch: function() { //Ext.getBody().removeCls('loading'); // Destroy the #appLoadingIndicator element Ext.fly('appLoadingIndicator').destroy(); // Initializ... 阅读全文
posted @ 2012-05-27 12:02 范永强 阅读(175) 评论(0) 推荐(0)
摘要:st2中定义storedataStore = Ext.create('Ext.data.Store', { model: "OilRecord", syncRemovedRecords: true, sorters: [ { property : 'id', direction: 'DESC' } ] ... 阅读全文
posted @ 2012-05-27 11:56 范永强 阅读(145) 评论(0) 推荐(0)
摘要:主要是phonegap的用法,sencha比较简单,首先第一步我们根据教程在spring source(java ide)中根据教程创建项目。参考:http://www.phonegap.cn/?page_id=442#android需要嵌入phonegap代码时希望大家能够注意:然后在你的JS里面这样写 function mainLaunch(){ Ext.application({就可以了 阅读全文
posted @ 2012-05-27 11:53 范永强 阅读(155) 评论(0) 推荐(0)
摘要:方法1.在父容器中设置layout;'card',在子容器中设置layout:'fit'方法2:就是用document获取屏幕的宽和高,然后用setWidth方法进行设置 加载时 通过 //获取浏览器的高宽 winWidth = Ext.getBody().getWidth(); winHeight = Ext.getBody().getHeight(); 设置面板的时候 config: { width:winWidth ,height:winHeight,} 阅读全文
posted @ 2012-05-27 11:51 范永强 阅读(103) 评论(0) 推荐(0)
摘要:question:在app.js里没有launch:function()时怎么能知道程序从哪个地方开始的呢?就像例子ST2MVC中那样answer:launch:function() 这里就开始啊evidence:init的调用是在加载之前做的嘛,这个是根据JS的从上到下顺序执行的其中具体流程为:index.html 加载 ../../microloader/development.js它会根据app.json的配置,加载../../sencha-touch-debug.js和app.jsapp.js中定义了: profiles: ['Tablet', 'Phone&# 阅读全文
posted @ 2012-05-27 11:47 范永强 阅读(116) 评论(0) 推荐(0)
摘要:1.服务器上打开2.或者使用safari原因:需要服务器上打开是因为最新版的st使用了json文件作为app的配置文件,首页通过ajax加载该json文件,出于安全考虑,在chrome中,ajax无法读取本地路径的json文件,所以是一片空白,safari中可以 阅读全文
posted @ 2012-05-27 11:45 范永强 阅读(126) 评论(0) 推荐(0)
摘要:通过nestlist可以自定义一个有标题到内容的一个组合布局如图Ext.create(的“Ext.tab.Panel”,{ 全屏:真实, tabBarPosition:'底部', 项目:[ { 的xtype:'nestedlist 标题:“博客” iconCls:'明星', displayField:'标题', ... 阅读全文
posted @ 2012-05-27 11:43 范永强 阅读(172) 评论(0) 推荐(0)
摘要:sencha touch中提供的datepicker,是英文版的,在中国做软件当然要汉化。如上图,就是sencha的原版datepicker,我们要对它进行汉化。找源码:找到js源码文件sencha-touch-debug.js在文件中搜索datepicker部分。找到Ext.DatePicker的initComponent方法,对如下代码做修改for (i = yearsFrom; i <= yearsTo; i++) { years.push({ text: i,//此处修改为 text:i +' 年', value: i }); }和for (i = 0; i &l 阅读全文
posted @ 2012-05-21 13:42 范永强 阅读(184) 评论(0) 推荐(1)
摘要:列表组件要求两个前提条件被定义:用来进行数据存储的存储器和itemTpl 负责来显示数据.。要求列表来显示针对每条新闻的标题和日期,因此我们把我们在所定义的新闻模型的属性名称放在花括号中括起来。.下面让我们对列表的类型稍做风格的修饰,打开res/css/style.css并且添加下面的内容:.x-list-item-body { font-size: 0.8em; color: #0b3e7b; font-weight: bold;}.x-list-item-body .date { color: #666; font-weight: normal;}这里就是新闻... 阅读全文
posted @ 2012-05-08 14:58 范永强 阅读(117) 评论(0) 推荐(0)
摘要:建立一个新的控制器以处理新闻(NewsController.js):Ext.regController('News', { // index action index: function(options) { if ( ! this.indexView) { this.indexView = this.render({ xtype: 'NewsIndex', }); } var backBtn = this.application.view... 阅读全文
posted @ 2012-05-08 14:57 范永强 阅读(123) 评论(0) 推荐(0)
摘要:现在,让我们在app/data/ 目录下建立news.json 文件,并且从Sencha Touch Press添加一些新闻消息:[ { "title": "Beyond jQuery: JavaScript Tools For The HTML5 Generation", "date": "November 09, 2011", "content": "One of the stated goals of HTML5, at least for some groups, is to 阅读全文
posted @ 2012-05-08 14:56 范永强 阅读(127) 评论(0) 推荐(0)
摘要:创建存储器Store“存储类包含了一个客户端的模型对象的缓存,存储器通过代理加载数据,并且提供了针对其所包含模型实例数据的排序、过滤、查询模型实例“ (摘自Sencha Touch 文档)针对新闻item存储器模型将在app/stores/目录下创建,并且放置在NewsItemsStore.js 的这个文件中,文件包含下面的内容:Ext.regStore('NewsItems', { model: 'NewsItem', proxy: { type: 'ajax', url : 'app/data/news.json', }, a 阅读全文
posted @ 2012-05-08 14:28 范永强 阅读(157) 评论(0) 推荐(0)
摘要:在从零开始学习sencha touch MVC应用系列的最后一部分内容中,将在应用中添加一些数据来继续我们前面所讲的部分开发程序。在开始之前,请大家注意为了使这篇文章的所有例子都能运行,务必要将应用放在web环境中运行,因为应用中采用了AJAX技术,需要访问数据。下面开始为我们的应用添加一些消息在向应用添加消息之前,我们必须首先定义我们实际的一个消息条目所具有的属性,我们将通过创建一个模型来实现。建立模型“一个模型代表着应用所管理的对象,例如:我们可以定义一个关于用户、产品、汽车,等等诸如此类的现实世界对象的模型,这些都是我们想在系统中模型化的对象” (摘自Sencha Touch 官方文档) 阅读全文
posted @ 2012-05-08 14:07 范永强 阅读(140) 评论(0) 推荐(0)
摘要:我们已经给search-panel设置了cls属性:“一个可以添加到这个组件元素中的供选择的附加CSS类(默认为“”),主要可用于对组件的定制风格或者其组件元素的CSS规范化等”(引自SenchaTouch的相关文档),我们将使用这些类来达到视图的半透明化处理的目的。Search View将镶嵌在其他视图的顶部,并且不是以子视图窗口的方式显示,所以我们需要设置全屏属性,以强制组件尽可能的占用所有的可用空间。因为我们想让我们的搜索视图有滑动功能,我们需要设置浮动floating属性为true,否则视图将显示没有滑动动画功能,下面就是sencha Touch文档关于此问题的描述:“以浮动属性来创建 阅读全文
posted @ 2012-05-08 14:05 范永强 阅读(105) 评论(0) 推荐(0)