JavaScript的框架框架中表格的编写教程

框架中表格的特性简介表格由类Ext.grid.GridPanel定义，继承自延伸文件系统面板，xtype为格子表格的列信息由Ext.grid.ColumnModel定义表格的数据存储器由外部数据存储定义，根据解析数据的不同，数据存储器可具体分为如下几种：

JsonStore、SimpleStore、GroupingStore…

一个表格的基本编写过程：

1、创建表格列模型

var cm=新Ext。网格。列模型({ { header : '角色，数据索引：”角色" }，header:等级，dataIndex: 'grade'}，header: '创建日期，dataIndex: 'createDate '，type: 'date '，render : ext。乌提尔。格式。日期渲染器(' Y年m月d日')} //创建日期类型的数据});2、创建数据数组

定义变量数据=[[]士兵','7','2011-07-2412:34:56'], ['将军','10','2011-07-2412:34:56'],];3、创建一个数据存储对象商店，包含两部分：代理，获取数据的方式；读者，解析数据的方式

ArrayReader的绘图用来设置列的排列顺序

var store=new ext。数据。商店({ proxy : new ext。数据。memoryproxy(数据)，阅读器：新分机。数据。arrayreader({ }，[ {name: 'role '，mapping: 1}，{name: 'grade '，映射： 0 0 { name : ' create date '，mapping: 2，type: ' date '，日期格式： ' Y-1 '创建日期列和显示格式])});商店。load()；4、创建GridPanel，装配ColumnModel和商店

var grid=new ext。网格。网格面板({ renderto : ' grid '，store: store，cm :cm })；另外获取远程数据可以使用ScriptTagProxy，如下所示

var store=new ext。数据。商店({ proxy : new ext。数据。scripttagproxy({ URL : ' http://.)})，读者：新分机。数据。arrayreader({ }，[ {name: 'role '，mapping: 1}，{name: 'grade '，mapping: 0} ])，sortInfo: {field: 'role '，direction: 'ASC'} //设置默认排序列，ASC/desc })；表格的常用属性功能

var grid=new ext。网格。网格面板({ enablecolumnmove : false，//禁止拖放列enableColumnResize: false，//禁止改变列的宽度stripeRows: true，//斑马线效果loadMask: true，//读取数据时的遮罩和提示功能renderTo: 'grid '，store : store cm : cmvar cm=new Ext。网格。列模型({ { header : '角色，数据索引： '角色，width:90，sortable: true}，//width设置列宽度，默认为100像素，可分类设置排序功能{id:'grade '，header: '等级，dataIndex: 'grade '，宽度：40 } })；var grid=new ext。网格。网格面板({ renderto : ' grid '，store: store，cm: cm viewConfig:{ //让每列自动填充满表格force fit : true } autoexpandcolumn : ' grade '//自动延伸列，列的编号在ColumnModel中定义});渲染表格，为表格设置特殊样式只需要在厘米里面增加一个渲染器属性，添加一个自定义函数来渲染传进来（由外面的(外部的简写)自动传递)的参数的样式即可，即在返回价值之前拼装上相应的超文本标记语言和半铸钢钢性铸铁(铸造半钢)或者射流研究…响应事件。

函数renderSex(value){ if(value==' male '){ return ' span style=' color : blue；'男/span mg src=' images/icon _ male。png '/'；} else { return ' span style=' color : red；'女/span mg src=' images/icon _雌性。png '/'；} } var cm=new ext。网格。列模型([{ header : ' id '，dataIndex:'id'}，{header:'name '，dataIndex:'name'}，{header:'sex '，dataIndex:'sex '，renderer:renderSex }，])；定义变量数据=[ ['1 '，' Jason '，'男]，['2 '，'凯特'，'女'];var store=new ext。数据。商店({ proxy : new ext。数据。内存代理(数据)，阅读器：新分机。数据。arrayreader({ }，[ {name: 'id'}，{name: 'name'}，{ name : ' sex ' }])})；商店。load()；var grid=new ext。网格。网格面板({ autoheight : true，renderTo: 'grid '，store: store，cm :cm })；自动显示行号，只要在创建厘米时创建一个行编号器就可以了

var cm=新ext。网格。列模型([新扩展名。网格。行号er()，//显示行号{header:'id '，dataIndex:'id'}，{header:'name '，dataIndex:'name'}，{header:'sex '，dataIndex:'sex '，renderer:renderSex }，])；删除列

商店。移除(存储。GetAT(I))；刷新表格

网格。查看。fresh()；为表格添加复选框需要使用复选框选择模型选择模型sm在使用时要放到厘米和表格中

var sm=新ext。网格。checkbox selection model()；var cm=新ext。网格。列模型([新扩展名。网格。行号er()，sm，{header: '编号，dataIndex:'id'}，header: '名称，data index : ' name ' }])；定义变量数据=[[1]，名称1，[2]，[名称2]]；var store=new ext。数据。商店({ proxy : new ext。数据。memoryproxy(数据)，阅读器：新分机。数据。arrayreader({ }，[ {name: 'id'}，{ name : ' name ' }])})；商店。load()；var grid=new ext。网格。网格面板({ autoheight : true，renderTo: 'grid '，store: store，cm: cm，sm : sm })；通过RowSelectionModel设置只选择一行：

var grid=new ext。网格。网格面板({ autoheight : true，renderTo: 'grid '，store: store，cm: cm，sm : new ext。网格。行选择模型({ single select : true })})；使用选择模型获取数据

grid.on('click ')，function(){ var selections=grid。getselectionmodel().getSelections()；for(var I=0；一。选择。长度；I){ var record=selections[I]；延伸文件系统味精。警报(记录。get(' id ')；}});表格视图从手动音量调节的思想来看表格控件：*外部数据存储可看做模型* Ext.grid.GridPanel可看做控制器* Ext.grid.GridView可看做视图* 一般显示数据表格（一种控件)由GridPanell自动生成，如果想设置显示数据表格（一种控件)的属性时，可以通过Ext.grid.GridPanel的getView()获得视图实例

Ext.get('button1 ').on('click ')，function() { grid.getView().scrolToToToPgrid.getView().focusCell(0，0)；var cell=grid.getView().getCell(0，0)；细胞。风格。背景颜色='红色'；});使用组件的视图配置在创建表格时设置显示数据表格（一种控件)的初始化参数

var grid=new ext。网格。网格面板({高度： 100，宽度： 400，渲染到： '网格'，存储：新ext。数据。商店({ autoload : true，proxy : new ext。数据。memoryproxy(数据)，阅读器：新分机。数据。arrayreader({ }，meta) })，columns: meta，viewConfig: { columnsText显示的列', //设置下拉菜单提示文字scrollOffset: 30，//设置右侧滚动条的预留宽度排序文本： '升序', //设置下拉菜单提示文字"排序描述文本："降序', //设置下拉菜单提示文字forceFit: true //自动延展每列的长度}});为表格添加分页工具条* 可以使用组件的多层镀膜属性，并创建延伸文件系统分页工具栏分页工具条对象* 注意，如果配置了分页工具条，store.load()就必须在构造表格以后执行。

var grid=new Ext。网格。网格面板({ renderto : ' grid '，autoHeight: true，store: store，cm: cm，bbar: new Ext .PagingToolbar({ pageSize: 10，//每页显示10条数据store: store，displayInfo: true，//显示数据信息显示Msg: '显示第{0} 条到{1} 条记录，一共{2} 条，emptyMsg: '没有记录' //没有数据时显示的信息})});商店。load()；从后台脚本获取分页数据

使用HttpProxy传递请求，获取服务器的数据数据，交给JsonReader解析

var cm=新Ext。网格。列模型([{ header : '编号，dataIndex:'id'}，header: '名称，data index : ' name ' }])；var store=new ext。数据。商店({ proxy : new ext。数据。http proxy({ URL : '页。JSP ' })，阅读器：新ext。数据。jsonreader({ TotalProperty : ' TotalProperty '，root: 'root' }，[ {name: 'id'}，{ name : ' name ' })})；var grid=new ext。网格。网格面板({ renderto : ' grid '，autoHeight: true，//数据传回来之前高度未知，所以要使用自适应高度商店：商店，cm: cm，bbar:新Ext .分页工具栏({ pageSize: 10，store: store，displayInfo: true，displayMsg: '显示第{0} 条到{1} 条记录/共{2} 条，emptyMsg: '没有记录' })});商店。load({ params 3360 { start :0，limit :10 } })；如果想让分页工具条显示在表格的顶部，可以使用组件的微型兵营属性设置添加工具条

让框架在对返回的数据进行分页

* 需要在页面中引入示例/地区目录下的PagingMemoryProxy.js文件* 再使用分页内存罗克西影院联号的设置代理

var store=new ext。数据。商店({ proxy : new ext。数据。pagingmemoryproxy(数据)，阅读器：新分机。数据。arrayreader({ }，[ {name: 'id'}，{name: 'name'}，{ name : ' descn ' }])})；//在创建组件之后调用商店。load({ params : { start :0，limit :3 } })；可编辑表格控件编辑网格的使用

制作一个简单的编辑网格的步骤：

1、定义列ColumnModel，在里面添加编辑属性

var cm=新Ext。网格。列模型([{ header : '编号，dataIndex: 'id '，编辑器：新ext。网格编辑器(新ext。形式。textfield({ allowblank : false//不允许在文本字段中输入空值}) )}，{ header: '名称，dataIndex: 'name '，编辑器： new ext。网格编辑器(新ext。形式。text field({ allowblank : false })})])；2、准备一个数组

定义变量数据=[ ['1 '，' Jason']，['2 '，' Jay ']]；3、创建外部数据存储，设置内存代理，设置ArrayReader解析数组

var store=new ext。数据。商店({ proxy : new ext。数据。memoryproxy(数据)，阅读器：新分机。数据。arrayreader({ }，[ {name: 'id'}，{ name : ' name ' }])})；4、加载数据，创建EditorGridPanel

商店。load()；var grid=new ext。网格。编辑器网格面板({ autoheight : true，renderTo: 'grid '，store: store，cm :cm })；为可编辑表格添加和删除数据

1、使用记录的创造方法创建一个记录集我的记录，我的记录相当于一个类

var my record=Ext。数据。记录。create([{ name : ' id '，type: 'string'}，{name: 'name '，type : ' string ' }])；商店。load()；2、创建EditorGridPanel面板，在属性微型兵营中创建延伸文件系统工具栏

var grid=new Ext。网格。编辑器网格面板({ autoheight : true，renderTo: 'grid '，store: store，cm: cm，tbar: new Ext .工具栏(['-',{ //-表示菜单分隔符文本： '添加一行，处理程序：函数(){ var p=new MyRecord({ id : ' '，name : ' ' })；网格。停止编辑()；//关闭表格的编辑状态store.insert(0，p)；//创建的记录插入商店的第一行grid.startEditing(0，0)；//激活第一行第一列的编辑状态} }、“-”、{ text: '删除一行，手柄：函数(){ Ext .Msg.confirm('信息', '确定要删除？',函数(BTN){ if(BTN==' yes '){ var sm=grid。getselectionmodel()；//获取表格的选择模型var cell=sm。getselected cell()；//获取选中的单元格var record=store.getAt(单元格[0]);//通过行号得到商店这一行对应的唱片店。移除(记录)；//移除数据} });} }, '-'])});为可编辑表格保存修改的结果

在上面例子的基础之上，添加一个保存按钮

文本： '保存，处理程序：函数(){ var m=store。已修改。切片(0)；//获得商店中修改过得数据for(var I=0；我是长度；i ) { //验证表格信息是否正确，是否包含空格定义变量记录=m[I]；var字段=记录。字段。钥匙；for(var j=0；长度；j){ var name=field[j]；定义变量值=记录。数据[名称]；var colIndex=cm.findColumnIndex(名称);var行索引=存储。indexofid(记录。id)；var编辑器=cm。getcelleditor(colIndex).字段；if(！编辑。验证值(value)){ Ext .Msg.alert('提示', '请检查输入的数据是否正确！function(){ grid。startediting(行索引，colIndex)；});返回；} } } var jsonArray=[]；Ext.each(m)，function(item){ JSonarray。推送(项目。数据)；//把修改过得数据放到对象中});Ext.lib.Ajax.request(//使用埃阿斯请求提交给后台POST '，' save_data.jsp '，{success:函数（响应){ //返回成功延伸文件系统Msg.alert('信息，response.responseText，function(){ store。重载()；});}，failure: function(){ //返回失败延伸文件系统Msg.alert('错误', '服务器保存数据出错！');}}，数据=' encodeURIComponent(ext。encode(JSonarray)))；}另外商店可以设置属性修剪修改记录3360为真。这样，每次移动或负荷操作时商店会自动清除修改标记，可以避免出现下次提交时还会把上次那些修改信息都带上的现象。

限制表格输入的数据类型

数域

{ header:'ID '，dataIndex:'id '，编辑器：新ext。网格编辑器(新ext。形式。数字字段({//数字字段限制只能输入数字allowBlank:为假，allowNegative:为假，//不能输入减号maxvalue : 10 })} ComboBox

var comboData=[ ['0 '，' Java']，['1 '，' Android ']]；{ header:'ComboBox '，dataIndex:'combo '，editor : new ext。网格编辑器(新ext。形式。ComboBox({ store : new ext。数据。simple store({ field s :[' value '，' text']，data: comboData })、emptyText: '请选择，mode: 'local '、triggerAction: 'all '、valueField: 'value '、displayField: 'text '、readOnly:true })、renderer:函数(value){返回组合数据[value][1]；}}DateField

{ header:'Date '，dataIndex:'date '，editor : new ext。网格编辑器(新ext。形式。datefield({ format : ' Y-m-d '，minValue: '2011-07-24 '，disabled day 3360[0，6]，disabledDaysText: '选择周一到周六之间的日期}))，渲染器：函数（值){返回值。格式(' Y-m-d ')；}}属性表格控件属性表格控件的使用是在编辑网格的基础上开发的更智能的高级表格组件

var grid=new Ext。网格。属性网格({ title : '属性表格控件PropertyGrid '，autoHeight: true，width: 400，renderTo: 'grid '，view config : { force fit : true }，source : { ' String ' : ' String '，' Date ' :新日期(Date。parse(' 07/24/2011 ')，' boolean': false，' float ' : { 01 })；禁用属性表格控件编辑功能的方法

grid.on('beforeedit '，函数(e){ e . cancel=true；返回false })；根据表格的名字获取价值

grid.store.getById('Jason ').get(value)；框架中实现嵌套表格先看效果：

代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html tolereta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title test/title script type=' text/JavaScript '/script link rel='样式表type=' text/CSS ' href=' Lib/ext js/2 _ 2/resources/CSS/ext-all。CSS '/脚本类型=' text/JavaScript ' src=' http : Lib/ext js/2 _ 2/adapter/ext-base。js '/script脚本类型=' text/JavaScript ' src='男',26,[['数学',100],['语文，150]]，['lisi '，'男',25,[['数学',100],['语文，150]],['张三','男',27,[['数学',120],['语文',158]]] ];//storeset=new ext。数据。简单存储({ field s :['姓名','性别','年龄','年级]，数据： testData })；var expander=new Ext。网格。Rowexpander({ TPL :新Ext .XTemplate(' div class=' detailData ''，' '，'/div ')})；expander.on('expand '，function(expander，r，body，rowIndex){ //查找grid window . testale=body//alert(body。id)；if (Ext .domquery。选择(' div。x-panel-bwrap '，body ).length==0){//alert(' a ')；定义变量数据=r . JSON[3]；var store=new Ext。数据。简单存储({ field s :[' class '，' delived ']，data : data })；var cm=新Ext。网格。列模型([{ header : '科目，dataIndex: 'class '，width: 130，hideable:false，sortable:false，resizable:true}，{header: '成绩，数据索引： '降级，width: 130，hideable:false，sortable:false，resizable : true }])；延伸文件系统domquery。选择(' div。detail DATa ')[0]；var grid=new ext。网格。网格面板({ store : store，cm:cm，renderTo:Ext .domquery。选择(' div。detaildata '，body)[0]，autoWidth:true，auto height : true })；}});//var sm=new ext。网格。checkbox selection model({ single selection : true })；var cm=新Ext。网格。柱模型([扩展器，{header: '姓名，dataIndex: 'name '，width: 50，hideable:false，sortable:false}，{header: '性别，dataIndex: 'sex '，width: 130，hideable:false，sortable:false，resizable:true}，{header: '年龄，dataIndex: 'age '，width: 130，hideable:false，sortable:false，resizable : true }])；var grid=new ext。网格。网格面板({ id : ' test grid '，store:storeTest，cm:cm，renderTo:'grid1 '，width:780，autoHeight:false，height:300，listeners: { }，plugins :[expander]})；});/script style type=' text/CSS ' # div 2 H2 { font-weight :200；font-size :12 px} .C1H2；}/style/head dydiv id=' grid 1 '/div div id=' grid 2 '/div/body/html其中使用到的RowExpander.js '为框架官方示例中自带的。

实现这个嵌套表格要注意两点技巧：1.提供给外层表格的数据存储的数据源以嵌套数组的形式表示细节区的数据，如下面的黑体所示。

var testData=[ ['lugreen '，]男',26,[['数学',100],['语文，150]]，['lisi '，'男',25,[['数学',100],['语文，150]],['张三','男',27,[['数学',120],['语文',158]]] ];使用数组集中记录对象的数据属性来获取以细节区数据

定义变量数据=r . JSON[3]；2.在rowExpander的发展事件中添加嵌套表格。