随笔分类 -  sencha touch 入门系列

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

posted @ 2014-06-25 15:10 想啦牛肉面 阅读(1854) 评论(0) 推荐(1)

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

posted @ 2014-05-26 11:55 想啦牛肉面 阅读(3045) 评论(0) 推荐(1)

sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
摘要:上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包 在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sass文件来引入他们并进行编译,下图是官方sdk中自带的主题样式包: 我们如何在sass文件中... 阅读全文

posted @ 2014-04-28 11:13 想啦牛肉面 阅读(3150) 评论(3) 推荐(1)

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

posted @ 2014-04-14 10:17 想啦牛肉面 阅读(1801) 评论(0) 推荐(0)

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

posted @ 2014-04-14 10:14 想啦牛肉面 阅读(2242) 评论(0) 推荐(0)

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

posted @ 2014-04-08 14:24 想啦牛肉面 阅读(1087) 评论(0) 推荐(0)

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

posted @ 2014-04-08 12:57 想啦牛肉面 阅读(1919) 评论(0) 推荐(0)

sencha touch 入门系列 (八)sencha touch类系统讲解(下)
摘要:接着上一讲,我们通过一组代码来讲解一下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 ... 阅读全文

posted @ 2014-03-31 11:06 想啦牛肉面 阅读(1850) 评论(0) 推荐(1)

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

posted @ 2014-03-26 13:28 想啦牛肉面 阅读(1899) 评论(5) 推荐(1)

sencha touch 入门系列 (六)sencha touch运行及代码解析(下)
摘要:接着上一讲,通过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.. 阅读全文

posted @ 2014-03-20 10:12 想啦牛肉面 阅读(1432) 评论(1) 推荐(0)

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

posted @ 2014-03-17 10:38 想啦牛肉面 阅读(2609) 评论(6) 推荐(0)

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

posted @ 2013-12-18 10:29 想啦牛肉面 阅读(2144) 评论(0) 推荐(1)

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

posted @ 2013-12-17 16:55 想啦牛肉面 阅读(3112) 评论(0) 推荐(0)

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

posted @ 2013-12-17 14:34 想啦牛肉面 阅读(3138) 评论(2) 推荐(1)

sencha touch 入门系列 (一)sencha touch 简介
摘要:参考链接: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。美 阅读全文

posted @ 2013-12-17 11:20 想啦牛肉面 阅读(1830) 评论(0) 推荐(0)

导航