jQuery MiniUI,快速开发WebUI界面

中文教程

ExtJs4常用函数

1.Ext.onReady()

该方法的调用发生在Document对象加载完毕之后,HTML的onload事件以及image加载之前.

第一个参数为加载后该方法调用的函数,第三个参数如果为true则第二个参数将成为fn的执行范围,第三个参数如果没有传递,则默认为true.

此函数非常重要,所有的资源都必须加载完毕方可进行ETJS的函数调用.Ext的DOm等都是动态生成的,而onReady的调用方法在所有Document对象都加载完毕的时候,所以为了保障请求是安全的,应该保持所有的处理都在onReady中进行.

调用格式:

Ext.onReady(Function fn,Object scope,boolean override)

参数说明:

fn:执行的函数.

scope:fn执行的范围,为可选参数.

override:表示是否以scope作为fn默认的执行范围,为可选参数,默认值为true.

返回值:无.

ExtJs4中的复选树级联选择

这几天要把项目中的几个模块有ext3升级到ext4,还要保持页面展示和功能要跟3.x版本的一样。升级并不是一件简单的是,基本相当于重写了,3.x版本的复选框树级联操作是在网上找的一个现成的插件,直接搬运到4.2中就不能用了,但是又找不到可用的插件。百度谷歌了好久,还真让我搞出来一个方法,记录下来吧,也分享给大家。如有不合理或者更好的方法希望不吝赐教。

在3.x版本中要实现级联选择的话,我使用的是一个TreeCheckNodeUI.js这个文件百度一下都能找到啊,就不详细说明了,很好用。

在4.2中实现的方法是在treepanel的配置项viewConfig中添加函数onCheckboxChange,表示复选框选择状态发生变化是触发的事件,先把代码贴出来:

ExtJS 刷新后,默认选中上一次选中的节点

在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点。这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到这个节点上。

查询了好久终于找到一个可行的方案,就是通过节点的path来记录节点的位置信息,然后通过path从root节点开始逐层展开,直到最后一个节点。

完成的代码如下:

首先是extjs3.x版本中的方法:

Extjs MVC开发模式详解

在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成Model-View-Controller三层,为JS应用程序的如何组织代码指明了方向,同时使得大规模JS代码变得更加易于重用和维护;这就是Extjs MVC开发模式的初衷。

在官方给出的MVC例子中,我们可以看到一个简单的列表编辑功能,这篇文章就围绕这个功能进行详细的讲解,让我们一起来揭开Extjs MVC的神秘面纱!

本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用!

针对多种设备定制ExtJS 5应用程序

概述


鉴于当今设备和表单因素的扩散,要针对所有这些可能性来优化应用程序已经变得越来越复杂。虽然可以使用CSS响应这些环境条件,但典型的,如Ext JS应用程序这样,还是要包含大量的Javascript。在某些情况下,使用javascript来针对设备细节进行编码可能很简单,但也可能很快就会失控。好消息是,在Ext JS 5.1,提供了几个功能强大的工具来管理这种复杂性。

在先前的文章已经介绍了许多这样的技术。这有助于去了解与比较他们之间的异同,以便于选择适合的工具来完成手头的工作。

别再用JS框架了

现在,JavaScript框架已成为Web项目开发不可或缺的一部分。那是因为很长一段时间以来,各种浏览器之间有很大的差别,人们不得不编写框架对此进行屏蔽。问题在于,各种浏览器甚至在基本问题上都难以取得一致,以致框架还要针对浏览器该如何工作设计自己的模型,比如如何传播事件、如何与DOM交互等。于是出现了许多框架,常见的有jQuery、Dojo、MochiKit、Ext JS、AngularJS、Backbone 、Ember、React等。对于这种情况,谷歌工程师Joe Gregorio在博文中写道:

"我认为是时候重新考虑JS框架模型了。没有必要发明另外一种做事方式,只要使用HTML+CSS+JS就行了。"

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将展示如何使用一个代理来实现类似的效果,而且该代理的存储配置对于使用它的程序员来说是完全透明的。