jQuery MiniUI,快速开发WebUI界面

中文教程

Sencah Touch英文书籍 《Sencha Touch in Action》

Jay Garcia develops Ext JS and Sencha Touch applications for various clients around the world and actively contributes to the Sencha community as a speaker, advocate, and frequent poster on technical forums. Author of Ext JS in Action, Jay has been a Sencha enthusiast and supporter since 2006. Anthony De Moss has been an avid Ext JS enthusiast since 2007 and is fanatical about good product design and usability. On the rare occasion he's away from his keyboard, you can find him climbing at the local rock gym. Mitchell Simoens has been working with Ext JS since late 2006 and Sencha Touch since 2010. He now works at Sencha doing primarily support on the forums but also works on Ext JS and Sencha Touch.

将Ext JS 5应用程序导入Web项目以及实现本地化

在Ext JS 5,使用了新的脚本和样式加载方式,这对于将应用程序导入到Web项目中产生了点小麻烦。而对于本地化文件的导入,也采用了新的方式,本文将一一解答这些问题。

将Ext JS 5应用程序导入Web项目

在Ext JS 5,会使用bootstrap.js来加载应用程序脚本和样式,而bootstrap.js是根据Bootstrap.json来加载样式文件和脚本的。问题就在这个Bootstrap.json文件上,如果是使用IIS的Web项目,首先会碰到的问题是Web服务器不允许下载JSON文件,这时候,就得先解决这个问题,不然加载肯定会出错。

如果认真研究一下bootstrap.js文件,会发现它主要用来获取脚本和样式文件的地方是Bootstrap.json中的js和css成员值。在自动生成的Bootstrap.json文件中,脚本和样式文件的默认路径就是没有路径,也就是与首页文件是同一路径,这样,当首页文件与脚本和样式文件不在同一路径,就加载不了脚本和样式了。由于Bootstrap.json文件中要加载的脚本文件很多,要直接修改Bootstrap.json文件中的文件的路径,不太现实。那就只能在bootstrap.js文件中找寻解决方案了。

了解ExtJS 5的小部件

在Ext JS 5,引入了新的“widgetcolumn”,支持在网格的单元格中放置组件。同时,还在Ext JS 5引入了一种新的被称为“小部件”的轻量级组件。在Ext JS 5中,已包含了几个小部件,在本文将告诉你如何轻松的去打造自己的小部件。

为了说明其中的关键概念,在文中将创建一个简单的名为“ratings”的如下图所示的小部件:


在Sencha应用程序中使用插件和Mixins

概述


当扩展一个框架类的功能的时候,通常都会直接将新功能写入派生类,然而,如果所需的同一功能存在于多个组件,那最有效的方式就是将它定义为一个插件或混入。插件和混入都是用来将额外功能添加到其他类的类。在本文,将介绍这些类是什么,他们之间的区别,以及他们如何工作。在Sencha Fiddle,我们准备了一些示例来演示这些概念。

Sencha Touch打造超级奶爸之喂养记APP(附源码)

起源

  非常高兴我的宝宝健康平安的出生了。对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常。最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便,体温等情况。我想医生们应该也是通过这些数据来分析宝宝是否健康。宝宝刚才出生的几天,吃喝,大小便很频繁,

但又不方便记录,很容易遗漏,所以想做一个APP来记录宝宝的一些数据。最近正在学习Sencha Touch+PhoneGap,经过几天的开发,基本成型,目前我的宝宝一些数据都是用这个软件来记录的。同时也分享给大家,希望能对更多的人有用。初次开发,还有很多不周全的地方,望各们指正。

  宝宝刚出生这一段时间主要需要记录的数据有:妈妈喂奶次数,喝牛奶多少量,大小便多少次,体温多少,睡了多长时间。APP也是围绕这几个功能进行开发。

最终效果



热门技巧

移除网格中单元格的焦点

由Ext JS 5.0.1开始,我们已经添加了对可访问性和ARIA的支持的一些显著改善。虽然我们鼓励用户使用这些新增加的功能,但我们知道并不是所有用户都喜欢默认的风格。事实上并非常所有情况下焦点都在单元格边框内;

