ExtJS组件技术分析

科|学|技|术ExtJS组件技术分析陶超(西南交通大学信息科学与技术学院 四川●成都611756)摘要互联网技术的飞速发展使得基于WEB的应用越来越普遍,大量云端应用层出不穷,网页内容复杂程度已不可同日而语。因此当开发人员开始厌倦采用传统的JSP作为前台技术进行WEB开发,而其他相应的前台技术如JSF等并不成熟时,以EXT为代表的HTML5开发框架出现了并迅速成为前端技术的主流。本文主要介绍了EXT4.x版本中的重要组件和数据交互技术。关键词Ext Grid 组件Chart 组件中图分类号:TP311.52文献标识码:A0引言对于一-个简单的Grid来说，确定了store 和ColumnModel在众多的AJAX框架中，最流行的莫过于EXT了，它不就基本可以正常工作了。如果要自定义它的样式，可以使用但提供了AJAX的基本功能，更重要的是它提供了大量封装它的config属性一-设置。好的Ul组件,在此基础上,开发人员可以很方便地使用这些接下来如果要添加一一个修改数据的功能,就需要借助ge-组件迅速开发出美观的WEB应用界面。本文将涉及EXT中tSelectionModel(方法了。 当我们点击选中了Grid 的某一行重要的组件Grid以及新奇的Chart组件等。或是某几行时,运行以下语句时:1 ExuJS简介var record = grid.getSelectionModel0.getSelection0;Ext是一一个Ajax框架,用于在客户端创建丰富多彩的web就会得到一个record类型的数组，使用record类型数组应用程序界面,是在Yahoo!UI的基础上发展而来的。官方网可以获取Grid行数据中的每一项,或是将选定行的数据加载址: www.sencha.com.到一个表单中以供修改。ExtJS可以用来开发RIA也即富客户端的AJAX应用，是2.2 Ext chart一个用javascript写的，主要用于创建前端用户界面，是- -个Ext的chart组件包含了对多种图表如柱状图、折线图、点与后台技术无关的前端ajax框架。因此，可以把ExuJS用在图、饼图、区域图、盘表图、雷达图等的封装,借助它开发人员Net、Java、 Php等各种开发语言开发的应用中。ExtJs 最开始可以迅速构建出美观整齐的统计图表。基于YUI技术，由开发人员JackSlocum开发,通过参考JavaS-先来看看图表的几大配置属性:wing等机制来组织可视化组件，无论从UI界面上CSS样式axes:用来配置坐标，可以配置多个坐标。type: 配置坐标的应用，到数据解析上的异常处理,都可算是一款不可多得的的类型。一 般用 到的是Numeric、Category. position: 配置坐JavaScript 客户端技术的精品。标的位置，比如上下左右。.Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件fields:可以配置多个字段,用来设置坐标显示的值。其实库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨这 个配置和series 中的yFiled配置项是没有关系的。series:浏览器方面的处理。相对来说，EXT要比开发者直接针对用来配置图表。DOM、W3C对象模型开发UI组件轻松。对于一个图表来说首先应先配置它的坐标轴,即axes属2 ExuS常用组件性。--般axes中含有两个坐标轴的配置信息。每条坐标轴都2.1 Ext Grid .要定义type属性，一般 是Numeric 和Category。Numeric 即从Ext2.0到Ext4.x版本,Grid组件的功能-.直在不断更数字类型,例如chart会根据Numeric类型的坐标值大小绘制新，性能也在不断提升,可见它在整个Ext框架中具有举足轻柱状图的条 柱高度。而Category类型的坐标轴可标示不同的重的地位。Grid 其实是对Table的一种封装， 并支持列排序，统计对象。接下来是坐标轴的位置position,有 上下左右等。自动滚动，自定义列宽度,配合toolbar 可实现数据分页。它能而 fields配置坐标轴对应的数据项, title可以设置各个坐标轴够支持多种数据类型，如二维数组、Json数据和XML数据,甚的名称标题。至包括我们自定义的数据类型。Ext 为我们提供了一个桥梁3总结Ext.data.Store, 通过它我们可以把任何格式的数据转化成Grid相比Ext 3.x版本，Ext 4.x版本提供了沙箱模式，动态加可以使用的形式，这样就不需要为每种数据格式写-一个Grid载等新技术,类系统也做了较大改动，从而给予了开发者更大的实现了。的发挥空间。但是也受到了众多社区关于性能低下的指责,首先，一个表格应该有列定义，即定义表头ColumnMo-对此Ext4.2做了更多性能方面的优化，使得框架本身更能适del,定义每个列的表头名和在store中对应的数据项。其次应应当前htm15的发展趋势。指定相应的store,即上述代码中的rolestore,其定义如下:定义一个store首先要确定其中的数据项名称及数据类参考 文献型等，即代码中的Model,再者设置数据获取方式,代码中使用[1] 郭峰.ExtJS中国煤化工出版社.2010.[2] 卫军,夏慧军[M1.北京:机械工业出的是ajax异步请求远程数据。版社,2011.YHCNMHG- -科教导刊(电子版) . 2013年第十一期(下)一