jQuery MiniUI,Ajax Web开发

中文教程

使用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.


Sencha Test 入门

安装了 Sencha Test 之后, 下一步就是管理你的测试环境. 作为一个开发者或者测试工程师, 这些工作都在 Sencha Studio 上完成. 一旦你在 Sencha Studio 上创建并配置了你的测试环境, 你就可以使用 stc 命令行工具来自动执行测试. 本指南会介绍管理测试项目的核心概念,并展示如何开始使用 Sencha Studio.

Sencha Studio


启动 Sencha Studio 之后, 首先展示的是欢迎界面. 这是最顶层的界面,从这里可以打开或创建一个 workspace.

Sencha Test 安装和配置

Sencha Test 包含2个应用程序: Sencha Studio (GUI界面工具) 和 stc (命令行界面工具). 本文介绍安装流程,为开始测试做好准备! 可以阅读 Sencha Test 概述 获得更多产品信息.

开始之前, 我们先看一下支持的浏览器, 平台, 和 Sencha 框架. 然后再介绍安装流程.

支持的平台


操作系统
  • Windows (Win 7+)
  • Mac OS X
  • Linux 32-bit / 64-bit

Sencha Test 概述

Sencha Test 是 Sencha 平台的一个关键环节, 它可以帮助开发人员和测试工程师,使他们的应用程序的质量达到新的层次,加速测试工作的产出。Sencha Test 通过结合最好的开源测试库(如 Jasmine、WebDriver 和 Istanbul), 添加丢失的部分,然后把它们整合到一个全面的解决方案中。

产品组成


Sencha Test 由2个应用程序组成: Sencha Studio (用于GUI界面) 和 stc 或称为 "Sencha Test Command" (用于命令行界面). 2个应用程序都提供了执行测试的能力,不过 Sencha Studio 提供的是图形化的、可交互的测试执行器, 而 stc 提供的是一个可脚本编程的测试执行器,用在无人值守的 持续集成(Continuous Integration,CI) 系统中,比如 Jenkins 或 TeamCity. 这些应用程序还能合作提供强有力的测试结果归档和审查能力, 远超 CI 提供的 build 日志和线性视图。

Sencha Studio


Sencha Test 使用示例第2部分

介绍


Sencha Test 给开发者和测试工程师提供了一个完整的平台来为单页面应用程序执行功能测试. 测试可以在工程师本地机器上编写并执行,然后很简单地复制到持续集成(CI) 环境中.

Sencha Test 使用示例第1部分

介绍


Sencha Test 使得开发者可以编写并在他们的机器上执行测试,然后轻松地在自动化构建系统中进行自动化测试。学习如何编写单元测试最好的方式是看例子。

Sencha ExtJs 6 & LKWebTemplate 介绍

由台湾陈慧鸿老师讲的又一精品课程,值得仔细观看.

ExtJS入门简介视频(英文)

ExtJS入门简介视频,适合英文好的朋友观看!

ExtJS 4.1视频教程下载

第1讲.ExtJs初识及其环境搭建
第2讲.开始ExtJs梦想之旅
第3讲.ExtJS工具栏、菜单栏
第4讲.ExtJS最常用的表单之textfield控件
第5讲.ExtJs最常用表单组件Number、CheckBox、Radio
第6讲.ExtJs最常用表单组件ComboBox、time、date
第7讲.ExtJS面板Panel
第8讲.EXtJS布局模式-Auto布局、Fit

ExtJS 4 MVC 应用程序框架搭建

前言


大型客户端应用程序总是很难编写,很难组织和很难维护。随着功能的增加和更多的开发人员加入项目,对项目的控制也越来越困难了。Ext JS 4 提供了一个新的应用程序框架帮助组织代码。
模型 - 一组栏位和数据的集合。Model (在Ext JS 3中使用Record class)
视图 - 组件类型, grids,trees 和 panels 都是属于试图
控制器 -- 用来渲染试图,实例模型和其他的应用逻辑

文件结构


ExtJS4 遵循统一的目录结构。看一个例子:

ExtJS 4后台保存Chart图片

前言


对于ExtJS 来说,在 Ext.chart.Chart 这个类直接有提供一个 save( [config] ) 的方法, 调用这个方法, 就可以在browser 下载当前这个chart 的对应格式的图形文件。

ExtJS 4浏览器兼容

前言


按理说, Ext js 的开发应该没有浏览器兼容的问题,因为Ext js 本身就有考虑各浏览器兼容的状况。
本篇讨论的与其说是Ext js 开发的兼容性问题, 还不如说成是web 开发的兼容性问题。