随笔分类 -  sencha touch 入门系列

摘要：这讲我们来讲解下如何使用phonegapa创建项目环境并通过她们将sencha touch打包成app，这里我们只讲解打包android的apk，打包ios的过程有点类似，但是需要在mac环境下，最后通过xcode导出成ipa安装程序； 一、phonegap环境搭建: phonega... 阅读全文

摘要：由于最近一直忙着android原生的开发，很久没有更新博客了，官方的sencha cmd工具功能非常强大，创建项目，压缩项目，打包安装程序都能轻松实现，这讲我们就给大家介绍下如何使用sencha cmd来打包我们的sencha touch项目， 为了更好地向大家演示如何打包一个sencha t... 阅读全文

摘要：上一讲我们讲解了如何使用官方的api来修改主题样式，这讲我们继续讲解sass的样式修改， 编译官方自带的主题包 在生成的项目以及官方sdk的目录下，自带了一些主题sass包，我们也可以通过修改sass文件来引入他们并进行编译，下图是官方sdk中自带的主题样式包： 我们如何在sass文件中... 阅读全文

摘要：大家知道，sencha touch是通过我们写的js代码来动态渲染单页面生成一个个div+css的html页面来模拟app应用，那么既然是div+css结构的，我们就可以通过修改css样式来自定义我们app的主题跟样式。 在sencha touch中，已经默认提供了一些主题样式，我们可以在下... 阅读全文

摘要：布局用来描述你应用程序中组件的大小和位置，在sencha touch中，为我们提供了下面几种布局： 1.HBox: HBox及horizontal box布局，我们这里将其称为水平布局，下面是一段演示代码： 1 Ext.create('Ext.Container', { 2 fullsc... 阅读全文

摘要：经常有新手同学抱怨说sencha touch的项目加载速度为什么这么慢，经常要10秒左右的时间甚至更多， 大家都知道，sencha touch开发的项目中引用了大量的js文件，当我们打开项目时，st的项目会一个一个地加载这些js文件，这样就造成了项目加载速度慢，如果是web远程访问，还会产生大量的http请求影响加载速度，增加服务器压力。 所以，我们的项目需要使用sencha cmd来进行打包压缩，通过sencha cmd打包压缩的项目，其中引用到的js（app.json中配置的或是项目中通过models、views、controls、requires这些方式引用的js文件）全部合并压... 阅读全文

摘要：对于一个普通用户来说，你的项目就是一组简单的视图集合，用户直接通过跟视图进行交互来操作你的应用，对于一个开发人员来说，视图是一个项目的入口，虽然大部分时候最有价值的部分是在model层和control层，所以这讲，我们将先介绍如何创建和使用我们的视图组件view。 首先，我们来介绍如何创建我们的视图组件， 在sencha touch中，已经封装好了一批在项目中可能常用的视图组件，如列表（list），form表单（formpanel），按钮（button）等等， 在官方example的kitchensink中的interface中，演示了所有的已有组件，地址如下:http://docs... 阅读全文

摘要：接着上一讲，我们通过一组代码来讲解一下st的类的一些属性： 1 Ext.define("MyConfig",{ 2 config:{ 3 website:"http://127.0.0.1" 4 }, 5 speak: function() { 6 console.log("speak12345"); 7 } 8 }); 9 10 Ext.define("Ext.ux.Util",{11 ... 阅读全文

摘要：在mvc结构的基础上，sencha touch又使用了sencha公司为extjs4开发出来的类系统，在面向对象的编程语言中，类是对对象的定义，它描述了对象所包含的大量属性和方法。跟面向对象语言类似，sencha touch的类提供了继承，依赖加载，mixins，属性方法设置这些强大的功能。 ... 阅读全文

摘要：接着上一讲，通过index.html里development.js对app.json里js资源文件的解析，app.js便被index.html引入了，app.js是整个项目的程序入口，在项目完成时使用sencha cmd打包压缩项目时，默认情况下所有的js文件都会被压缩成一行放置在app.js中，关于项目的打包我们会在后面的课程详细讲解，接下来我们来看下app.js，了解下整个项目是如何通过app.js来进行加载的。 1 //用来实例化Ext.app.Application，这是项目中唯一一个只要创建一次且不需要通过Ext.create来进行实例化的类， 2 //它会在Ext.applic.. 阅读全文

摘要：由于最近项目比较忙，加之还要转战原生开发，所以很久没更新了，今天我们接着上一次的内容往下讲： 首先我们打开index.html，这是我们整个程序的访问入口，也是整个项目的引入地： 1 2 3 4 5 MyFirst 6 52 53 54 55... 阅读全文

摘要：通过上一章节的操作，我们的项目已经创建完成了， 大家通过http://127.0.0.1/MyFirst/应该都已经访问到了自己的应用， 接下来，我们展开我们项目，如图所示： 一、目录结构 1. .sencha目录 .sencha 文件夹下主要是sencha cmd创建项目时生成的一些配置文件，对我们的开发并没有太大影响，我们可以暂时先不去管它 2. app 目录 app文件夹是我们的项目主体文件夹，我们整个项目的功能代码基本都在这个目录中， 整个目录体现了sencha touch的mvc结构， 我们展开app目录，可以... 阅读全文

摘要：通过上一章节的学习，我们的开发环境已经配置好了，接下来我们开始创建第一个sencha touch的项目，网络上很多sencha touch的教程都是手动搭建项目的， 不过手动搭建的项目缺少一些sencha cmd对项目代码打包压缩编译的关键文件， 所以在这里我们从创建项目开始都是使用sencha cmd工具，请确保上一章节中所有的环境配置都已经成功， 那么接下来我们开始我们的项目创建： 1.项目创建 在项目创建前，我们先确认下我们的sencha cmd的版本， 点击开始==》运行==》cmd, 键入sencha，会显示cmd的版本， 现在最新的是4.0，如果... 阅读全文

摘要：这是本人第一次写博客教程，没什么经验，文笔也不是很好，写这教程一方面为了巩固自己这段时间的学习成果，一方面帮助大家解决问题，欢迎大家多提建议，指出问题。接下来我们就开始我们的sencha touch开发之旅了。 首先，我们开始搭建sencha touch的开发环境，我这讲的环境搭建主要是针对windows平台的： 1.选择一款能够兼容并调试sencha touch的浏览器： sencha touch之前是针对webkit内核进行设计的，所以chrome或safari浏览器可以很好的展现基于sencha touch的webapp,不过sencha touch的最新版本也提供了对ie10... 阅读全文

摘要：参考链接:http://mobile.51cto.com/others-278381.htm Sencha touch 是基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch、Raphaël库，推出适用于最前沿Touch Web的移动应用开发框架，该框架是世界上第一个基于HTML5的Mobile App框架。同时，ExtJS更名为Sencha，JQTouch的创始人David Kaneda，以及Raphaël的创始人也已加盟Sencha团队 Sencha Touch可以让你的Web App看起来像Native App。美 阅读全文