ext学习课件.pptVIP

为了能编辑“性别”及“出生日期”列，同样只需要在定义该列的时候指定editor即可。由于出生日期是日期类型，因此我们可以使用日期编辑器来编辑，“性别”一列的数据不应该让用户直接输入，而应该是通过下拉框进行选择。日期编辑器可以直接使用Ext.form.DateField组件，下拉选择框编辑器可以使用Ext.form.ComboBox组件。 注意在定义EditorGridPanel的时候，我们增加了一个属性“clicksToEdit:1”，表示点击一次单元格即触发编辑，因为默认情况下该值为2，需要双击单元格才能编辑。为了给ComboBox中填充数据，我们使用设置了该组件的transform配置属性值为sexList，sexList是一个传统的select框，我们需要在html页面中直接定义。 那么如何保存编辑后的数据呢？ 答案是直接使用afteredit事件。当对一个单元格进行编辑完之后，就会触发afteredit事件，可以通过该事件处理函数来处理单元格的信息编辑，把编辑后的数据保存到服务器。(例略) GridPanel ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。 表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义，数据存储器根据解析的数据不同分为JsonStore、SimpleStore、GroupingStore等。 案例和代码 打开代码，我们可以看到 var myData =…”用来定义表格中要显示的数据，这是一个[][]二维数组； var store=…”用来创建一个数据存储，这是GridPanel需要使用配置属性，数据存储器Store负责把各种各样的数据（如二维数组、JSon对象数组、xml文本）等转换成ExtJS的数据记录集Record，关于数据存储器Store我们将在下一章中作专门介绍。 var grid = new Ext.grid.GridPanel(…)”负责创建一个表格，表格包含的列由columns配置属性来描述，columns是一数组，每一行数据元素描述表格的一列信息，表格的列信息包含列头显示文本(header)、列对应的记录集字段(dataIndex)、列是否可排序(sorable)、列的渲染函数(renderer)、宽度(width)、格式化信息(format)等，在上面的列子中只用到了header及dataIndex。 表格的排序及隐藏列特性，直接使用new Ext.grid.ColumnModel来创建表格的列信定义信息，列头(column)的sortable默认为true，表示该列可以排序。你还可以选择显示的列，最少显示一列。 在Change列中怎么实现数字显示的变色呢，是renderer方法在起作用，详细使用方法如下: renderer:function(value,metadata,css,attr,record,rowIndex,colIndex ,store){ if(value 0){return span style=color:green; + value+ /span;} else if(value 0){return span style=color:red; + value + /span‘;} return value; } 方法中的参数可以选择使用部分，比如只使用value 自定义的列渲染函数可以实现在单元格中显示自己所需要的各种信息，只是的浏览器能处理的html都可以。 拓展部分-Form文件上传 1:先将Form中的fileUpload属性设置成true 2:创建textfield将inputType属性设置为file‘ 3:实现后台上传文件的方法，建议最好使用 APATCH组件中的上传方法 实现方法 拓展部分-combo 一般combo案例 多选combo 注意：在ext-all.css里面添加如下样式 .checked{background-image:url(../images/default/menu/checked.gif)} .unchecked{background-image:url(../images/default/menu/unchecked.gif)} 带图标的combo 如何在Eclipse上安装EXT插件 采用link方式安装插件，首先下载Spket，然后开始安装 1：把压缩文件