ExtJs - 编辑器网格面板为删除行添加列

Question

我已经创建了编辑器网格面板，但我无法为删除行添加列。 我尝试了几个版本，但没有任何结果。这是我的代码。我想添加删除列，行像图标不像tbar按钮。

 this.libraryListGrid = new Ext.grid.EditorGridPanel({
        clicksToEdit: 1,
        colModel: new Ext.grid.ColumnModel({
           columns: [{
                dataIndex: 'name',
                editable: !this.config.viewOnly,
                editor: new Ext.form.TextField({
                    allowBlank: true,
                    controllerThis: this,
                    listeners: {
                        blur: function(item){
                            var record =item.getValue();
                            var valid = true;//this.controllerThis.libraryListGrid.isValidValue(record);
                            item.setValue(record);
                            item.setValue(record);
                        }
                    }
                }),
                header: ' ',
                id: 'name'
              },
              {
                  header: ' ',
                  text:'delete',
                  items: [{
                      handler: function(grid, rowIndex, colIndex) {
                          var rec = grid.getStore().getAt(rowIndex);
                          //rec.store.remove();
                          alert("Delete " + rec.get('name'));
                          grid.getStore().remove(rec);
                          //grid.getStore().removeAt(rowIndex);
                      }
                  }]
              }
           ]
        }),
        ds: this.libraryListDataStore,
        height: 200,
        width: 'auto',
        isValidValue: function(field) {
            return true;
            var valid = new RegExp(/|s|/).test(field);
            if(field.match(/^[s]/)){
                helpsys.replaceFlashArea("Can not contain spaces!");
                valid = false;
            }else{
                if(!field.length >= 10){
                    helpsys.replaceFlashArea("lenght is longer then 10,10 is mximal size for this field!");
                    valid = false;
                }
            }
            this.store.each(function (record){
                if (record.id != this.gridEditor.record.id && record.get('name') == this.getValue()
                    && record.get('name').length > 0) {
                    valid = false;
                    return false;
                }
            }, field);
            if (!valid) {
                helpsys.replaceFlashArea(helpsys.locale.jobs.agent_environment.agent_environment_variables_validation);
            }
          this.allowEdit = valid;
            return valid;
        },
        allowEdit: true,
        forceValidation: true,
        loadMask: true,
        renderTo: 'libraryListGrid',
        selModel: new helpsys.AddRowSelectionModel(),
        stripeRows: true,
        tbar: [{
            disabled: this.config.viewOnly,
            text: helpsys.locale.agent_environments.add_variable_button,
            handler : function(){
                // access the Record constructor through the grid's store
                var Plant = this.libraryListGrid.getStore().recordType;
                var p = new Plant({
                });
                this.libraryListGrid.stopEditing();
                this.libraryListDataStore.insert(0, p);
                this.libraryListGrid.startEditing(0, 0);
            },
            scope: this
        }],
        view: new Ext.ux.grid.BufferView({
            autoFill: true,
            forceFit: true,
            getRowClass: function(record, rowIndex, rp, ds){
            }
        })


    });
}

Answer 1

我也想做这种类型的要求。我已经使用过这段代码，试试吧。它对我有用。

var userCM = new Ext.grid.ColumnModel([
    {
        header: "UserName",
        width: 15,
        sortable: true,
        dataIndex: 'username',
        editor:new Ext.form.TextField({
            readOnly:true
        })
    },{
        xtype:'actioncolumn', 
        width: 5,
        align: "center",
        header: "Action",
        id:'userEmailDeleteId',
        icon: '../images/delete.png', 
        tooltip: 'Delete Email',
        handler: function(grid,rowIndex) {
            // write your logic here
        }
    }])

Answer 2

感谢您的帮助，但我发现了另一种有趣的方式。

   this.libraryListGrid = new Ext.grid.EditorGridPanel({
        clicksToEdit: 1,
        colModel: new Ext.grid.ColumnModel({
           columns: [{
                dataIndex: 'name',
                editable: !this.config.viewOnly,
                editor: new Ext.form.TextField({
                    allowBlank: true,
                    controllerThis: this,
                    listeners: {
                        blur: function(item){
                            var record =item.getValue();
                            var valid = this.controllerThis.libraryListGrid.isValidValue(item);
                            if(valid){
                                item.setValue(record);
                            }else{
                                item.setValue(record);
                            }
                        }
                    }
                }),
                header: ' ',
                id: 'name'
           },
               {
                   header: '',
                   menuDisabled: true,
                   width: 35,
                   dataIndex: '',
                   fixed: true,
                   renderer: this.renderActions

               }

           ]

        }),
        ds: this.libraryListDataStore,
        height: 200,
        width: 'auto',
        isValidValue: function(field) {
            var valid = true;
            valid = field.match(/\s/);
            if(!valid){
                helpsys.replaceFlashArea("Can not contain spaces!");
                return false;
            }else{
                if(!field.length >= 10){
                    helpsys.replaceFlashArea("lenght is longer then 10,10 is mximal size for this field!");
                    return false;
                }
            }
            this.store.each(function (record){
                if (record.id != this.gridEditor.record.id && record.get('name') == this.getValue()
                    && record.get('name').length > 0) {
                    helpsys.replaceFlashArea(helpsys.locale.jobs.agent_environment.agent_environment_variables_validation);
                    return false;
                }
            }, field);
            return valid;
        },
        allowEdit: true,
        listeners: {
            rowclick: {
                fn: onRowClick,
                scope: this
            }
        },
        forceValidation: true,
        loadMask: true,
        renderTo: 'libraryListGrid',
        selModel: new helpsys.AddRowSelectionModel(),
        stripeRows: true,
        tbar: [{
            disabled: this.config.viewOnly,
            text: helpsys.locale.agent_environments.add_variable_button,
            handler : function(){
                // access the Record constructor through the grid's store
                var Plant = this.libraryListGrid.getStore().recordType;
                var p = new Plant({
                });
                this.libraryListGrid.stopEditing();
                this.libraryListDataStore.insert(0, p);
                this.libraryListGrid.startEditing(0, 0);
            },
            scope: this
        }],
        view: new Ext.ux.grid.BufferView({
            autoFill: true,
            forceFit: true,
            getRowClass: function(record, rowIndex, rp, ds){
            }
        })


    });
   },
   renderActions: function(value, metadata, record, rowIndex, colIndex, store){
    var columnValue = '<div class="rowAction deleteAction" ><div class="iconLinkIcon deleteIcon"></div></div>';
    return columnValue;
}