ExtJS配置和表控制使用第1/2页

ExtJS是一个完整的RIA解决方案，由于功能齐全，ext-all.js有400多k，由于是基于JS和CSS实现的，对客户端机器的性能也有一定的要求，也就是不支持IE6以下的版本。如果你的项目对网页的响应时间有严格的限制，或者客户端操作系统太旧，那么一定不要选择ExtJS。本文主要介绍ExtJS的下载和配置以及一些简单的使用方法。目前最新的版本是3.0，但本文主要介绍2.2版本。1.ExtJS下载和配置1。下载地址：www.Extjs.com/(这是官网，可以选择你喜欢的版本下载)2。配置过程中，假设下载的目录是ext，我们在这个目录下设置了自己的目录MyExample(这个目录用来存储自己的代码)。配置过程如下：(1)新建页面文件Helloworld.html；(2)在head和/head之间添加如下代码：复制的代码如下： linkrel='样式表' type=' text/CSS' href='./resources/CSS/ext-all . CSS/'脚本类型=' text/JavaScript ' src=' http :/adapter/ext/ext-base . js '/script script type=' text/JavaScript ' src=' http :/Ext-all . js '/script script type=' text/JavaScript ' Ext . onready(function(){ Ext。MessageBox.alert('HelloWorld '，' Hello World ')；}) /script (3)注意脚本/script不能被/script替代(4)不要更改JS的导入顺序(3)如果弹出HelloWorld对话框，则表示配置成功。二、表格控件Grid的使用EXT中的表格功能非常强大，包括排序、缓存、拖动、隐藏一列、自动显示行号、汇总列、编辑单元格等功能。我们首先介绍如何制作一个简单的网格。1.创建表的列信息：复制代码如下： var cm=new ext . grid . column model([{ header : ' number '，dataindex:' id'}，{header:' name '，dataindex:' name'}，{header:' description ')。2.添加数据信息：复制代码如下：VARData=[['1 '，' Name1 '，' Desn1']，['2 '，' Name1 '，' Desn1']，['3 '，' Name1 '，' Desn1']，['4 '，3.创建数据存储对象：复制代码如下： VARDS=new ext . data . store({ proxy : newext . data . memoryproxy(data)，reader : newext . data . arrayreader({ }，[{name:' id'}，{ name : ' name })。ds . load()；//这个很重要。4.表的列模型已经定义，原始数据和数据的转换已经完成。剩下的只需要将它们组装在一起，我们的网格就会成功创建。复制代码如下： vargrid=new ext . grid . grid panel({ render to : ' grid '，store :ds，height 3360600，cm :cm })；5.注意：Ext.grid.Grid的renderTo属性表示Ext将在哪里呈现表，所以在HTML中应该有一个div id='grid'/div与之对应。

6、所有代码清单如下（已通过测试): 复制代码代码如下： %@页面语言=' c# ' AutoEventWireup=' true ' CodeFile=' Grid。aspx。cs ' Inherits=' Ext _ example _ Grid ' %！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head id=' head 1 ' runat=' server ' title grid/title link rel='样式表type='text/css' href='./resources/CSS/ext-all。资源/CSS/ext-all。CSS '/脚本类型=' text/JavaScript ' src=' http :/适配器/分机/分机基站。js ' src=' http :适配器/ext/ext-base。js '/script脚本类型=' text/JavaScript ' src=' http :/ext-all。js ' src=' http : ext-all。js /脚本脚本类型='text/javascript '！-分机。onready(function(){ var cm=new ext。网格。列模型([{ header : '编号，dataIndex:'id'}，header: '名称，dataIndex:'name'}，header: '描述，data index : ' desn ' }])；定义变量数据=[ ['1 '，' name1 '，' desn1']，['2 '，' name1 '，' desn1']，['3 '，' name1 '，' desn1']，['4 '，' name1 '，' desn1']，['5 '，' name1 '，' desn 1 ']；var ds=新ext。数据。商店({ proxy : new ext。数据。内存代理(数据)，阅读器：新分机。数据。arrayreader({ }，[ {name:'id'}，{name:'name'}，{ name : ' desn ' }])})；ds。load()；var grid=new ext。网格。网格面板({ renderto : ' grid '，store: ds，height:600，cm :cm })；});/////脚本/标题正文表单id=' form 1 ' runat=' server ' div id=' grid '/div/表单/正文/html实验效果图如图一所示

1.一个简单的网格3。表格控件Grid功能的详细说明。第二部分简要介绍如何创建一个简单的Grid。本章将详细分析网格的功能。3.1部分属性函数1。默认情况下，网格可以拖放列或更改列的宽度。如果要禁用这两个功能，可以在定义网格对象时分别将“启用列移动”和“启用列调整大小”设置为false。2.如果要显示斑马线效果，可以添加stripeRows:true 3。Grid还支持读取数据时的屏蔽和提示功能。设置属性loadMask:true，在store.load()完成之前，将始终显示“Loading .”。3.2独立确定每列的宽度。1.如果要定义宽度，只需设置列的宽度属性，如下面的代码所示。效果图如图2所示。复制的代码如下： VARCM=new ext . grid . column model([{ header : ' number '，dataindex:' id '，width:60}，{header:' name '，dataIndex:'name '，Width:180}，{header:' description '，数据索引： ' desn '，width :200 }]；

图2自定义每列的宽度2。这样，你需要自己计算每一列的宽度。如果你想让每一列自动填充网格，你只需要在视图配置中强制匹配。使用forceFit后，Grid会根据你设置的宽度按比例分布，以cm为单位，非常智能。实现代码如下：复制代码如下： vargrid=new ext . grid . grid panel({ render to : ' grid '，stripe rows 3360 true，//斑马线效果loadmask 3360 true，store3360ds，height:600，cm:cm，view config 3360 { forcefit 3360 true } })；3.我们也可以考虑autoExpandColumn，它可以自动扩展指定列的宽度，从而填充整个表。代码复制如下： vargrid=new ext . grid . grid panel({ render to : ' grid '，stripe rows : true，//斑马线效果loadMask:true，store: ds，height:600，cm:cm，autoexpandcolumn 3360 ' desn '//viewpconfig : {//forcefit : true/})；注意：autoExpandColumn只能指定一列的id。注意，必须是id。原来我们设置的cm里面没有id。现在，为了使用AutoExpandcolumn，我们需要为cm的desn设置id。因此，desn可以在渲染过程中自动扩展，否则会出现错误。复制的代码如下： VARCM=new ext . grid . column model([{ header : ' number '，dataindex:' id '，width:60}，{header:' name '，dataIndex:'name '，Width :180}，{id :' desn '，index :' desn '，数据索引： ' desn '，width :200}。3.3让网格支持按列排序。在EXT中，排序功能很容易实现，只需在定义列模型时添加可排序属性即可，如下代码所示：复制的代码如下： varcm=new EXT . grid . column model([{ header : ' no '、Dataindex:' id '、width:60、sortable: true}、{header:' name '、dataindex:' name '、width:180 })渲染如图3所示。

图3按列排序效果3.4 显示时间类型数据尽管返回的数据里都是数字和字符串，但是在外面的(外部的简写)中我们同样可以从后台取得日期类型的数据，然后交给格子进行格式化。 1、首先定义一组数据，其中最后一列是日期格式的数据。复制代码代码如下： var数据=[ ['1 '，' name1 '，' desn1 '，' 2009-09-17t 02:58336004 ']，['2 '，' name2 '，' desn1 '，' 2009-09-17t 02336058336004 ']，['3 '，' name3 '，' desn1 '，' 2009-09-17T02:58:04 '2 '，接着我们在读者里面增加一行配置，除了设置名字以外，还设置了类型和日期格式两个属性。代码如下：复制代码代码如下： var商店1=新分机。数据。商店({ proxy : new ext。数据。memoryproxy(数据)，阅读器：新分机。数据。arrayreader({ }，[ {name:'id'}，{name:'name'}，{name:'desn'}，{name:'date '，type:'date '，日期格式： ' Y-m-DTH 3333330 '3，同样的，我们还需要在厘米里面增加一行配置：复制代码代码如下： var cm=新Ext。网格。列模型([{ header : '编号，数据索引：“id”，宽度：60,可排序：路径，{header: '名称，dataIndex:'name '，width:180}，{id:'desn '，header: '描述，dataIndex:'desn '，width:200}，{header: '时间，dataIndex:'date '，type:'date '，render : ext。乌提尔。格式。日期渲染器(' Y年m月d日')} ]);4、代码详细信息如下所示，效果图如图四所示。复制代码代码如下： html xmlns=' http://www。w3。org/1999/XHTML ' head id=' head 1 ' runat=' server ' title grid/title link rel='样式表type='text/css' href='./resources/CSS/ext-all。资源/CSS/ext-all。CSS '/脚本类型=' text/JavaScript ' src=' http :/适配器/分机/分机基站。js ' src=' http :适配器/ext/ext-base。js '/script脚本类型=' text/JavaScript ' src=' http :/ext-all。js ' src=' http : ext-all。js /脚本脚本类型='text/javascript '！-分机。onready(function(){ var cm=new ext。网格。列模型([{ header : '编号，数据索引：“id”，宽度：60,可排序：路径，{header: '名称，dataIndex:'name '，width:180}，{id:'desn '，header: '描述，dataIndex:'desn '，width:200}，{header: '时间，dataIndex:'date '，type:'date '，render : ext。乌提尔。格式。日期渲染器(' Y年m月d日')} ]);定义变量数据=[ ['1 '，'名称1 '，' desn1 '，' 2009-09-17t 02336058336004 ']，['2 '，'名称2 '，' desn1 '，' 2009-09-17t 0236058336004 ']，['3 '，'名称3 '，' desn1 '，' 2009-09-17T02:58:04']，['var store 1=new数据。商店({ proxy : new ext。数据。内存代理(数据)，阅读器：新分机。数据。arrayreader({ }，[ {name:'id'}，{name:'name'}，{name:'desn'}，{name:'date '，type:'date '，日期格式3360 ' Y-m-DTH :3333333 store 1。load()；var网格1=新ext。网格。网格面板({ renderto : ' grid 1 '，stripeRows:true，//斑马线效果loadMask:true，store: store1，height:200，cm:cm，view config : { force fit : true } })；});/////脚本/标题正文表单id=' form 1 ' runat=' server ' div id=' grid 1 '/div/表单/正文/html

图4带有时间数据的网格3.5自动显示行号和复选框。事实上，行号和复选框都是渲染器的扩展。当然，复选框的功能要复杂得多。1.自动显示行号：修改列模型cm，添加RowNumberer对象；2.复选框：我们创建一个复选框选择模型()。3.详细的代码如下，渲染如图5所示。复制代码如下： varsm=new ext . grid . checkbox selectionmodel()；var cm=new ext . grid . column model([new ext . grid . row number er()，sm，{header:' number '，dataindex:' id '，width:40，sortable3360 true}，{header:' name '，dataindex:' name '，width:180}，{id:' desn '，header 3360 ' desn '，dataindex:' desn '，width:40数据： '日期'，类型： '日期'，渲染器： ext。util.format.date渲染器(' y，m，month，d ')}]；

图5自动行号和复选框效果图12阅读下一页的全文。