jQuery MiniUI,快速开发WebUI界面

中文教程

ExtJS 4应用架构设计

应用的可扩展性、可维护性和灵活性取决于应用架构的质量。不幸的是,这往往被视为马后炮。概念设计和原型变成了大规模的应用,许多应用的基础基本就是示例代码的复制与粘贴,这很诱人,因为这可以让你在项目在开始阶段有一个快速的进度。 然而,节省下来的时间相对于项目后期的维护、扩展甚至重构应用的时间来说,算不得什么。比较好的的方式是写一个可靠的架构,在实施前编写好遵循的约定和定义应用的视图、模型、存储和控制器等。在这篇文章,我们将会看到一个受欢迎的应用并讨论如何构建用户接口,从而创建可靠的架构

新的ExtJS发布4.02版和3.4版,提高性能并支持IE9

今天,我们的旗舰产品,Javascript框架ExtJS,同时发布了3.4和4.0.2两个版本,其中,3.4版本现在已经支持IE 9,而4.0.2版则进一步提供了性能和修复了错误,以及增加了一些功能。

Download Ext JS 4.0.2 View Examples View Release Notes

Download Ext JS 3.4.0 View Examples View Release Notes
ExtJS 4.0.2——灰色主题、性能调整、超过200个功能增强和错误修复 ExtJS 4.0.2包括3个主要的议题:性能优化、错误修复和灰色主题。流行的灰色主题已经从ExtJS3.x中回归了,在SDK和主题查看器的示例中已经使用了该主题,该主题已经打磨成4.0.2的主题,已经可以在所有组件上工作了。

是什么让你的ExtJS应用程序运行缓慢?

本文说的“缓慢”,是只运行时 的缓慢,而不是只加载资源的时间。

在过去的一年半以来,我一直与Robert Bosch在Bosch软件创新公司工作,在那里我们的前端技术堆栈非常依赖ExtJS。我有机会开发Visual Rules Web Modeler机器协助开发其它几个基于ExtJS的应用,因此,我积累了不少与ExtJS应用常见的性能问题有关的经验。

在这篇文章中,我将与你们分享导致ExtJS应用运行缓慢的瓶颈问题,并指出ExtJS开发者最容易犯的错误。

本文提及的ExtJS是指版本3.3.x及以下版本的ExtJS。

使用sencha touch开发新浪微博iphone界面

相信不少sencha touch的粉丝们都为Javascript能开发出手机Web App应用而感到兴奋。虽然Sencha Touch提供相当多的原生UI组件,但是利用原生UI开发出来的Web App的UI未必能完全满足手机上的UI设计。

本文将以iphone版本的新浪微博的“更多”界面,介绍如何利用Sencha Touch设计“更多”的界面。

本次示例将以iphone界面作为参考,使用Sencha Touch开发设计模仿iphone界面。

首先,将以iphone下述的界面目标作为参考:

Ext 4概述

Ext 4有志诚成为Web程序其革命性的开发平台。框架中的每一个首要的组件几乎都作了改善,而且属于相当大幅度的改善。对于Ext3来说——4.0许多组件以及子系统都是表现得焕然一新!本指南会向您提供有关Ext3到Ext4期间变化所呈现的一方面。

Sencha touch 开发指南

本文主要介绍如何使用Sencha Touch为手持设备进行应用开发,主要是针对iPhone这样的高端手机,我们会通过一个详细的例子来介绍整个开发的流程。

Sencha Touch简介

Sencha Touch是专门为移动设备开发应用的Javascrt框架。通过Sencha Touch你可以创建非常像native app的web app,用户界面组件和数据管理全部基于HTML5和CSS3的web标准,全面兼容Android和Apple iOS。

Sencha的MVC模式实践

Sencha Touch中,Application对象表示整个Sencha的应用程序。对于大多数程序而言,它至少包括有应用程序的名称和一个启动函数.

Sencha Touch 入手

触控技术(touch-interface)可以带用户带来全新的体验。硬件层面仍属于输入设备(input device),也就是说,对于终端而言,究竟是键盘、触控还是鼠标,反正都是输入形式的一种,而输出方式一般是屏幕。不同的输入方式给用户带来的体验绝对是不同的。在手机上的用户体验攸关,因为在巴掌大块上面构建合理的布局输入方式的确需要花点心思。就像当红小生Apple的iPhone,它便很成功。看上去,iPhone除了削平的镜面外,无非只有一个按钮。

五步掌握Ext的拖放(下)

