写博客园越来越懒了,只写重点部分,不明白的可以Q我. 1.当你通过Cmd生成项目之后,App\resources\sass就是我们的样式源文件 2.想自定义自己的样式分为两种方式 扩展:这个是基于st提供的皮肤上面做修改 新建:基于st的base主题,做自己的主题 两者基本一样,以扩展为例 3.打开App\resources\sass\app.scss // 这里是需要继承的css样式,默认是default,当然如果你要扩展其他样式可以自己选择,例如:cupertino,bb10,mountai…

原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置,因而,不需要手动去管理那些碎片.Ext JS与Sencha Touch的布局类有许多相似之处,最近在 Ivan Jouikov的这篇博文中对他们进行了详细的分析.虽然是这样,但很多Ext JS和Sencha Touch开发人员可能永远都不会去了解布局系统的机制原理.Sencha框架已经提供了最常用…

项目初始化时执行以下代码 //重写模型,方便进行自定义验证 Ext.define("Ext.zh.data.Model", { override: "Ext.data.Model", validate: function () { var errors = Ext.create('Ext.data.Errors'), validations = this.getValidations().items, validators = Ext.data.Validation…

版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 Android Studio具有自己的主题皮肤,但是如果想要更换自己喜欢的主题皮肤,可以参考下面的步骤. 注意,更换主题皮肤,之前的设置(比如菜单栏字体.编码字体,是否显示行号等)都需要重新设置.也就是说每一个主题皮肤的设置都是独立的. 另外,如果重新切换回到自带主题皮肤,那么就不能再切换到自定义主题皮肤了,需要重新引入. 下载主题皮肤文件 下载地址: http://color-themes.com/?view=index 这是…

上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sass文件来引入他们并进行编译,下图是官方sdk中自带的主题样式包: 我们如何在sass文件中导入这些样式呢,我们接着上一讲创建的项目,打开项目下resources/sass文件夹下的app.scss文件,去掉上一讲修改的样式,如图: 如果你要引入对应的样式,只需修改@import的路径就可以了,这里我…

大家知道,sencha touch是通过我们写的js代码来动态渲染单页面生成一个个div+css的html页面来模拟app应用,那么既然是div+css结构的,我们就可以通过修改css样式来自定义我们app的主题跟样式. 在sencha touch中,已经默认提供了一些主题样式,我们可以在下载的sencha touch sdk路径下的touch-building/resources/css和touch-building/resources/css-debug文件夹下找到这些样式文件,css文件夹…

