本文目录
- sencha touch 2怎么清空store数据
- 如何把Sencha Touch 2.0框架打包成iOS本地应用
- 如何在senchaTouch3中自定义icon
- 如何优化 Sencha Touch 性能
- 如何在Sencha Touch 2 中使用图标
- 如何创建一个Sencha Touch 2应用
- 如何能让 Sencha Touch 2 加载更快一些
sencha touch 2怎么清空store数据
1、Sencha Touch项目(简称ST项目)、Phonegap项目、Android项目(或iOS项目)是三个不同的概念 2、ST项目和eclipse没关系； Android项目和eclipse有点关系(可以用eclipse调试和导出apk包)； iOS项目和xcode有点关系(可以用xcode调试和上架)
如何把Sencha Touch 2.0框架打包成iOS本地应用
准备工作 软件 Mac OS X 10.6+ Xcode (iOS 模拟器所需要的) Apple iOS provisioning Complete iOS provisioning on the Apple iOS provisioning portal and have the certificates and devices setup through the provisioning portal and Xcode. Create an App ID and finish provisioning your application. Please refer to the How-To section in the Apple iOS provisioning portal for help. 注意: 在打包iOS应用程序的过程中,需要用到App ID和App name。 在Mac系统上打包iOS系统应用程序的步骤 前期准备：进入 Apple iOS provisioning portal完成开发者授权。 安装打包程序部分： Sencha SDK Tools 2.0 创建一个配置文件用于打包IOS应用. 运行 packager 打包工具，创建一个App. Step 1:在Apple iOS provisioning portal完成iOS程序开发者授权 可查看开发者授权系统Apple iOS provisioning portal 来获得开发和发布应用程序所需要的certificate和profile。 Step 2: 安装打包程序 运行Sencha SDK 安装程序: SenchaSDKTools (SenchaSDKTools-2.0.0-Beta) 包含有打包选项的的sencha command会被安装到指定的目录中(默认: Applications/SenchaSDKTools-2.0.0-Beta/command). Step 3: 创建一个配置文件供打包iOS程序时使用. 配置文件具有如下的格式: { "applicationName": "《AppName》", "applicationId": "《AppID》", "outputPath": "《AppPackageOutputPath》", "iconName": "《AppIconName》", "versionString": "《AppVersion》", "webAppPath": "《PathToWebApp》", "configuration": "《Release | Debug》", "platform": "《iOSSimulator | iOS》", "deviceType": "《iPhone | iPad | Universal》", "certificateAlias": "《(Optional)CertificateAlias》", "orientations": } 注意:在Mac系统Terminal上运行如下的命令行可以创建配置文件模板: sencha package generate 《configTemplate.json》 《configTemplate.json》 是配置文件的名字. 注意: 《configTemplate.json》 的路径和文件名中不能包含空格。 下面参数用于iOS打包 "applicationName":"《AppName》" AppName 以及AppID都可以在 iOS provisioning portal 中的App IDs部分中找到 AppID 例如上方所示： AppName 为 “Sencha Touch 2 Packaging” AppID 为 “com.Sencha.Touch3Packaging” 注意: App ID 需要与你在 Xcode的Identifier field输入的相同 。 你打包出文件的输出位置,《application.app》。 "iconName":"《AppIconName》" 你的应用程序所需要的图标文件。 注意: Retina图标需要在文件名的末尾用@2x标记。例如icon.png （普通的图标文件），icon@2x.png (retina图标文件). 如果带有 @2x.png的retina图标存在,打包程序将包含retina图标.注意: 请参考 iOS icon guideline 来进一步了解图标文件类型。 "versionString":"《AppVersion》", application的版本. "webAppPath":"《PathToWebApp》" 用来打包的web application路径。 "configuration":"《Release | Debug》" 指定创建出程序的类型: Release or Debug. "platform":"《Simulator | iOS》" 制定创建出程序的运行方式 iOS 模拟器还是iOS设备. 注意: the iOS simulator cannot run a signed build. A signed build can only be run on the device. "deviceType":"《iPhone | iPad | Universal》" 指定设备类型.可选项: - iPhone：用于 iPhone 设备 – iPad：用于iPad 设备 – Universal：可用于iphone和iPad二者。 "certificateAlias":"《(Optional)CertificateAlias》" 这是一个非必选项. 你可以指定一个Certificate Alias来给你的app命名。 注意: 如果忽略此选项，默认的certificate将会是你在iOS Provisioning Portal中建立的那一个。 "orientations": 这是一个可选的配置项. 你可以给app指定方向. 可选项包括: “portrait”, “landscapeLeft”, “landscapeRight” and “portraitUpsideDown” 注意: 如果忽略此选项，默认将包括四个方向。 Step 4: 运行packager来打包获得一个程序 Sample debug configuration file { "applicationName":"Sencha Touch 2 Packaging", "applicationId":"com.sencha.touch3packaing", "iconName":"icon.png", "versionString":"1.0", "outputPath":"~/Desktop/STBuild-iOS", "webAppPath":"~/Desktop/www/", "configuration":"Debug", "platform":"iOSSimulator", "deviceType":"iPhone", "orientations": } 打包出一个在iOS 模拟器运行的app 准备工作: 在配置文件中设定Platform 和Configuration参数 例如: "platform":"iOSSimulator" "configuration":"Debug" 注意: 如果platform,configuration这两个选项没有提供 iOS将不能正常运行。 在终端运行以下命令，可以打包并在iOS上运行一个debug或unsigned的app。 sencha package run 《configFile.json》 顺利执行完此命令之后，iOS模拟器将会运行app 注意: “deviceType” 选项将引导启动合适的模拟器: iPhone iPad. 打包出一个在 iOS 设备上运行的app 在终端运行以下命令，打包出一个在iOS设备上运行的程序 sencha package 《configFile.json》 注意: 《AppName.app》 将会输出在指定的位置，这是一个你可以在iOS设备上运行的程序。转载，仅供参考，祝你愉快，满意请采纳。
如何在senchaTouch3中自定义icon
建议参考这篇百度文库关于如何在senchaTouch3中自定义icon的文章***隐藏网址***
如何优化 Sencha Touch 性能
优化应用程序的启动时间： 使用sencha cmd 的build工具打包和压缩所有需要的js文件成一个单独的文件，如app-all.js压缩你的JS和CSS文件。删除任何未使用的的JS函数或CSS mixin的（通过SASS/Compass 能很容易地检查）。动态加载外部JS文件，在这里已经有一个很好的话题：在Sencha Touch 2 里什么是正确加载外部JavaScript的方式 优化应用程序的性能：保持你的DOM结构尽可能小。不活动的view应当予以销毁（以后如果需要的话动态添加到容器中）。避免使用CSS3属性，因为他们在Android设备上是很慢的。对于任何scrollviews，l在Android上应禁用overscrol滚动效果。我已经在Android设备上测试过许多Sencha Touch3 应用，overscroll滚动效果因为延迟和滞后严重导致不愉快的经验。 （测试过Nexus S，Galaxy Tab的，和一些HTC手机）压缩js和css，删除无用的js方法和css启用硬件加速器Sencha Touch 跟Ext js一个提供了丰富且高级的组件让我们能快速的开发出一个跨手机平台而且很绚丽的产品,这听起来不错,但很快我们发现了一个严重的问题,手机上的效果根本没有在PC上用chrome打开的效果一样让人有刷刷的快感，甚至让人痛苦. Sencha Touch和ext一样,组件是类式继承的,大大降低了使用和学习的周期.但缺点也是很明显的,你每增加一个组件,内存消耗就增加很多,可能你已经使用minify/JSBuilder/YUI compressor等工具压缩过你的代码了,如果性能还不佳,那么可以看看以下是个人的一点建议1.每个组件都应该考虑它的xtype,如果可以使用container就不要使用一个panel了2.list一列的个数显示一屏就可以了,list有很多高级的功能,但性能非常的差,只能通过减少加载项来解决3.尽量不要使用tbar/bbar,Sencha Touch的提供的toolbar功能强大,按钮也很易用,但使用的DOM元素也非常的多,自己写一个bar是非常必要的4.把不在置顶的view中的DOM给删除,有时候,我们的项目中有好几个view,但我们一时间内是不可能同时查看两个view的,应该把其他view的DOM元素给释放了从上面看来,性能优化的关键是控制DOM元素的数量,但Sencha Touch还会对一些元素绑定事件,如何开始就不显示这些元素,那么内存开销会更低。
如何在Sencha Touch 2 中使用图标
对于iphone和iPod Touch(pixels为单位)，图片大小为57*57 对于高分辨率的iphone和ipod Touch(pixels为单位)，图片大小为 114 x 114 ipad(pixels为单位),图片大小为72 x 72 高分辨率的iPad (pixels为单位): 144 x 144 下图比较直观地告诉开发者，不同大小的图标在以上尺寸型号的设备中的大小： 在sencha touch 框架中，我们通过设置Application类中的三个属性：icon, phoneIcon, 和tabletIcon，从而达到设置图标大小的目的。其中icon的设置有两种方式，首先是单一的一个参数的方式，这种方式中icon的属性是接收一个表示图片路径的字符串，而无论应用是安装在iphone的什么位置，如下代码所示： Ext.application({ name: "IconsSample", views: , icon: "img/app-icon.png", launch: function () { var mainPnl = Ext.create("IconsSample.view.MainPanel"); Ext.Viewport.add(mainPnl); }}); 这里，通过icon属性指定使用了img目录下的app-icon.png这张图片。 此外，sencha touch也十分人性化，提供了phone icon和tablet icon,分别用来作为手机应用和平板应用时使用的图标，代码如下：Ext.application({ name: "IconsSample", views: , icon: "img/app-icon.png", phoneIcon: "img/app-phone-icon.png", tabletIcon: "img/app-tablet-icon.png", launch: function () { var mainPnl = Ext.create("IconsSample.view.MainPanel"); Ext.Viewport.add(mainPnl); }}); 当以上的icon,phone icone三个属性都设置好后，在sencha touch中，就可以使用如下的代码进行设置大小和尺寸了：if (Ext.isString(icon) || Ext.isString(phoneIcon) || Ext.isString(tabletIcon)) { icon = { ’57’: phoneIcon || tabletIcon || icon, ’72’: tabletIcon || phoneIcon || icon, ’114’: phoneIcon || tabletIcon || icon, ’144’: tabletIcon || phoneIcon || icon };} 从代码中可以看到，这里判断当用户设置了三种尺寸图片的图标后，分别设置在某个尺寸下优先设置三类图标的尺寸大小。比如在144×144 pixel的情况下，优先使用tabletIcon定义的图标，再使用phoeIcon的图标。 另外一种方法，能给用户最大的权利去定制图标，那就是在icon属性中分别设置指定尺寸的图片大小，如下代码：Ext.application({ name: "IconsSample", views: , icon: { "57": "img/app-icon57.png", "72":"img/app-icon72.png", "114": "img/app-icon114.png", "144": "img/app-icon144.png" }, launch: function () { var mainPnl = Ext.create("IconsSample.view.MainPanel"); Ext.Viewport.add(mainPnl); }}); 无论是使用上面的哪种方式，Sencha touch 2将会检查icon的配置项，并且将适当的图标放置到页面的合适的地方，代码如下：precomposed = (Ext.os.is.iOS && config.glossOnIcon === false) ? ’-precomposed’ : ’’;if (icon) { var iconString = ’apple-touch-icon’ + precomposed, iconPath; // 添加默认的按钮 addLink(iconString, icon); // 在页面中添加每个按钮 for (iconPath in icon) { addLink(iconString, icon, iconPath + ’x’ + iconPath); }} 更多关于sencha touch 2 框架的使用，请参考sencha touch 2的官方文档。
如何创建一个Sencha Touch 2应用
在此系列中，我们将创建一个Sencha Touch 2版本的记事本应用，用来记录用户的笔记并存储在该运行设备上。在这个过程中，我们将深入一下几个区域： 建立一个Sencha Touch 应用的区块 如何实现一个应用多视图的导航栏 如何使用Sencha Touch表单元素数据 如何利用列表视图呈现数据 如何使用HTML5本地存储保存数据 此系列的第一部分中，我们将定义该应用的特性，包括外观样式，我们将开始建立应用主窗口。 记事本应用的特性 我们希望该应用能够让用户可做以下事情： 创建笔记 已存在的笔记 删除笔记 以列表方式显示当前设备上的笔记 通过浏览器sessions将此设备上的笔记持久化 应用的用户界面 该记事本应用的主界面将以列表形式显示已有记录。我们将次视图命名为NotesListContainer。此处是它的模型，描述了怎样利用Sencha Touch组件来构建。 正如你看到的，NoteListContainer 视图是一个Ext.Container组件，它集成了一个工具栏组件和一个列表组件。我们将把Ext.List组件作为一个独立的视图：NotesList视图。 第二屏NoteEditor视图，用户可以在此创建、和删除记事。该视图就像如下模型： 该NoteEditor视图是一个Ext.form.Panel组件，它包含了一组工具栏和表单元素以记录的属性。 同时，我们也需要一种在不同屏幕中导航的机制。由于每个Sencha Touch应用已启动变获取了一个Viewport,我们可以利用它来呈现NotesListContainer 和NoteEditor 视图，同时也可以利用它管理两视图间的导航: 该Viewport很适用于当前任务，它继承自Container类，默认全屏卡片布局，这正是我们所需要的。 一个Sencha Touch 应用在目录与文件上如何组织 我们已经定义好了应用的特性以及用户界面，接下来，我们将开始编写源代码，我们将如下组织源代码文件目录： 将文件放在NotesApp目录下，一并包含着该应用的启动代码（app.js中）。 我们同样需要一个app目录，其下放置controller,model,profile,store,view目录。程序中用的控制器、模型等将分别放置在对应的目录下。 index.html文件将启动该应用，此文件中，将包含Sench Touch框架。 view sourceprint? 01. 《!--《!DOCTYPE html》 02. 《html》 03. 《head》--》 《!--Remove comments!--》 04. 《title》My Notes《/title》 05. 《link href="../Lib/ST2/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /》 06. 《script src="../Lib/ST2/sencha-touch-debug.js" type="text/javascript"》《/script》 07. 《script src="app.js" type="text/javascript"》《/script》 08. 《!--《/head》 09. 《body》 10. 《/body》 11. 《/html》--》 《!--Remove comments!--》 注意，我们将该框架文件防止在Lib/ST2文件夹下 创建一个Sencha Touch应用实例 第一步我们将在app.js中创建一个Sench Touch应用类的实例，如下定义一个应用实例： view sourceprint? 1. Ext.application({ 2. name: "NotesApp", 3. launch: function () { 4. 5. console.log("App launch"); 6. } 7. }); application()方法将在页面准备就绪后加载一个应用实例，它将使用给定的配置设置该应用。对我们而言，只是简单的给定了一个程序名、并定义了launch()函数。 application()函数有一个重要的作用就是出发Models,Views，Controllers，Stores和Profiles的加载。当我们定义好了相关部分的依赖，这些出发都将自动产生。在此教程中，我们将看到这一特性。 launch()函数当程序加载依赖以及实例化Controllers时被调用。 若我们在模拟器中进入此页面，将看到下面这些： 在Sencha Touch中继承类 我们已经了解，主屏幕将以列表形式展现已经缓存在设备中的记录列表。构建此屏，我们需要使用一个Container类的实例，该实例将集成一个工具栏和一个列表 首先，我们需要在view目录下创建NotesListContainer.js文件： 在此js文件中，我们将如下定义NotesListContainer 视图： view sourceprint? 01. Ext.define("NotesApp.view.NotesListContainer", { 02. extend: "Ext.Container", 03. config: { 04. items: 17. } 18. }); 这里我们将使用Ext.define()来定义一个Ext.Container类的扩展，将在此视图中添加一个Toolbar实例，让其停靠在顶部，该Toolbar将依次包含一个New按钮，该按钮将激活NoteEditor视图来创建新的记事。 请注意我们如何将一个Spacer组件添加在该按钮之前。这能使New按钮放置于Toolbar的右端。同时，ui=“action”设置如何让该button拥有特别的外观样式，该设置定义了在该视图上的的button的默认样式。 在Sench Touch指定应用的依赖 在定义好NotesListContainer类后，是让程序注意到它的时候了。我们回到app.js文件，在application()函数中添加视图设置： view sourceprint? 01. Ext.application({ 02. name: "NotesApp", 03. views: , 04. 05. launch: function () { 06. 07. var notesListContainer = Ext.create("NotesApp.view.NotesListContainer"); 08. Ext.Viewport.add(notesListContainer); 09. } 10. }); 我们使用以下视图配置来通知程序在NoteListContainer视图上有一个依赖： view sourceprint? 1. views: 该应用类默认models, views, controllers, stores 和 profiles放置在app/model, app/view, app/controller, app/store, 和 app/profile目录下。在此约定下，我们可以使用它们名称的后部分来定义models, views, controllers, stores 和profiles。如果我们使用了不同的目录结构，便需要指明它们的完整命名。 是时候看看这个视图的模样了。在模拟器中，你将看到类似下面的外观： 不错对吧，让我们继续构建Controller，我们需要一个Controller类来管理用户输入，模型修改，以及试图间的切换。 创建Sencha Touch 控制器 让我们先创建一个简单的Notes控制器类，将此类放置在Notes.js文件中，并将此文件放在controller目录下： 如下为Controller定义: view sourceprint? 01. Ext.define("NotesApp.controller.Notes", { 02. extend: "Ext.app.Controller", 03. launch: function () { 04. this.callParent(); 05. console.log("launch"); 06. }, 07. init: function () { 08. this.callParent(); 09. console.log("init"); 10. } 11. }); 控制器包含一些方法，如init()与launch()，这些方法将在应用处理的不同时刻运行。init()将在应用运行launch()函数钱调用，而控制器的launch()函数将在应用运行launch()后调用。 在控制器设置中添加相关依赖使得程序能识别到Notes控制器类： view sourceprint? 01. Ext.application({ 02. name: "NotesApp", 03. controllers: , 04. views: , 05. 06. launch: function () { 07. 08. var notesListContainer = Ext.create("NotesApp.view.NotesListContainer"); 09. Ext.Viewport.add(notesListContainer); 10. } 11. }); 众所周知，在控制器设置中添加Notes Controller Class将使得应用自动实例化该控制器并保持对它的引用。 如何处理Sencha Touch控制器中的视图事件 我们已经创建好了控制器，准备好向其添加特性。首先Notes控制器需要的是处理New按钮的点击。我们可以通过如下代码修改控制器定义来完成此功能： view sourceprint? 01. Ext.define("NotesApp.controller.Notes", { 02. extend: "Ext.app.Controller", 03. config: { 04. refs: { 05. newNoteBtn: "#new-note-btn" 06. }, 07. control: { 08. newNoteBtn: { 09. tap: "onNewNote" 10. } 11. } 12. }, 13. onNewNote: function () { 14. console.log("onNewNote"); 15. } 16. 17. // init and launch functions omitted. 18. }); 看到变化了吗？是的，就在refs与control设置上。他们是控制器引用其他组件的机制基础，并为他们定义事件处理。 refs 是的控制器能够找到应用中的组件，使用ComponetQuery类的类似于样式选择器的语法来检索组件。 在Notes Controller中，我们使用newNoteBtn ref来创建一个id为#new-note-btn组件的应用，这便是New按钮。 view sourceprint? 1. refs: { 2. newNoteBtn: "#new-note-btn" 3. } 基于次ref，框架将生成一个getter函数让我们能够随时获取该New按钮。Ref- 衍生的getter方法将以如下简单格式命名，它由get与大些名字组成，该函数名即为getNewNoteBtn()。 Refs同时能在某组件应用不存在的情况下实例化次组件。即使在本代码中我们并未采用此方法，当时建议研究一下次特性。 control设置项定义了应用组件的事件处理，可使用refs或ComponentQuery选择器定义control中的时间处理。在Notes Controller中，我们使用newNoteBtn来定义New按钮的单击处理： view sourceprint? 1. control: { 2. newNoteBtn: { 3. tap: "onNewNote" 4. } 5. } 很明显，我们需要定义处理函数，我们将在Controller的代码中做进一步的工作： view sourceprint? 1. onNewNote: function () { 2. console.log("onNewNote"); 3. } onNewNote()函数只是简单的信息输出到控制台而已，不久我们就会添加打开NoteEditor视图的代码。 在模拟器中检查程序，如果单击New按钮，将会输出一条消息。 如果你的控制器需要处理某个组件的特定事件，你可以参考一下步骤： 为组件创建引用（ref） 在控制器的control 设置中为ref创建实体 使用该control设置中的实体指定你感兴趣的时间处理方法
如何能让 Sencha Touch 2 加载更快一些
1，除了sencha.js，其他的css和js根本就没有压缩！发布的时候一定要压缩一下，对比一下我的代码中压缩过的大小：app-all.js压缩前1.7M,压缩后400k；app.css 压缩前500k,压缩后200k。2，sencha-touch.css和app.css内容重复了！debug看下就知道，所有的css都有两份。不知道你是怎么编译sass的，正确的做法是配置好config.rb，然后使用compass compile来编译压缩，最后会生成一个app.css的压缩文件，我的大小是200k。只有这一个css文件，没有另外一份。最后，可以检查下app.scss，不必要的import可以注释掉，能降低发布时文件的大小。