第三步:设置置下目标明确需求是怎么样的:除了 rentedrepair可接纳拖动元素,cars和trucks本身也是可以的。总之是使用 DDTarget来负责放下的目标。代码如下:

五步掌握Ext的拖放(上)

那么多的交互设计模式中,“拖放(Drag and Drop)”模式是开发者感觉比较不错的。用户日常在进行拖放操作的时候,真的是想都不用想地就可以轻松搞掂了,易学易用,非常直观。下文中,不是我们断言,只要将下面五个步骤的要义领会在心,拖放不再是一间难事。
定义拖放拖动(drag)的动作,就是鼠标的点击动作发生了,点击在某些UI元素身上,就可以按着不放,同时也可以移动着鼠标;放下(drop)的动作,就是在拖动动作开始后,但鼠标按钮松开了——就是放下的动作。

使用with简化你的Javascript代码

with语句用于位一组语句建立缺省的对象。
适用以下场合:
1,在一段代码中使用一个类的N个方法.
2,在一段代码中使用一个命名空间下的N个类.with
为一组语句创建缺省的对象。在这一组语句中,任何不指定对象的属性引用都将被认为是缺省对象的。
实现版本 Navigator 2.0, LiveWire 1.0

语法

with (object){
   statements
} 
参数
object 为语句指定要使用的缺省对象,两边必须有圆括号。
statements 任意语句块。

示例
下面的语句指定了 Math 对象作为缺省对象。在 with 语句里引用的 PI 属性、cos 和 sin 方法就没有指定对象,JavaScript 会假定这些引用都是针对 Math 对象的。

var a, x, y
var r=10
with (Math) {
   a = PI * r * r
   x = r * cos(PI)
   y = r * sin(PI/2)
} 
with还可以嵌套使用。

Javascript对象继承(复制继承法)

复制继承可以说是Javascript中我使用的最多的继承方法.
复制继承是如何实现的,我们一起来看看下面的例子:

Javascript对象继承(原型继承法)

原型继承可以说是Javascript提供的真正的继承方法,也是很多大牛推荐使用的方法,但我使用的最多的却不是这一个继承方法.
原型继承是如何实现的,我们一起来看看下面的例子:

Javascript对象的私有属性

大家都知道Javascript函数对象的所有属性都是公开的,是没有私有属性这一个概念的.但是,不要忘记了Javascript的两大特性(原型和闭包).说到这里,可能很多朋友已经知道怎么样实现私有属性了.没错,我们就是要通过Javascript的闭包来实现.

概念性的东西可能比较难理解,我们还是以实例来说明:

Javascript中两种最通用的定义类的方法

在Javascript中,一切都是对象,包括函数。在Javascript中并没有真正的类,不能像C#,PHP等语言中用 class xxx来定义。但Javascript中提供了一种折中的方案:把对象定义描述为对象的配方(先看一下例子会比较容易理解)。

定义类的方法有很多种,这里有两中较为通用的方法,大家参考一下。

这两种方法均可以解决 构造函数会重复生成函数,为每个对象都创建独立版本的函数的问题。

解决了重复初始化函数和函数共享的问题。

Javascript原型(Prototype)

什么是原型
Javascript对象中的原型属性可以返回对象类型的原型引用.
原型的作用
原型的定义可能这样讲未必理解得了,下面让我们来看一些例子:

Javascript闭包(Closure)

Closure中文翻译为闭包.字面上来理解就是"封闭的包".(这是一句废话)
闭包是什么?
书面解释为: 所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

应用闪光点:Zipwhip和ExtJs

在美国每个月都要发送接近一千万条短信,短信已明显成为许多人依赖的一个传播媒介。 Zipwhip ,一个使用ExtJs做用户界面的Web短信工具,目的是将短信提高到一个新水平。 在Zipwhip的小组渴望分享他们的热情和基于分机建立的办法。

教程:从源代码上建立你自己的Ext

有几种方案可制定Ext,制成裁减过的版本输出。而且这是至关重要的,为什么呢?

只需包含你所需的文件,减少部署时文件过大的开销。
你可缩小源码大小,也是部署时的重要一环。
如果你是技术支持用户 有一个可用的SVN访问,你可在开发阶段中创建一个中间临时的版本,用于测试、试用新功能和官方发布新版之间的bug调试。
你亦可利用一些自动化的工具,或直接整合到你惯用的自动化调用程序(如,通过Ant)。

教程:Grid组件的基本分页

读者应先下载本例涉及的示范代码。这里是一个有效的例子

Grid数据
Grid的分页必须依靠服务端(Server Side)来划分好每一页的数据才可以完成。