extjs - Ext js 7 现代网格插件 RowExpander 仅某些行
问题描述
我想为 Ext js 7 现代网格使用 RowExpander 插件。
我只在几行上需要 RowExpander,而不是全部。
我不确定如何实现这一点,我搜索了一些示例,但它们都是针对 ext js 4 的。
我尝试覆盖
applyColumn: function(column, oldColumn) {
console.log('override applyColumn:');
console.log(column);
return Ext.factory(Ext.apply({}, column), null, oldColumn);
},
updateGrid: function(grid) {
var me = this;
console.log('override test:');
console.log(grid);
if (grid) {
grid.hasRowExpander = true;
grid.addCls(Ext.baseCSSPrefix + 'has-rowexpander');
me.colInstance = grid.registerColumn(me.getColumn());
grid.refreshScrollerSize();
grid.element.on({
tap: 'onGridTap',
delegate: me.expanderSelector,
scope: me
});
}
},
但是当数据存在时,我不能“挂钩到单行”。
寻找类似的东西,但对于 ext js 7 现代网格: 如何让 ExtJs RowExpander 仅在某些行上显示图标 ([+])?
解决方案
您可以绑定“隐藏”,如下所示:
Ext.define('Ext.grid.plugin.CustomRowExpander', {
extend: 'Ext.plugin.Abstract',
requires: [
'Ext.grid.cell.Expander'
],
alias: 'plugin.customrowexpander',
config: {
grid: null,
column: {
weight: -1100,
xtype: 'gridcolumn',
align: 'center',
text: '',
width: 50,
resizable: false,
hideable: false,
sortable: false,
editable: false,
ignore: true,
ignoreExport: true,
cell: {
xtype: 'expandercell',
hideMode: 'opacity',
bind: {
hidden: '{record.expandable}'
}
},
menuDisabled: true
}
},
expanderSelector: '.' + Ext.baseCSSPrefix + 'expandercell .' + Ext.baseCSSPrefix + 'icon-el',
init: function (grid) {
grid.setVariableHeights(true);
this.setGrid(grid);
},
destroy: function () {
var grid = this.getGrid(),
col = this.colInstance;
if (col && !grid.destroying) {
grid.unregisterColumn(col, true);
}
this.callParent();
},
applyColumn: function (column, oldColumn) {
return Ext.factory(Ext.apply({}, column), null, oldColumn);
},
updateGrid: function (grid) {
var me = this;
if (grid) {
grid.hasRowExpander = true;
grid.addCls(Ext.baseCSSPrefix + 'has-rowexpander');
me.colInstance = grid.registerColumn(me.getColumn());
grid.refreshScrollerSize();
grid.element.on({
tap: 'onGridTap',
delegate: me.expanderSelector,
scope: me
});
}
},
onGridTap: function (e) {
var cell = Ext.Component.from(e),
row = cell.row;
// May have tapped on a descendant grid row. We're only interested in our own.
if (row.getGrid() === this.getGrid()) {
row.toggleCollapsed();
}
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
var store = Ext.create('Ext.data.Store', {
fields: ['fname', 'lname', 'talent', 'powers'],
data: [{
'fname': 'Barry',
'lname': 'Allen',
'talent': 'Speedster',
'expandable': true
}, {
'fname': 'Oliver',
'lname': 'Queen',
'talent': 'Archery',
'expandable': false
}, {
'fname': 'Kara',
'lname': 'Zor-El',
'talent': 'All',
'expandable': true
}, {
'fname': 'Helena',
'lname': 'Bertinelli',
'talent': 'Weapons Expert',
'expandable': false
}, {
'fname': 'Hal',
'lname': 'Jordan',
'talent': 'Willpower',
'expandable': true
}, ]
});
Ext.create('Ext.grid.Grid', {
title: 'DC Personnel',
store: store,
plugins: {
customrowexpander: true
},
itemConfig: {
viewModel: true,
body: {
tpl: '<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr..</div>'
}
},
columns: [{
text: 'First Name',
dataIndex: 'fname',
flex: 1
}, {
text: 'Last Name',
dataIndex: 'lname',
flex: 1
}, {
text: 'Talent',
dataIndex: 'talent',
flex: 1
}],
height: 400,
layout: 'fit',
fullscreen: true
});
}
});
推荐阅读
- vue.js - 如何在Vue中修复“观察者“isDark”的getter错误”
- mysql - AWS Aurora - 无法连接到 aws aurora db
- swift - 上传个人资料图片时 Firebase 应用程序崩溃
- atmel - sim800和sim900的区别
- android - React Native TextInput 多行底部
- reactjs - 尝试发布请求时反应原生发出警告
- sql - 根据 Oracle 版本执行查询
- c# - 如何修复在 LevelValue 更改时生成对象的减少时间
- php - 如何从 HTML 表中获取数据
- memory - 为什么 Racket 在这里以不同的值 (current-memory-use) 开始?