如果你想调整焦点的样式,最好是通过修改你的SASS变量并重新编译你的样式;

  • $grid-row-cell-focus-background-color
  • $grid-row-cell-focus-border-color
  • $grid-row-cell-focus-border-inset
  • $grid-row-cell-focus-border-style
  • $grid-row-cell-focus-border-width
  • $grid-row-cell-focus-color

使用GapDebug来调试Sencha开发的混合应用程序

许多Sencha开发者每天都使用Cordova或者PhoneGap来部署自己的混合应用程序。但是直接在设备上调试一个HTML5应用程序是一件非常痛苦的事情。GapDebug的出现使这一过程变得更加容易,所有的应用程序和设备都使用统一的接口,而无需开发人员添加特殊的代码。


Ext JS 5的声明式事件监听机制

在前文《在Ext JS 5中使用ViewControllers》中,简单的介绍了Ext JS 5的一项重要改进——声明式事件监听。在本文,将深度探讨如何使用声明式事件监听啦简化应用程序的视图并减少自定义组件的样板代码。

注意:文章假设你使用的是Ext JS 5.0.1或更高版本。

什么是声明式事件监听?


所谓的“声明式事件监听”,就是指定义在类主体中的监听或在实例的配置对象中使用了listeners配置项。以这种方式来声明事件监听不是Ext JS 5的新功能。在Ext JS 4,可以正在类中声明事件监听,不过只适于处理函数或作用域已定义的情况,例如:

Ext JS最新技巧

Greg Barry:新的框架、 新的文档类型(Doctype)


在Ext JS 5,只支持IE8+,因此不再古力用户使用严格的HTML文档类型。现在,推荐使用HTML 5的文档类型,而且还推荐使用X-UA-Compatible作为meta标记以确保IE不会激活“兼容模式”,因为该模式不支持Ext JS。

以下代码片段展示了用于Ext JS 5的理想的文档类型和HEAD:

Ext JS 5.0.1中的新功能

今天,我们很高兴的宣布Ext JS 5.0.1发布了!此维护版本基于Sencha社区的反馈做了一些改进。

下面让我们来了解一下这些改变。

可访问性


与Ext JS 4.2.2一起,我们发布了“ext-aria”包来为可访问性提供了改进的支持(如WAI-ARIA 1.0标准中所描述的)。对于提供工具来让提高应用程序的可访问性来说,这是很重要的一步,我们还从测试合作伙伴和早期采用者的反馈意见中学到了一些东西。

随着Ext JS 5的发布,我们希望能综合反馈意见并提供一个更好的解决方案。我可以很高兴的宣布,对于Ext JS 5.0.1,对于可访问性的支持已经改进了许多。很大程度上,这是因为我们已经将焦点和键盘导航的支持从“ext-aria”移动到了框架本身。

动态加载 ExtJS 类库

ExtJS 是一个非常优秀的 JS 框架, 由于 ExtJS 自身非常庞大, 用于开发测试的 ext-all-debug.js 文件达到了 3.24M , 如果是再加载带注释的 ext-all-debug-w-comments.js 则更是达到了 6M , 可以说是非常庞大了, 因此动态加载 ExtJS 是很有必要的, 接下来就介绍如何对 ExtJS 做动态加载。

蔡世友ExtJs视频教程

视频目录:

  • RIAExt富客户技术详细目录.rar 5.2KB
  • javascript面向对象编程(PPT).rar 6.2MB
  • javascript加强(PPT).rar 6.1MB
  • javascript基础(PPT).rar 6MB
  • ExtJS快速入门指南(pdf).rar 709.8KB
  • Ext

Ext JS 5的平板支持

Ext JS已被公认为桌面Web应用程序的领先框架。自从平板开始在全球挑战PC的销售,无论是个人还是企业,电脑横向的应用已经产生急剧的变化。Sencha意识到了这种变化,并推出了包含新功能和进行优化了的Ext JS 5。

Ext JS从Sencha Touch 2学到了一些新把戏。多年最好的移动Web应用程序框架经验的沉淀要应对现代平板电脑上的桌面显示,那是卓卓有余的。通过类系统、事件管理、窗口小部件和新的部署选项就可以了解到这些更新。


