在一个Ext JS应用程序中,我有一个带有复选框列(xtype:'checkcolumn')的树面板。但我只想在叶子节点上显示复选框。在父节点中,我想隐藏复选框(或至少禁用它们)。我如何才能做到这一点?
gajydyqb1#
基于matt的回答,这可以更容易地使用renderer方法来实现,ala:
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) { if (!record.isLeaf()) { metaData.style = "display: none;"; } }
字符串
3htmauhk2#
上面的方法对我不起作用。我使用的是ExtJS 5.01。上面的解决方案产生了一些XTemplate错误。所以我使用了以下方法:
Ext.define('MyApp.view.LeafOnlyCheckColumn', { extend: 'Ext.grid.column.CheckColumn', alias: 'widget.leafOnlyCheckColumn', processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) { if (record.isLeaf()) { return this.callParent(arguments); } else { return MyApp.view.LeafOnlyCheckColumn.superclass.superclass.processEvent.apply(this, arguments); } }, defaultRenderer: function(value, cellValues){ if(cellValues.record.isLeaf()){ return this.callParent(arguments); }else{ var cssPrefix = Ext.baseCSSPrefix, cls = cssPrefix + 'grid-checkcolumn'; cellValues.tdCls += ' hiddenCheckCls'; return '<img class="' + cls + '" src="' + Ext.BLANK_IMAGE_URL + '"/>'; } } });
字符串然后我添加了以下CSS:
.hiddenCheckCls{ visibility: hidden; }
型并使用了带有xtype的类:leafOnlyCheckColumn希望能帮上忙!
a2mppw5e3#
默认情况下不支持它,但您可以提供自己的列类,扩展Ext.grid.column.CheckColumn:
Ext.define('My.tree.column.CheckColumn', { extend: 'Ext.grid.column.CheckColumn', alias: 'widget.mytreecheckcolumn', processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) { if (record.isLeaf()) { return this.callParent(arguments); } else { return My.tree.column.CheckColumn.superclass.superclass.processEvent.apply(this, arguments); } }, renderer : function(value, meta, record) { if (record.isLeaf()) { return this.callParent(arguments); } return ''; } });
字符串并在树面板中使用它:
columns: [{ xtype: 'treecolumn' },{ xtype: 'mytreecheckcolumn', dataIndex: 'active' }]
型
alen0pnh4#
此外,此模型字段规范可以帮助您:
Ext.define("ExampleModel",{ extend: "Ext.data.Model", fields: [{ name: 'checked', type: 'boolean', convert: function(v,rec) { return !rec.isLeaf() ? null : rec.data.checked; } }] });
carvr3hs5#
简单的解决方案是使用2个不同的模型。一个用于父节点,其中没有名为'checked'的字段。
Ext.define('App.model.Parent', { extend: 'Ext.data.TreeModel', fields: [{ name: 'title' }] });
字符串一个用于子节点,它有一个名为“checked”的字段。
Ext.define('App.model.Child', { extend: 'Ext.data.TreeModel', fields: [{ name: 'checked', type: 'boolean' },{ name: 'title' }] });
型然后在树中,只有带有“checked”字段的节点才会显示复选框。
92vpleto6#
我花了很多时间在ExtJS 7.5.1中解决同样的任务,由于某些原因,“callParent”和超类对我不起作用。但是renderer函数中的.defaultRenderer可以工作:
renderer: function(value, meta, record) { if (record.isLeaf()) { return this.defaultRenderer(value); } }
字符串我只是把它放在面板的属性“selModel”中,在“mode:'MULTI',"之后,但是如果需要的话,你可以使用checkcolumn。
6条答案
按热度按时间gajydyqb1#
基于matt的回答,这可以更容易地使用renderer方法来实现,ala:
字符串
3htmauhk2#
上面的方法对我不起作用。我使用的是ExtJS 5.01。上面的解决方案产生了一些XTemplate错误。所以我使用了以下方法:
字符串
然后我添加了以下CSS:
型
并使用了带有xtype的类:leafOnlyCheckColumn
希望能帮上忙!
a2mppw5e3#
默认情况下不支持它,但您可以提供自己的列类,扩展Ext.grid.column.CheckColumn:
字符串
并在树面板中使用它:
型
alen0pnh4#
此外,此模型字段规范可以帮助您:
字符串
carvr3hs5#
简单的解决方案是使用2个不同的模型。一个用于父节点,其中没有名为'checked'的字段。
字符串
一个用于子节点,它有一个名为“checked”的字段。
型
然后在树中,只有带有“checked”字段的节点才会显示复选框。
92vpleto6#
我花了很多时间在ExtJS 7.5.1中解决同样的任务,由于某些原因,“callParent”和超类对我不起作用。但是renderer函数中的.defaultRenderer可以工作:
字符串
我只是把它放在面板的属性“selModel”中,在“mode:'MULTI',"之后,但是如果需要的话,你可以使用checkcolumn。