jQuery MiniUI,快速开发WebUI界面

中文教程

Sencha Test 2.2正式版发布

我们代表整个SenchaTeam,很兴奋地宣布了Sencha Test 2.2的发布。通过超过200+的增强和补丁,Sencha Test 2.2为ExtJS应用程序的单元和端到端测试提供了一些惊人的新功能,包括强大的新代码树视图、高级组件定位器、改进的页面对象等等。

我们还很高兴与大家分享这个版本,Sencha Test现在已经不仅仅是测试Ext JS应用程序了;您现在有了一个使用ExtReact组件的Reaction应用程序的全面测试解决方案,以及增强了Web应用程序端到端测试的能力,包括那些使用Reaction和RIAR框架构建的应用程序。


Password控件 显示密码切换

现在的密码越来越复杂,为了保证输入正确,很多地方需要显示用户输入的密码来核对

效果如图:

ExtJS 6.2.1 Classic Grid 滚动条bug解决方案

如果列表同时存在横向滚动条和竖向滚动条,当竖向滚动条滚动到底部时
点击横向滚动条,滚动条会自动滚动到顶部

此bug未在其他版本发现,参考高版本代码重写类解决此bug,直接上代码:

GridDate 快速选择日期控件

效果如图,亲测6.2.1版本可用


ExtJS 6 如何引入Dashboard模版

最近很多人问我在ext js 6+的版本中怎么引入官方的dashboard模版,正好我好久没写博客了,这里我写一篇博客来说明一下。

在这里以ext js 6.2.1版本为例(注:需要安装Sencha Cmd,以及下载对应的sdk)

再探 ExtJS 6 变化篇

从Sencha Touch 2.4.2升级到ExtJS 6,cmd版本升级到6.0之后发生了很多变化

首先从cmd说起,cmd 6 中sencha app build package不能使用了,sencha app build native好像也不能用了。

有个好消息就是我们可以用

sencha ant native build
sencha ant package build

这两个命令,目测和以前的效果差不多了

然后再说说ExtJS 6相对Sencha Touch 2.4.2的变化

首先最只管的就是在网页上滚动条变了,如图

初探 ExtJS 6

Sencha Touch 现在已全面升级至ExtJs 6,那么我们如何使用他们呢?

首先去官网下载最新的sdk和帮助文档

sdk下载地址:https://www.sencha.com/products/extjs/evaluate/
ExtJS 6.2正式版下载:http://extjs.org.cn/node/793

如图,这个是试用版下载地址,试用版和正版的区别大概就是试用版有试用标记水印吧,大概是吧。

表单字段自动从本地化类获取标签文本

在《Ext JS 6.2实战》一书中,定义了用于实现应用程序本地化的I18N类,而在定义表单字段时,是直接使用I18N来引用表单字段的标签文本的,当表单字段比较多,项目的表单也比较多的时候,老是这样引用,也挺麻烦的,因而,最好的方式是让字段自己根据name配置项定义的名称去I18N取标签文本。本文要做的就是要实现这个。

要实现自动获取标签文本,需要解决的问题主要是以下两个:

  • 怎么修改才能涵盖所有的字段,不需要修改每一个字段的定义
  • 如何获取标签文本

ExtJS 6.2 基础使用

一、 安装:


下载两个压缩包:分别是

ext-6.2.0-gpl(这个是ExtJS 的SDK文件,创建新项目的时候需要用)。

SenchaCmd-6.5.2-windows-64bit (这个下载下来是解压,或者不解压。反正最后看到的是一个.exe 结尾的安装文件 ,直接安装运行即可PS:一定要记住安装到哪个文件夹下面了)

ExtJS从头开始(第2部分)

欢迎来到ExtJS从头开始博客系列之二。在第一篇博客中,已经从零开始创建了一个应用程序看起来像什么且希望它做什么的的可工作的应用程序,现在,从HTML和CSS角度来审视一下它是如何构建的。


Java基于Struts2框架+ExtJS处理JSON数据的方法代码

最近尝试用extjs来展示树状菜单。着实花了一番功夫。树状菜单的菜单项需要动态加载,而目前版本的extjs中只支持JSON格式的数据。查了一些资 料,决定使用struts2的json-plugin。首先按照例子做了一个,但是结果就是不成功,界面上只出来了一个js中生成的root节点,不能加 载从后台生成的数据。研究后发现是数据格式有问题。

使用Cordova将ExtJS 6.2的Modern应用程序打包为安卓APP

近期使用Ext JS 6.2的Modern工具包写了一个应用程序,本意是作为一个移动应用程序,在移动端通过浏览器来访问的。但后来有个需求需要将应用程序打包为APP来实现,于是就尝试着使用cordova来实现打包。经过一番折腾,居然成功了,最终效果令人满意。为了做个笔记,特意写了此文,方便自己,也方便大家。

这个应用程序是使用单工具包形式创建的,不是通用应用程序,因而可避免一些麻烦,如果是使用通用应用程序的,步骤和方法可能会有些不同,这个要注意。

当笔者接到要打包的需求后,第一时间做的就是到官网的文档中查看相关的文档:Integrating With Cordova or PhoneGap。根据文档的内容,貌似挺简单的。

