ExtJS2.0快速入门(二)

ExtJS2.0快速入门(二) 使用Widgets

 (Widget原意为“小器件”,现指页面中UI控件)

除了我们已经讨论过的核心JavaScript库,当前的Ext亦包括了一系列的最前端的JavaScirptUI组件库。文本以一些常用的widget为例子,作简单的介绍。

ExtJS2.0快速入门(二) MessageBox

比起略为沉闷的“HelloWolrd”消息窗口,我们做少许变化,前面我们写的代码是,单击某个段落便会高亮显示,现在是单击段落,在消息窗口中显示段落内容出来。
在上面的paragraphClicked的function中,将这行代码:


Ext.;

替换为:


;

这里有些新的概念需要讨论一下。在第一行中我们创建了一个局部变量(Local Variable)来保存某个元素的引用,即被单击的那个DOM节点(本例中,DOM节点指的是段落paragrah,事因我们已经定义该事件与

标签发生关联的了)。为什么要这样做呢?嗯...观察上面的代码,我们需要引用同一元素来高亮显示,在MessageBox中也是引用同一元素作为参数使用。
一般来说,多次重复使用同一值(Value)或对象,是一个不好的方式,所以,作为一个具备良好OO思维的开发者,应该是将其分配到一个局部变量中,反复使用这变量!

现在,为了我们接下来阐述新概念的演示,请观察MessageBox的调用。乍一看,这像一连串的参数传入到方法中,但仔细看,这是一个非常特别的语法。实际上,传入到MessageBox.show的只有一个参数:一个Object literal(对象字面化),包含一组属性和属性值。在Javascript中,对象字面化是动态的,你可在任何时候用{和}创建一个典型的对象(object)。其中的字符由一系列的name/value组成的属性,属性的格式是[property name]:[property value]。在整个Ext中,你将会经常遇到这种语法,因此你应该马上消化并吸收这个知识点!
使用对象字面化Object Literal的原因是什么呢?主要的原因是“灵活性、可伸缩性(flexibility)”的考虑",随时可新增、删除属性,亦可不管顺序地插入。而方法不需要改变。这也是多个参数的情况下,为最终开发者带来不少的方便(本例中的MessageBox.show())。例如,我们说这儿的foo.action方法,有四个参数,而只有一个是你必须传入的。本例中,你想像中的代码可能会是这样的foo.action(null, null, null, 'hello').,若果那方法用Object Literal来写,却是这样, foo.action({ param4: 'hello' }),这更易用和易读。

ExtJS2.0快速入门(二) Grid

Grid是Ext中人们最想先睹为快的和最为流行Widgets之一。好,让我们看看怎么轻松地创建一个Grid并运行。用下列代码替换ExtStart.js中全部语句:


Ext.;

这看上去很复杂,但实际上加起来,只有四行代码(不包含测试数据的代码)。

  • 第一行创建数组并作为数据源。实际案例中,你很可能从数据库、或者WebService那里得到动态的数据。
  • 接着,我们创建并加载data store, data store将会告诉Ext的底层库接手处理和格式化这些数据。不同的数据类型须在类Reader中指明。
  • 接着,我们创建一个Grid的组件,传入各种的配置值,有:
    • 新的data store, 配置好测试数据和reader
    • 列模型column model定义了 列columns的配置
    • 其他的选择指定了Grid所需的功能
  • 最后,通过SelectionModel告诉Grid高亮显示第一行。

不是太困难吧?如果一切顺利,完成之后你会看到像这样的:

Image:IntroToExt2_grid.gif

当然,你现在还未掌握这段代码的某些细节,但先不要紧,这个例子的目的是告诉你,只要学习了少量的几行代码,创建一个富界面的多功能的UI组件是可能的。更多的grid细节读者可作为一种练习去学习。这儿有许多学习Grid的资源,Ext Grid教程、Grid交互演示交和Grid API文档。

ExtJS2.0快速入门(二) 还有更多的..

这只是其中一部分。还有一打的UI Widgets可以供调用,如 layouts, tabs, menus, toolbars, dialogs, tree view等等。请探索 范例演示。

你可能感兴趣的:(ExtJS2.0快速入门(二))