实习时踩过的那些坑(二)

在ext中的grid中的完成copy/paste功能

这个task的功能是将grid中的某一列从checkbox变成combobox。
checkbox：
combobox：
并能够实现复制粘贴的功能。

//函数1、创建下拉选择框的函数
getComboBox: function () {
              var data = [
                [false, T('否')], [true, T('是')],[null, T('未设定')]
            ];
            var combo = new Ext.form.ComboBox({
                typeAhead: true,
                triggerAction: 'all',
                lazyRender: true,
                mode: 'local',
                fieldLabel: config ? config.fieldLabel : '',
                name: config ? config.name : '',
                anchor: config ? config.anchor : '',
                store: new Ext.data.ArrayStore({
                    id: 0,
                    fields: [
                        'id',
                        'value'
                    ],
                    data: data
                }),
                valueField: 'id',
                displayField: 'value'
            });
            return combo;
        },

---

//函数2、将下拉选择框绑定到grid的函数
getIsDangerous: function () {
            var triBoolCombo = this.getComboBox();
            return {
                header: T('是否危险品') + (this.isAxalta() ? "*" : ""),
                dataIndex: 'isDangerous',
                id: 'isDangerous',
                width: 80,
                renderer: Ext.util.Format.comboRenderer(triBoolCombo),
                editor: triBoolCombo,
                pasteIntercept: H.createDelegate(function (record, col, value) {
                    this._pasteIntercept(record, col, value);
                }, this)
            }
        },

---

//函数3、剪贴板监听函数
 _pasteIntercept: function (record, col, value) {
           //TODO:添加grid中四列的copy/paste的判定
            if (col.dataIndex =='isDangerous'
                || col.dataIndex =='isTemperatureControl'
                || col.dataIndex =='isWinterTemperatureControl'
                || col.dataIndex =='isSummerTemperatureControl'
            ) {
                if(value== T('是'))
                    record.set(col.dataIndex,true);
                else if(value==T('未设定'))
                    record.set(col.dataIndex,null);
                else
                    record.set(col.dataIndex,false);
            }

要写实现grid中的复制粘贴只要就是需要添加这两个属性：

---

原理

实现编辑：ext中的grid是这样其实只能显示内容，不具有编辑的功能，想要实现编辑功能，就需要在combobox组件上面添加editor组件。然后通过键值的对应关系匹配。如函数1中的var data = [false, T(‘否’)], [true, T(‘是’)],[null, T(‘未设定’)]
这里的汉字是现在在页面我们能够看到的，但是真正grid里面装的是bool值得true与false，这值是需要传到后台的。
实现粘贴：想要能够将剪贴板中的内容粘贴到页面的editor组件上面，就需要在组件上添加一个剪贴板拦截器，他会在我们粘贴的时候触发其后的回调函数，然后就会将粘贴板中的内容根据我们自定义的回调函数(函数3)来显示在对于的位置上。