sencha touch 2.2.1 这个版本使用了新的按钮模式,不过他只提供了少部分的按钮样式.我们可以加一些自定义的ico样式 新加ico样式lower .x-button .x-button-icon.lower:before { position:absolute; ; ; ; ; text-align:center; font-family:"Pictos"; content:"_"; } 以在list中使用示例 Ext.define('app.view.…

参考这篇博客https://blog.csdn.net/young_Emily/article/details/78591261做一遍,加上自己的一些理解 思路:通过自己上一篇博客https://www.cnblogs.com/aidixie/p/10309862.html做出多个不同的自定义主题,在不通的主体的css样式前加上不同的class名,在页面跟换不同肤色时,通过改变body上的calss来添加不同的样式. 一.elementui自定义主题更换皮肤 1.1.给不通的主题添加不同类名 在…

ST2.2版本竟然又改变了sass中自定义图标的添加方式,在2.2以前采用的是这种base64的方式,详见:http://www.cnblogs.com/qidian10/archive/2012/11/19/2776953.html 但ST2.2.1中所有的图标icon都采用字体的形式展现,也就是说你看到的并不是图片,而是一种字体. Sencha Touch采用http://pictos.cc/font/作为图标库,类似的字体图标库还有很多. 那么采用font的形式,我们如何自定义自己的ico…

参考资料: http://www.cnblogs.com/qqloving/archive/2013/04/25/3043606.html http://www.admin10000.com/document/140.html 这里我主要讲的是如何加入全局变量.公用类.自定义扩展.资源文件 官网地址:http://www.sencha.com/products/touch/ 官当最新doc:http://docs.sencha.com/touch/ 1.环境搭建 a.安装java 先下载JAVA…

(基于Ext JS 4.2.1版本) UI组件 学习ExtJS就是学习组件的使用.ExtJS4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件. ExtJs4的组件体系中有将近100种组件,而这些组件又可以大致分为四大类,即容器类组件.工具栏及菜单栏组件.表单及元素组件.其他组件. theme主题 ExtJs4引入了全新的主题系统,采用Sass和Compass技术,提供了标准的主题模板,通过对主题模板的简单定制就可以创造出丰富多彩的各种主题. S…

Sencha Touch 现在已全面升级至Ext Js 6,那么我们如何使用他们呢? 首先去官网下载最新的sdk和帮助文档 sdk下载地址:https://www.sencha.com/products/extjs/evaluate/ 如图,这个是试用版下载地址,试用版和正版的区别大概就是试用版有试用标记水印吧,大概是吧. 官方api下载地址:http://docs.sencha.com/extjs/6.0/ 这个就是官方的在线api了,想要下载就把鼠标移动到左上角的Ext JS Guides上…

<Sencha Touch权威指南>内容简介:如何才能全面而透彻地理解和掌握移动应用开发框架Sencha Touch并开发出令人心动的移动应用?<Sencha Touch权威指南>将给我们满意的答案!它的内容系统而全面,细致地讲解了Sencha Touch的所有功能.特性.使用方法.开发技巧,让我们能做到对Sencha Touch了如指掌:它实战性强,不仅每个知识点都配有精心设计的小案例(具体的实现步骤.完整的实现代码.最终的实现效果,图文并茂),而且还有综合性的案例,能让我们迅速…

首先来个最简单的一键切换主题功能,就做个白天和晚上的主题好了. 先看我们的styles文件: <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name=…

纯粹的总结一下移动web开发框架,移动 web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族,Sencha Touch来自于ExtJS.jQuery Mobile 和Sencha Touch都是比较成熟老牌的框架,项目中也有应用.国内也有公司,像BAT巨头也在探索和实现了适合自己的移动web框架. 1.jQuery Mobile jQuery Mobile框架能够帮助你快速开发出支持多种…

本文将根据API文档中关于主题的介绍做的一次演练,以便熟悉自定义主题的过程. 练习环境: Sencha Cmd v4.0.1.45 Ruby 1.9.3-p392 firefox 26 首先,使用以下Sencha Cmd命令创建一个名为TestMyTheme的应用程序: sencha -sdk c:\ext4 generate app TestMyThemec:\TestMyTheme 命令中,参数sdk声明了框架文件所在目录为C盘的ext4目:generate为命令(commands),表示要…

原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a technical trainer at Sencha. She's located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time deve…

26.sencha touch在华为.红米等部分手机下hide事件失效,msgbox无法关闭怎么办 答:请看http://www.cnblogs.com/cjpx00008/p/3535557.html 如果还不能解决请尝试使用浏览器自带的弹出方法 27.sencha touch中list使用Ext.plugin.PullRefresh 刷新一次,就会显示重复数据,这是为什么 答:找到list的数据仓库对应的模型(model),为其指定idProperty(主键name)属性. list中的每条…

Container控件是我们在实际开发中最常用的控件,大部分视图控件都是继承于Container控件,了解此控件能帮我们更好的了解sencha touch. layout是一个很重要的属性,能够帮助你进行布局. layout的基本用法可见:http://www.cnblogs.com/html5mob/archive/2012/07/10/2583248.html 了解了基本用法之后,我们可以用此实现复杂的布局,比如九宫格布局. 代码如下: Ext.define('app.view.layout…

2014.1.6晚上8点准时开的课 本期培训一共八节,前三堂免费,后面的课程需要付费才可以观看. 本节内容:             实现皮肤自定义样式的修改 css相关理论: 重写官方样式,美化app,手把手教你如何查看官方样式及修改样式: 利用sencha touch现有资源定制ico图标,实现列表.详细页面的复杂布局. 本节课程共享链接 百度:http://pan.baidu.com/s/1jGMdXXG 课程说明及付费链接: http://item.taobao.com/item.htm…

由于最近项目比较忙,加之还要转战原生开发,所以很久没更新了,今天我们接着上一次的内容往下讲: 首先我们打开index.html,这是我们整个程序的访问入口,也是整个项目的引入地: <!DOCTYPE HTML> <html manifest="" lang="en-US"> <head> <meta charset="UTF-8"> <title>MyFirst</title>…

参考链接: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…

Sencha Touch 是一个使用 HTML5.CSS3 和 JavaScript 语言构建的移动 web 应用程序框架,在本文中,学习如何应用您当前的 web 开发技能进行移动 web 开发.下载和建立 Sencha Touch,通过一个样例应用程序探究基本原理.学习开始使用 Sencha Touch 框架所需的一切 2012 年 3 月 19 日 内容 概述 Sencha Touch 准备开始 UI components 结束语 参考资料 评论 概述 在软件开发领域中,有两个重要的趋势越来…

♣Sublime Text3软件的下载 ♣设置字体的大小 ♣设置背景色和关键字颜色(Color Scheme 生成器) ♣快速生成html头文件 1.Sublime Text3软件的下载地址和包含的文件:http://download.csdn.net/detail/sinat_31719925/9684613 Sublime Text 3 32位和64位优化版和我的主题包. 2.设置字体的大小: 首选项->设置-用户, 修改"font_size"属性即可 3.设置背景色和关键字…

为了更好地向大家演示如何打包一个sencha touch的项目,我们用sencha cmd创建一个演示项目,如果你的sencha cmd环境还没有配置,请参照 sencha touch 入门系列 (二)sencha touch 开发准备 进行配置. 首先在开始->运行中输入cmd,回车,打开命令行工具,cd指令进入到我们的sencha touch的sdk目录中,执行项目创建的指令: 此时在webtest路径中便创建了一个testPackage的项目,我们打开项目中创建生成的packager.js…

移动端到服务端通信往往会发生很多莫名的异常情况,如何有效的监控proxy异常,给用户友好的用户体验呢? Proxy给我提供了异常exception的监听事件,只需要监控该项目即可. Sencha Touch Store的基类如下: Ext.define('HzyApp.store.Base', { extend: 'Ext.data.Store', config: { proxy: { scope: this, listeners: { exception: function (proxy, r…

1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布成Android/IOS本地app应用 移动框架简介,为什么选择Sencha Touch? 目前市面上,移动应用web框架,也算是风生水起,不断涌现,各个都称自己最牛逼.常见的几个框架主要有jquery Mobile,Dojo Moble,Sencha Touch,我这里是极端推荐Sencha To…

移动前端工作的那些事---前端制作之微信小技巧篇   (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制作之微信技巧篇 随着微信的越来越大众化,微信的使用程度也越来越高.随之,产生了一种新的推广模式,即微信推广.在这个微信的大平台上会衍生出许许多多的推广手段.而移动前端作为服务于手机用户的手机网页技术,也不可避免的加入进来. 一些客户不仅仅满足于自己的网站可以在手机浏览器上完美的展现出来,同时还要求可…

从sencha touch 2.4.2升级到ext js 6,cmd版本升级到6.0之后发生了很多变化 首先从cmd说起,cmd 6 中sencha app build package不能使用了,sencha app build native好像也不能用了. 有个好消息就是我们可以用sencha ant native buildsencha ant package build 这两个命令,目测和以前的效果差不多了 然后再说说ext js 6相对sencha touch 2.4.2的变化 首先最只…

纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族,Sencha Touch来自于ExtJS.jQuery Mobile 和Sencha Touch都是比较成熟老牌的框架,项目中也有应用.国内也有公司,像BAT巨头也在探索和实现了适合自己的移动web框架. 1.jQuery Mobile适合你吗 差不多二十年来,处理跨浏览器的HTML和CSS不一致…