ExtJS从头开始(第1部分)

欢迎来到新的博客系列“ExtJS从头开始”的第一部分。为什么要写这个系列?嗯,在不断收到客户有关ExtJS学习曲线的反馈后,发现他们在学习ExtJS时所面临的挑战之一是缺乏基础知识,或者是没了解过ExtJS是如何运作的,他们只是学习了一种模式之后就开始了。

在本系列中,将解释清楚ExtJS是如何以及为什么是这样运作的,而这,将通过一些简单的例子来说明。在这一系列文章中,将建立一个功能齐全的ExtJS应用程序,也就是所谓的“从头开始”。


ExtJS 6:将日期下拉字段修改为日期时间下拉字段(三)

完成了日期时间选择字段,要实现日期时间下拉字段就很简单了,这个只需要修改日期下拉字段的createPicker方法,将选取器换成日期时间选择字段就行了,具体代码如下:

ExtJS 6:将日期字段修改为日期时间字段(二)

在上文《ExtJS 6:将日期字段修改为日期时间字段(一) 》(以下称文一)只是简单的利用日期选择字段的源代码创建了一个日期时间选择字段,而不是采用继承的方式,因而在本地化上,并不能很好的利用日期选择字段的本地化资源,需要自己考虑本地化的问题。为了解决这个问题,最好的方式当然是采用继承的方法来实现日期时间选择字段了。而本文就是用来讲述如何通过继承来实现这个的。

ExtJS 6:将日期字段修改为日期时间字段(一)

都快一年没写过博客了,主要原因是各种忙,项目要忙,写书要忙,总之就是忙。忙有忙的好啊,忙意味着经验值又涨了,但离升级到下一等级估计还需要很长时间。在项目中的一些开发经验,已经总结到已经交稿的《Ext JS 6.2 实战》中,希望对大家有所帮助。由于一本书内容有限,因而有些东西还是得写写博客和大家交流。
在Ext JS 4时代,很少考虑自己去改扩展之类的,因为在官方论坛一搜基本都有了。但随着Ext JS越来越商业化,这方面的东西越来越少了,很多时候只能自己动手了,今天要讲的日期时间字段就是这样,在Ext JS 4时代,一搜有好多,但Ext JS 6的没几个。还好,这么多年的使用经验在身,给点耐心,还是做出来了。
要将日期字段(Ext.form.field.Date.html)修改为日期时间字段,关键的问题是如何将输入时间的INPUT元素插入到日期字段中。在最初的预想中,是直接将数字字段(Ext.form.field.Number)的HTML代码直接嵌入日期选择器(Ext.picker.Date)的模版中,经过试验,该方法是可行的,但要做的工作非常多,如为小时、分钟和秒的上、下按钮定义事件等等。
在准备实现这是功能的时候,发现了以下很有趣的代码:

阻止用户快速频繁点击,导致多次触发点击事件

一、前言

以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。

  • window对象的resize、scroll事件
  • 拖拽时的mousemove事件
  • 射击游戏中的mousedown、keydown事件
  • 文字输入、自动完成的keyup事件

实际上对于window的resize事件,实际需求大多为停止改变大小n毫秒后执行后续处理;而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法。

函数去抖(debounce)

如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。

也就是说当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。

函数节流(throttle)

如果将水龙头拧紧直到水是以水滴的形式流出,那你会发现每隔一段时间,就会有一滴水流出。

也就是会说预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。

[Sencha] 破解 VS Code 的 Sencha 插件

用ExtJS开发企业级应用真的是非常方便,Visual Studio Code 搭配 Sencha Plugin 插件简直不要太好用。不过Sencha Plugin是收费的,可以用邮箱激活30天试用期。
因为VS Code基于NodeJS,其插件也是NodeJS写的,所以破解不难。


Sencha Test 测试新建应用程序

Sencha Studio 允许开发人员快速和自动测试一个应用程序或 web 页面的细微粒度方面。随着代码库的增长,单元 测试可以确保应用程序的所有部分按照你的预期运行。

本指南, 我们学习生成一个新的应用程序,并设置测试环境, 创建一个可测试的类, 并对它进行单元测试. 所有这些工作都可以在 Sencha Studio 中完成.

如果你有一个已存在的应用程序, 请看 测试已有应用程序.

本文假定你已经对 Jasmine 测试框架比较熟悉. 如果你不熟悉 Jasmine 或 测试的概念, 请查阅他们优秀的 文档,来获取更多关于编写 Jasmine 测试的信息. 本指南也使用了 Sencha Cmd 来生成 一个 Ext JS 应用程序,并假定你已经下载安装它了.

让我们开始吧!

Sencha Test 测试已有应用程序

Sencha Test 可以用来测试你现有的 web 应用程序,只需要很少的安装配置. 本指南会教你如何配置一个Sencha Test Workspace,来测试一个远程服务器上的已有应用程序. 当然, 因为应用程序也很容易运行在本地 web 服务器, 所以,不管你是开发者还是测试工程师,本指南都会带你入门测试应用程序.

创建 Workspace


你可以点击欢迎界面右下的 “New Workspace” 按钮来创建一个新的 workspace.