2

在 Ext JS 应用程序中，我有一个带有复选框列的树面板（xtype：'checkcolumn'）。但我只想在叶节点上显示复选框。在父节点中，我想隐藏复选框（或至少禁用它们）。

我怎样才能做到这一点？

4

5 回答 5

4

基于马特的回答，这可以使用渲染器方法更容易地实现，ala：

renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
   if (!record.isLeaf()) {
      metaData.style = "display: none;";
   }
}
于 2013-11-07T22:44:33.887 回答
2

上述方法对我不起作用。我正在使用 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

希望有帮助！

于 2014-09-03T08:37:44.680 回答
1

默认情况下不支持，但您可以提供自己的扩展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'
}]
于 2013-10-25T14:58:37.443 回答
1

此模型字段规范也可以帮助您：

Ext.define("ExampleModel",{
  extend: "Ext.data.Model",
  fields: [{
    name: 'checked',
    type: 'boolean', 
    convert: function(v,rec) {
      return !rec.isLeaf() ? null : rec.data.checked; 
    }
  }]        
});
于 2014-03-22T13:12:46.573 回答
0

简单的解决方案是使用 2 种不同的模型。一个用于您的父节点，其中没有名为“已检查”的字段。

Ext.define('App.model.Parent', {
    extend: 'Ext.data.TreeModel',
    fields: [{
        name: 'title'
    }]
});

一个用于确实具有名为“已检查”的字段的子节点。

Ext.define('App.model.Child', {
    extend: 'Ext.data.TreeModel',
    fields: [{
        name: 'checked',
        type: 'boolean'
    },{
        name: 'title'
    }]
});

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

于 2014-11-06T09:16:43.527 回答