在ExtJS Mordern版本中,grid的单元格编辑都是一整列的
但是,若是有时单元格无需编辑时,就没有相关配置项
看下效果:
这里需要手写逻辑,取消编辑
1.首先配置grid的单元格编辑插件
plugins: {
gridcellediting: {
selectOnEdit: true,
triggerEvent: 'doubletap' //配置单元格变editor触发事件 doubletap双击或 tap 单击
}
},
2.给单元格的dom元素 增添配置项
cell: {
encodeHtml: false,
renderer: function (val, record, dataindex, cell) {
if (!val) { //筛选哪些单元格要禁用编辑 的判断逻辑
cell.el.on({
tap: function (e) { //写了个单元格内元素x 删除一行的事件
if (Ext.fly(e.target).hasCls('del'))
this.getTreeStore().remove(this);
},
doubletap: function (e) { //这里用doubletap处理 和gridcelledting触发同一个事件
var rawValue=Ext.fly(b).component.getRawValue();
if(rawValue.trim())return this.beginEdit(); //修复 动态添加子元素 可编辑单元格无法编辑问题
this.cancelEdit(); //取消此单元格record编辑
e.stopPropagation(); //阻止冒泡 !重要
},
scope: record
});
return '<span class="del">x</span>';
}
else
return val;
},
},
整体代码:(可以放到ExtJS在线测试预览)
{
xtype: 'tree',
height: 400,
width: 600,
store: {
type: 'tree',
rootVisible: true,
root: {
expanded: true,
text: 'All',
iconCls: 'x-fa fa-sitemap',
children: [{
text: 'Home',
iconCls: 'x-fa fa-home',
children: [{
text: 'Messages',
A: 'mesg',
numItems: 231,
iconCls: 'x-fa fa-inbox',
leaf: true
}, {
text: 'Archive',
iconCls: 'x-fa fa-database',
children: [{
text: 'First',
numItems: 7,
A: 'girst',
iconCls: 'x-fa fa-sliders',
leaf: true
}, {
text: 'No Icon',
A: 'icno',
numItems: 0,
iconCls: null,
leaf: true
}]
}]
}]
}
},
plugins: {
gridcellediting: {
selectOnEdit: true,
triggerEvent: 'doubletap'
}
},
columns: [{
xtype: 'treecolumn',
text: 'Name',
flex: 1,
dataIndex: 'text',
editable: true
}, {
dataIndex: 'A',
text: '',
flex: 1,
editable: true,
cell: {
encodeHtml: false,
renderer: function (val, record, dataindex, cell) {
if (!val) {
cell.el.on({
tap: function (e, b, c) {
this.cancelEdit();
e.stopPropagation();
if (Ext.fly(e.target).hasCls('del')) this.getTreeStore().remove(this);
},
doubletap: function (e, b, c) {
var rawValue=Ext.fly(b).component.getRawValue();
if(rawValue.trim())return this.beginEdit(); //修复 动态添加子元素 可编辑单元格无法编辑问题
this.cancelEdit();
e.stopPropagation();
},
scope: record
});
return '<span class="del">x</span>';
} else
return val;
},
},
}]
}