在Sencha Touch中创建离线/在线代理

概述


在Sencha Touch中,一个常见的需求就是,当设备在没有连接互联网的时候,应用程序必须能够继续工作。Sencha Cmd为实现应用程序离线工作提供了一切所需的工具,如自动生成应用程序清单文件,不过,这其中最大问题是如何处理数据。有许多方式可以用来处理数据,而一个常用的技术就是在本地存储代理和AJAX代理之间实现切换。

在本文,ProWeb软件公司的Tom Cooksey将展示如何使用一个代理来实现类似的效果,而且该代理的存储配置对于使用它的程序员来说是完全透明的。

一步一步创建Sencha Architect Files(aux)

一点小牢骚:最近在做一个项目,经过寻寻觅觅发现Extjs 4.2挺符合要求的,那就它了。上了手了才发现上了贼船了,中文的开发资料巨少。上Sencha的英文官网,速度慢不说,查找一些资料也不是特别方便,谁让咱们上学的时候没有学好英文呢:(,英语老师我对不起您们啊啊啊!!。带着4,5个兄弟开发,中间发现数值控件Number Field,居然不支持千位分割符(,),太不地道了,在官网论坛上一顿查找,发现一个叫Greivin Britton的巴拿马雷锋,居然已经解决这个问题了。欢天喜地的下下来,咦,不打成包做成组件没有办法在Architect 3.0里面使用,而且多人开发,咋让兄弟们的Architect里面也用上啊,必须给整,说弄就弄了,参考各路天书资料,弄了几天都快崩溃了,老是这个不行,那个不行的,一直捅咕了3,4天才搞定,回头一看,我要骂娘了啊,啥狗屁资料啊啊啊!!!!破天荒第一次万年潜水员,准备冒个泡,给大家整个资料,帮助自己和大家梳理一下这个制作流程,希望对大家平常的开发有所帮助。


在Ext JS和Sencha Touch中创建自定义布局

布局系统是Sencha框架中最强大和最独特的一部分。布局会处理应用程序中每个组件的大小和位置,因而,不需要手动去管理那些碎片。Ext JS与Sencha Touch的布局类有许多相似之处,最近在 Ivan Jouikov的这篇博文中对他们进行了详细的分析。

虽然是这样,但很多Ext JS和Sencha Touch开发人员可能永远都不会去了解布局系统的机制原理。Sencha框架已经提供了最常用的应用程序布局,因此很少出现应用程序需要额外功能的需求,因而不大会有人愿意去了解布局系统的内部运作。

试想一下,你的公司需要在应用程序中使用3D Carousel来显示界面元素,但没有任何标准的Sencha布局可以提供这种能力,哪怎么来解决这个问题呢?

使用Ext JS设计响应式应用程序

在当今这个时代,用户都希望Web应用程序无论在形状还是大小上,既能在桌面电脑,也能在移动设备上使用。使应用程序能适应不同的需求渐成趋势。幸运的是,Ext JS 5提供了所有支持应用程序以符合任何屏幕尺寸、形状和方向的工具。

在Ext JS 5应用程序中如何使用路由

简介

Ext JS 5是一个重要的发布版本,它提供了许多新特性来创建丰富的、企业级的Web应用程序。MVVM和双向数据绑定为开发人员承担了大量的繁重工作。在Ext JS 5种,另一个新特性就是路由,它可以在控制器内轻松的管理历史记录。前进和后退按钮是每个浏览器都会拥有的公共用户接口,现在,使用Ext JS 5在单页面应用程序中处理导航变得相当简单了。

Ext JS 4 - Ajax和Rest代理处理服务器端异常和消息的方法

可能要处理的情况:
success(成功)——Ext处理
failure(失败),由于通讯问题——Ext处理
failure(失败),由于服务器端异常——开发人员人员必须处理的响应失败……

Ext JS - 高效的编码风格指南

1,切勿使用“new”关键字:在Ext JS中,使用“new”关键字来创建一个组件或类的实例是一种错误的做法,因为这没有遵循组件的生命周期。应该使用Ext.create方法来创建对象,例如:

错误: var obj = new Ext.panel.Panel();

正确: var obj = Ext.create(‘Ext.panel.Panel’);