中文教程

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

Posted 周五, 06/09/2017 - 18:04 by admin

一、前言

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

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

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

函数去抖(debounce)

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

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

函数节流(throttle)

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

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

[Sencha] 破解 VS Code 的 Sencha 插件

Posted 周二, 05/23/2017 - 22:00 by admin

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


Sencha Test 测试新建应用程序

Posted 周二, 02/21/2017 - 18:29 by admin

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

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

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

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

让我们开始吧!

Sencha Test 测试已有应用程序

Posted 周二, 02/21/2017 - 17:59 by admin

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

创建 Workspace


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


Sencha Test 入门

Posted 周四, 02/16/2017 - 17:47 by admin

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

Sencha Studio


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

Sencha Test 安装和配置

Posted 周四, 02/16/2017 - 17:45 by admin

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

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

支持的平台


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

Sencha Test 概述

Posted 周四, 02/16/2017 - 17:28 by admin

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部分

Posted 周二, 02/07/2017 - 16:36 by admin

介绍


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

Sencha Test 使用示例第1部分

Posted 周二, 02/07/2017 - 16:10 by admin

介绍


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

Sencha ExtJs 6 & LKWebTemplate 介绍

Posted 周日, 01/22/2017 - 18:15 by admin

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

  • 要发表评论，请先登录

ExtJS入门简介视频(英文)

Posted 周日, 01/22/2017 - 18:12 by admin

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

  • 要发表评论，请先登录

ExtJS 4.1视频教程下载

Posted 周五, 01/20/2017 - 17:37 by admin

第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 应用程序框架搭建

Posted 周三, 01/04/2017 - 17:45 by admin

前言


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

文件结构


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

ExtJS 4后台保存Chart图片

Posted 周三, 01/04/2017 - 17:31 by admin

前言


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

ExtJS 4浏览器兼容

Posted 周三, 01/04/2017 - 16:58 by admin

前言


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

ExtJS 4 带星期的日期选择控件

Posted 周三, 01/04/2017 - 16:54 by admin

前言


ExtJS 3 和 ExtJS 4中都有提供日期选择的组件(当然早期版本也有)。
但是有一些日期选择的需求是要看到星期，就是日期中的哪一天是这一年的第几周。
遗憾的是ExtJS 并没有提供这样的配置。

ExtJS 4 拖放[drag and drop]

Posted 周三, 01/04/2017 - 16:26 by admin

定义拖放


一个拖动操作，就是在某个页面元素上按下鼠标并移动。一个放下操作，就是在拖动动作之后放开鼠标。可以从下图来看：

Ext JS 的Ext.dd 类中定义了基本的拖放操作。

ExtJS 3升级到ExtJS 4

Posted 周二, 01/03/2017 - 18:40 by admin

前言


若干年前，使用ExtJS 3 开发了一个系统。
随着ExtJS 4的出现，总是会看到或听到关于Ext 比较多的言论是 ：
ExtJS 4 较Ex JS 3 有较大的改变。
ExtJS 4不向下兼容。
ExtJS 4 开始收费了。
基于这些，对ExtJS 4一直就望而却步。

ExtJS 4 升级指南

Posted 周二, 01/03/2017 - 18:10 by admin

前言


Ext 4 在web 应用程序开发迈出了革命性的一步。 基本上框架的每个主要组件都做了改善，在Ext3的基础上，新增了不少新的组件和子系统。本篇介绍Ext 3 到 Ext 4 的主要变化。

Ext3 兼容性
Ext 提供了Ext 3 和 Ext 4 的迁移包。

ExtJS面向对象

Posted 周五, 10/21/2016 - 18:32 by admin

序言

  1. ExtJs是一套很好的后台框架。现在很流行的，我们要会。
  2. 这是我写ExtJs的第一篇，以后会写很多直到把这框架运用的炉火纯青，走火入魔。

ExtJs中的命名空间

我是做.net的，这命名空间名字一样，功能也一样，都是对项目中类进行有效的管理，区分类的作用域。他们的层次结构都是使用“.”来划分的。只不过定义的时候不一样。Ext是通过namespace（）方法来定义的。（这里我先不展示，例子中我会用到的）