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

mbjcgjjk  于 11个月前  发布在  其他
关注(0)|答案(6)|浏览(118)

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

gajydyqb

gajydyqb1#

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

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

字符串

3htmauhk

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
希望能帮上忙!

a2mppw5e

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'
}]

alen0pnh

alen0pnh4#

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

Ext.define("ExampleModel",{
  extend: "Ext.data.Model",
  fields: [{
    name: 'checked',
    type: 'boolean', 
    convert: function(v,rec) {
      return !rec.isLeaf() ? null : rec.data.checked; 
    }
  }]        
});

字符串

carvr3hs

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”字段的节点才会显示复选框。

92vpleto

92vpleto6#

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

renderer: function(value, meta, record) {
    if (record.isLeaf()) {
         return this.defaultRenderer(value);
    }
}

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

相关问题