大家好，继上次之后，今天给大家介绍一下，这也是extjs编程中经常出现的一个组件。 必须掌握它。 当然，实际情况比这复杂得多。 基本上可以实现excel中的大部分基本功能。 功能，功能还是挺强大的。

我们先截图看看网格（这是最基本的网格界面，没有经过处理）

网格的实现包括三个层次：模型、存储和视图。

从模型开始，先贴代码再解释：

Js代码

Ext.('..model',{:'Ext.data.Model',//:'name',:[{name:'',type:''},{name:'code',type:' '},{name:'name',type:''},{name:'',type:'int'}]});

代码一开始，首先定义一个模型类，名字自己选，然后将模型中的键值对赋值给属性。 首先也是最重要的一点是这个自定义类必须继承自Ext.data.Model并由属性表示。 然后就是这个表的基本属性，就是表的每一列的含义，用字段属性来表示。 Field是一个数组类型，存储了各个列的属性对象。 每个对象（类型）中必须定义对象的名称和类型，以方便与后续的store层连接。 至于（可选）这个属性稍后会解释。 这样，模型就基本写好了，很简单。

store层下面，代码如下：

Js代码

Ext.('..store',{:'Ext.data.Store',model:'..model',:'',:5,proxy:{type:'ajax',url:'../. ./',:{guid:...split('=')[1],cmd:''},:{type:'json'}},/*:[{:'name',:'ASC '}],*/:{开始:0,限制:5}});

store层也是自定义的类，继承自Ext.data.Store，然后这里也定义了model，也就是前面写的model层。 model的赋值就是前面写的model层的名字，然后最重要的就是proxy，它的定义是从后台获取数据，然后加载到网格中。 代理中的URL很容易说。 添加附加参数并将其传递到后台。 数据以json的形式读取。 store中的属性也需要被赋值，该值代表程序何时向后台发送请求加载数据。 可以指定为/。 默认为 false。 默认情况下是不发送请求的，但是可以在程序中通过grid的()函数获取store对象然后调用load函数，然后系统会将定义的代理中的内容发送到后台并加载。 如果手动设置为true，则表示从头开始请求数据。 上面的代码分配了一个对象用于分页。

当然，store也可以加载定义的数据集，设置store的数据属性，并在其中存储对象数组。 键值对与模型对应，表格会自动填充这些数据，如下：

Java代码

data:[{code:'OS1',name:'满旗辉夜1',:32},{code:'OS2',name:'满旗辉夜2',:48},{code:'OS3',name: '万绮辉夜3',:60},],

最后实现视图层的代码：

Java代码

Ext.('..grid',{:'Ext.grid.Panel',//继承自Ext.grid.:'.',//取别名itle:'',//表格标题frame:true, //开窗，即让界面更饱满:'', //设置单元格选择方式，默认为，行选择: true, //允许键盘操作，即将选中点向上、下、左移动, and right: true, //自动填充 ，即让所有列填充网格宽度：[//预配置 =Ext.('Ext.Util.'),//操作util类，可以忽略it 这里=..store()//定义网格的store，即之前定义的Store],:[//关键部分，定义每一列的属性 {text:'',//定义网格的标题名称: 'code',//对应模型中的属性align:'' ,//居中显示:{xtype:''}//以编辑框的形式定义此列可编辑},{ text:'name',:'name',align:''},{text:'学习时间', :'',align:''},{//看一下这一栏，就是相关的操作 xtype:'',align:'',html:'

细节

',items:[{icon:'../..//view.png',:this..}]}],tbar:[//定义工具栏，可以存放各种组件 {xtype:'' , //放一个，用法稍后介绍 id:'',store:(),:'remot',:'',:'name',:false},{xtype:'',text:'add' , :'',:(){//();}},//放一个按钮，定义其样式()，点击响应方法(){xtype:'',text:'删除',:'', :this..}],bbar:{//定义底部工具栏 xtype:'',//分页工具栏 store:this.,//数据集与网格数据集相同: true//是否显示数据集信息 },:'',//设置前面的多选框选项: true,//可以选择多个store: this //定义grid的store，即前面写的store });

视图层的信息量比较大，所以代码中注释掉了基本信息。 应该很清楚。 有些属性有不同的配置。 你可以在官网API上找到该属性，里面有详细的解释。 ，由于上面的代码已经可以代表大部分需求，这里不再赘述。

好了，上面的代码基本上可以实现大部分表格要求了。 另外，grid还有其他增强的功能，比如拖拽、分组等。每一列还有很多其他属性需要设置，比如常见的（渲染）、（格式化）等，今天就不写了以时间原因。 以后如果有时间，我会写一个GIRD的增强版。 在这里我想向大家道歉。

贴出网格中添加、删除、保存行的操作代码。 比较简单。

Java代码

doAdd:(grid,){if(!(grid&&)){Ext.Msg.alert('error','参数传递不正确！！！');;}=grid.();//获取当前表单数据集合的长度=store.();//获取编辑插件=grid.;//获取数据模型=store.model;=();store.(,);},:(grid ){=grid.( ).();if(data.==0){.msg("提示","请选择要删除的项目！！！",true);}else{varst=grid.( );Ext.Array.each( data,(){st.();});}},:(grid){if(!grid){Ext.Msg.alert('参数传递错误！！！' );;}//获取数据 =grid.();//你修改的数据=store.();=[];Ext.Array.each(,(model){data.push(model.data );});if( data.>0){Ext.Ajax.({//ajax后台传输数据url:'要传输的url',:{data:"["+data.join(',') +"]"},: 'POST',:4000,:(,opts){//();//取消小箭头 mit();}});}},

说一下大家在store.();时遇到的常见问题保存网格时获取空数据。 我已经为此苦苦挣扎了一段时间，觉得有必要在这里提出一个解决方案。

网格的模型层有一个属性： ，默认是id。 该属性是网格所有列的主要属性，相当于数据库中的主键定义。 缺一不可，所以当你的模型中没有配置id基本字段时，extjs内部的函数如(); 无法获取该行的句柄（就用大家都知道的句柄这个词），所以取出来的值为空。 解决方案是将其配置为您定义的字段之一，这样就解决了。

不过可能有的兄弟会遇到和我一样的问题。 我可以向表中添加新行。 使用商店的 (,Ext.data.Model[]) 函数添加新行。 添加的每个模型的属性都是空的，但是配置完之后，结果还是空的。 我想知道为什么它仍然不起作用。 最后，经过慢慢的对比和调试，终于找到了根本问题。 在新添加的行中设置的属性必须赋值，就像主键不能为空一样。 将指定的模型对象插入网格后然后调用(); 不会有问题，改变的值可以正常取出来。

最后说一下网格分页构建的实现细节。

在store层的定义中，定义了代表每一页的行数，并定义了一个对象（比如上面store中的那个），该对象代表初始起始位置和请求次数，这样在向后台请求的URL，增加了start和limit两个请求参数。 根据上面的代码，添加start=0&limit=5，这样后台就可以接受参数进行处理了。 那么上一页和下一页是如何处理的呢？ 它是在 bbar.h 中定义的。 分页建立后，当点击下一页的按钮时，extjs会自动向后台发送URL请求。 它与代理的 URL 请求相同。 同理，会增加两个请求参数start和limit，只不过此时的start值为当前值加上（下一页）或减去（上一页）大小，并在后台处理。

最后，如果本文有什么不足的地方，希望大家能够与我交流，共同学习，共同进步。 。 。 。 。 。 。 。 。