原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
9.3实现一个功能完整的增、删、查、改表格控件
252 第四部分 Ext 扩展和Ext 插件 ●
autoHeight: true,
frame: true,
items: [{
xtype: easycombo,
data: [Boy, Girl]
}],
renderTo: document.body
});
xtype 可以节省大量代码，它也让布局结构更加清晰明了，所以从某种程度上来讲 xtype 还是
值得一用的。
9.3 实现一个功能完整的增、删、查、改表格控件
现在，我们已经对用户扩展组件的原理以及需要注意的事项有了一定的了解，下面就来实际操
作一下，目标是实现一个自带增、删、查、改功能的表格控件，将通常需要进行上百行配置的 Grid
操作都封装在一个EasyGrid 中。
9.3.1 扩展GridPanel
既然我们要实现的是自带增、删、查、改全套功能的表格控件，当然就要把原本的 GridPanel
作为基类进行扩展了，下面就要使用Ext.extend()函数通过GridPanel 获得我们的EasyGrid ：
Ext.ux.EasyGrid=Ext.extend(Ext.grid.GridPanel, {});
然后在页面中创建一个EasyGrid 测试一下：
Ext.onReady(function() {
var EasyGrid=new Ext.ux.EasyGrid({
title: EasyGrid,
width: 400,
renderTo: easyGrid
});
});
可是当我们打开页面以后，却看不到完整的表格效果（如图 9-2 所示），这是因为我们创建的
GridPanel 中缺少了columns 参数，GridPanel 需要这个参数来定义自身的列模型。
图9-2 刚开始EasyGrid 无法正常显示
9.3.2 配置列模型
为了让EasyGrid 能够正常显示，必须为它提供列模型，但是因为GridPanel 中采用了MVC 模
型，ColumnModel 只属于用来显示数据的View 层。之后为了在EasyGrid 中显示数据，我们还需要
设置Model 层，并将View 层与Model 层的数据关联起来，这样相当于要将同样类型的数据配置两
次。有没有办法一次将View 层和Model 层都配置好呢？
为此，我们使用了一个自定义的参数fields，在页面中进行如下配置：
var EasyGrid=new Ext.ux.EasyGrid({
title: EasyGrid,
● 第9 章 Ext 扩展 253
width: 400,
fields: [id, title, status, description],
renderTo: easyGrid
});
在fields 中我们设置了4 列，分别是id、title 、status、description 。
下一步将在EasyGrid 中添加生成列模型的代码：
createColumns: function() {
var cols=[];
for (var i=0; i this.fields.length; i++) {
var f=this.fields[i];
cols.push({
header: f,
dataIndex: f
});
}
this.columns=cols;
}
这段代码将在组件初始化时执行，它会根据上面设置的 fields 参数生成对应的 columns，这样
EasyGrid 就知道该显示哪些列了。不过，现在我们
还没有为 EasyGrid 设置显示的数据，所以页面上的
文档评论（0）