extjs 我想隐藏一个treegrid(带列的treepanel)中非叶子节点上的复选框

mbjcgjjk  于 2024-01-07  发布在  其他
关注(0)|答案(6)|浏览(175)

在一个Ext JS应用程序中,我有一个带有复选框列(xtype:'checkcolumn')的树面板。但我只想在叶子节点上显示复选框。在父节点中,我想隐藏复选框(或至少禁用它们)。
我如何才能做到这一点?

gajydyqb

gajydyqb1#

基于matt的回答,这可以更容易地使用renderer方法来实现,ala:

  1. renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
  2. if (!record.isLeaf()) {
  3. metaData.style = "display: none;";
  4. }
  5. }

字符串

3htmauhk

3htmauhk2#

上面的方法对我不起作用。我使用的是ExtJS 5.01。上面的解决方案产生了一些XTemplate错误。所以我使用了以下方法:

  1. Ext.define('MyApp.view.LeafOnlyCheckColumn', {
  2. extend: 'Ext.grid.column.CheckColumn',
  3. alias: 'widget.leafOnlyCheckColumn',
  4. processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
  5. if (record.isLeaf()) {
  6. return this.callParent(arguments);
  7. }
  8. else {
  9. return MyApp.view.LeafOnlyCheckColumn.superclass.superclass.processEvent.apply(this, arguments);
  10. }
  11. },
  12. defaultRenderer: function(value, cellValues){
  13. if(cellValues.record.isLeaf()){
  14. return this.callParent(arguments);
  15. }else{
  16. var cssPrefix = Ext.baseCSSPrefix,
  17. cls = cssPrefix + 'grid-checkcolumn';
  18. cellValues.tdCls += ' hiddenCheckCls';
  19. return '<img class="' + cls + '" src="' + Ext.BLANK_IMAGE_URL + '"/>';
  20. }
  21. }
  22. });

字符串
然后我添加了以下CSS:

  1. .hiddenCheckCls{
  2. visibility: hidden;
  3. }


并使用了带有xtype的类:leafOnlyCheckColumn
希望能帮上忙!

展开查看全部
a2mppw5e

a2mppw5e3#

默认情况下不支持它,但您可以提供自己的列类,扩展Ext.grid.column.CheckColumn:

  1. Ext.define('My.tree.column.CheckColumn', {
  2. extend: 'Ext.grid.column.CheckColumn',
  3. alias: 'widget.mytreecheckcolumn',
  4. processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
  5. if (record.isLeaf()) {
  6. return this.callParent(arguments);
  7. }
  8. else {
  9. return My.tree.column.CheckColumn.superclass.superclass.processEvent.apply(this, arguments);
  10. }
  11. },
  12. renderer : function(value, meta, record) {
  13. if (record.isLeaf()) {
  14. return this.callParent(arguments);
  15. }
  16. return '';
  17. }
  18. });

字符串
并在树面板中使用它:

  1. columns: [{
  2. xtype: 'treecolumn'
  3. },{
  4. xtype: 'mytreecheckcolumn',
  5. dataIndex: 'active'
  6. }]

展开查看全部
alen0pnh

alen0pnh4#

此外,此模型字段规范可以帮助您:

  1. Ext.define("ExampleModel",{
  2. extend: "Ext.data.Model",
  3. fields: [{
  4. name: 'checked',
  5. type: 'boolean',
  6. convert: function(v,rec) {
  7. return !rec.isLeaf() ? null : rec.data.checked;
  8. }
  9. }]
  10. });

字符串

carvr3hs

carvr3hs5#

简单的解决方案是使用2个不同的模型。一个用于父节点,其中没有名为'checked'的字段。

  1. Ext.define('App.model.Parent', {
  2. extend: 'Ext.data.TreeModel',
  3. fields: [{
  4. name: 'title'
  5. }]
  6. });

字符串
一个用于子节点,它有一个名为“checked”的字段。

  1. Ext.define('App.model.Child', {
  2. extend: 'Ext.data.TreeModel',
  3. fields: [{
  4. name: 'checked',
  5. type: 'boolean'
  6. },{
  7. name: 'title'
  8. }]
  9. });


然后在树中,只有带有“checked”字段的节点才会显示复选框。

展开查看全部
92vpleto

92vpleto6#

我花了很多时间在ExtJS 7.5.1中解决同样的任务,由于某些原因,“callParent”和超类对我不起作用。但是renderer函数中的.defaultRenderer可以工作:

  1. renderer: function(value, meta, record) {
  2. if (record.isLeaf()) {
  3. return this.defaultRenderer(value);
  4. }
  5. }

字符串
我只是把它放在面板的属性“selModel”中,在“mode:'MULTI',"之后,但是如果需要的话,你可以使用checkcolumn。

相关问题