之前的项目中虽然也经常使用到extjs,但或许是没有注意到,也或许是根本就没有需要用到这个功能.
前几天在和客户讨论需求时,客户说想要能够将gird表中的数据复制出来,当时没多想,感觉这功能extjs应该是支持的,应该配置一个后几个参数就能搞定的吧.可是回来后查extjs的api才发现好像根本就没有这个设置的.再回想之前的项目中,好像确实没有做过这个功能.所以赶紧就到网上找了,也找个来一些解决方案,但感觉实现起来比较麻烦,也没去试.
今天再想到这个问题时,突然一个想法在脑海中闪现,应该能够借用gird的单元格编辑功能来实现复制的效果吧.于是赶紧去测试下,结果还真可以,代码如下:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
<span style="color:#ff6666;">plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
pluginId:'rowEditing',
clicksToEdit: 1
})
],</span>
columns: [
{ text: 'Name', dataIndex: 'name' ,
<span style="color:#ff6666;">editor:{
xtype: 'displayfield'
}</span>
},
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
效果如下:
感觉效果还不错吧,
总结起来,优点很明显就是实现简单方便,支持各种版本的extjs.而确定就是不支持行复制,而且需要为每个column中都写一个editor.
今天才发现,原来Extjs 本来就支持grid复制(增加viewConfig:{enableTextSelection:true}即可),哎... 代码如下:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
viewConfig:{enableTextSelection:true},
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});