Extjs Ext js 7现代网格插件RowExpander仅适用于某些行
我准备使用ExtJS7现代网格的RowExpander插件 我只在几行上需要行扩展器，而不是在所有行上 我不知道如何实现这一点，我搜索了一些示例，但它们都是针对ExtJS4的 我试着超越Extjs Ext js 7现代网格插件RowExpander仅适用于某些行,extjs,Extjs,我准备使用ExtJS7现代网格的RowExpander插件 我只在几行上需要行扩展器，而不是在所有行上 我不知道如何实现这一点，我搜索了一些示例，但它们都是针对ExtJS4的 我试着超越 applyColumn: function(column, oldColumn) { console.log('override applyColumn:'); console.log(column); return Ext.factory(Ext.apply({}, column),
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.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
});
}
});
Ext.define（'Ext.grid.plugin.CustomRowExpander'{
扩展：“Ext.plugin.Abstract”，
要求：[
“Ext.grid.cell.Expander”
],
别名：“plugin.customrowexpander”，
配置：{
网格：空，
专栏：{
重量：-1100，
xtype:'gridcolumn'，
对齐：'居中'，
文本：“”，
宽度：50，
可调整大小：false，
可隐藏的：错误，
可排序：false，
可编辑：false，
忽略：是的，
ignoreExport：对，
单元格：{
xtype:“expandercell”，
隐藏模式：“不透明度”，
绑定：{
隐藏：“{record.expandable}”
}
},
menuDisabled：对
}
},
expanderSelector:“.”+Ext.baseCSSPrefix+“expandercell.”+Ext.baseCSSPrefix+“图标el”，
init：函数（网格）{
grid.setVariableHeights（真）；
这个.setGrid（grid）；
},
销毁：函数（）{
var grid=this.getGrid（），
col=这个常数；
if（列和网格销毁）{
grid.unregister列（col，true）；
}
这是callParent（）；
},
applyColumn:函数（列，oldColumn）{
返回Ext.factory（Ext.apply（{}，column），null，oldColumn）；
},
updateGrid:函数（网格）{
var me=这个；
如果（网格）{
grid.hasRowExpander=true；
addCls（Ext.baseCSSPrefix+'具有行扩展器'）；
me.colInstance=grid.registerColumn（me.getColumn（））；
grid.refreshScrollVersion（）；
网格元素({
点击：“onGridTap”，
代表：me.expanderSelector，
范围：我
});
}
},
onGridTap：功能（e）{
var单元=从（e）开始的外部组件，
行=cell.row；
//可能已经点击了后代网格行。我们只对自己的感兴趣。
if（row.getGrid（）==this.getGrid（））{
row.toggleCollapsed（）；
}
}
});
外部应用程序({
名字：“小提琴”，
启动：函数（）{
var store=Ext.create（'Ext.data.store'{
字段：['fname'，'lname'，'talent'，'powers']，
数据：[{
“fname”：“Barry”，
“lname”：“Allen”，
‘天才’：‘Speedster’，
“可扩展”：true
}, {
“fname”：“Oliver”，
“lname”：“Queen”，
‘天赋’：‘射箭’，
“可扩展”：false
}, {
“fname”：“Kara”，
“lname”：“Zor El”，
“人才”：“所有人”，
“可扩展”：true
}, {
“fname”：“Helena”，
“lname”：“Bertinelli”，
"人才":"武器专家",，
“可扩展”：false
}, {
“fname”：“Hal”，
“lname”：“Jordan”，
‘天赋’：‘意志力’，
“可扩展”：true
}, ]
});
Ext.create（'Ext.grid.grid'{
标题：“DC人员”，
店:店,，
插件：{
customrowexpander:true
},
itemConfig：{
viewModel：是的，
正文：{
第三方物流：“Lorem ipsum dolor sit amet，Conseteteur sadipscing Eliter…”
}
},
栏目：[{
文本：“名字”，
数据索引：“fname”，
弹性：1
}, {
文本：“姓氏”，
数据索引：“lname”，
弹性：1
}, {
文字：“人才”，
数据索引：“人才”，
弹性：1
}],
身高：400，
布局：“适合”，
全屏：正确
});
}
});