ExtJS 4.2 Tree 突出显示单元格编辑中的选定行

Question

我有一个包含 4 列的树面板：

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing',{
    pluginId : 'cellEditing',
    clicksToEdit: 1
});
var tree = new Ext.tree.Panel({
    store:treestore,
    plugins : [
        cellEditing
    ],
    selModel:{
        selType:'cellmode'
    },
    defaults:{
        tdCls:'greyColumn'
    },
    columns:[
        somecolumns
    ]
});

在我的 css 中，我的风格是：

.x-grid-row .greyColumn {
    background-color:#f2f2f2;
}

我正在尝试在 selModel 定义中添加这段代码：

listeners: {
    select: function (cellModel, record, rowIndex) {
        cellModel.view.addRowCls(rowIndex, 'style');
    },
    deselect: function (cellModel, record, rowIndex) {
        cellModel.view.removeRowCls(rowIndex, 'style');
    },
    scope: this
}

在我的 css 中 "style" 定义：

.x-grid-row.style .x-grid-cell {
    background-color: #edbcb4 !important;
}

加载树时，我看到背景为灰色的列，但是当我 select 编辑一个单元格时，它会暂时变成红色，然后 returns 变成灰色，但我没有不知道如何解决或避免它。我希望我正在编辑的单元格行是红色的，而不是返回灰色。

Answer 1

在您的 celledit 组件表单样式行中使用 edit 和 beforeedit 事件

Fiddle

ExtJS 4.2 Tree 突出显示单元格编辑中的选定行

ExtJS 4.2 Tree highlight selected row on cell editing

extjs

extjs4