关于extjs grid复制粘贴功能

Posted 2023-03-18

场景是这样的：一个editgrid， 比如说有5列，第一条数据：把第三列 填写为“1”，其他列随便填，第二条数据：当填写到第三列的时候需要去判断，如果判断第一条数据的第三列填写的是”1“的话，那么第二条的第三列要自动填写为”2“，并且把第一条数据的第四列、第五列复制到第二条数据的第四列、第五列（重点的地方）。。。不知道各位大神们这样的场景如何实现啊？？求思路，求方法！！！在线等。。。可追加分数！！！谢谢了

editor : new Ext.form.DateField(id: "id1"),
renderer : function(value,metadata,record,rowIndex,colIndex,store) 
//这里有record，有stroe，你想要的值不都有了么  
//比如，这个加在第三列，然后你肯定知道行数，用store定位到某行的record，那么所有的值不都有了么，然后想怎么赋值不就怎么赋值（复制）了么 

 

详细的你可以查api

Ext.grid.Column中：

renderer
: Function
(可选)当该方法通过传递以下参数时，会返回可显示的数据:
value : Object
该单元格的数据值。
metadata : Object
一个对象，您可以在其中设置以下属性:
 
css : String
一个添加到该单元格的TD元素上的CSS样式名。
attr : String
一个定义html属性的字符串，应用到数据容器内的表格单元格元素上(例如:'style="color:red;"')。
record : Ext.data.record
从数据中提取的Ext.data.Record。
rowIndex : Number
Row index
colIndex : Number
Column index
store : Ext.data.Store
从该Ext.data.Store对象中提取记录。

 

另外几个你会用到的方法

Ext.data.Store中：

getAt(Number index) : Ext.data.Record
获取指定位置的记录。
参数: 
index : Number
需要查找的记录的索引位置。
返回值: 
Ext.data.Record 
所传递的索引位置的Record。 如果没有找到，返回undefined

 

Ext.data.Record中：

get(String name ) : Object
获取指定名称字段 的值。
参数: 
name : String
需要获取值的字段名称 
返回值: 
Object 
字段的值。

set(String name ,  String/Object/Array value  ) : void
将字段名 设置为指定的值。

参考技术A EditorGridPanel,有个afteredit( Object e ) 事件，你的具体判断可在这个事件里面实现

extjs grid 复制问题还有一种解决方式.

之前的项目中尽管也常常使用到extjs,但也许是没有注意到,也也许是根本就没有须要用到这个功能.

前几天在和客户讨论需求时,客户说想要可以将gird表中的数据复制出来,当时没多想,感觉这功能extjs应该是支持的,应该配置一个后几个參数就能搞定的吧.但是回来后查extjs的api才发现好像根本就没有这个设置的.再回忆之前的项目中,好像确实没有做过这个功能.所以赶紧就到网上找了,也找个来一些解决方式,但感觉实现起来比較麻烦,也没去试.

  今天再想到这个问题时,突然一个想法在脑海中闪现,应该可以借用gird的单元格编辑功能来实现复制的效果吧.于是赶紧去測试下,结果还真可以,代码例如以下:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"[email protected]", "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":"[email protected]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"[email protected]", "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()
});