如何在ExtJS 7.1 Modern版中禁止树形列表节点的点击与选中

在ExtJS 7.1 Modern版本中，TreeList的disabled属性对节点无效，要禁用特定节点（如你提到的红色文本节点）的点击和选中操作，可通过以下方式实现：

1. 给目标节点添加自定义标识字段 #

在TreeStore的节点数据中，给需要禁用的节点添加一个自定义字段（比如isDisabled），用来标记该节点是否禁用：

const treeStore = Ext.create('Ext.data.TreeStore', {
    root: {
        text: 'All',
        expanded: true,
        children: [
            { text: '可操作节点', leaf: true },
            { text: '红色文本节点', leaf: true, isDisabled: true }, // 标记为禁用
            { text: '另一个红色文本节点', leaf: true, isDisabled: true }
        ]
    }
});

2. 阻止节点选中行为 #

监听TreeList的beforeselect事件，当选中的是禁用节点时返回false，阻止选中操作：

const treeList = Ext.create('Ext.tree.List', {
    store: treeStore,
    renderTo: Ext.getBody(),
    listeners: {
        beforeselect: function(tree, record) {
            // 判断当前节点是否被标记为禁用
            if (record.get('isDisabled')) {
                return false;
            }
        }
    }
});

3. 阻止节点点击行为 #

通过监听itemtap事件或重写TreeList的onItemTap方法，阻止禁用节点的点击响应：

方法一：监听itemtap事件 #

treeList.on('itemtap', function(tree, location) {
    const record = location.record;
    if (record.get('isDisabled')) {
        return false; // 阻止后续点击逻辑执行
    }
});

方法二：重写onItemTap方法 #

如果需要全局复用这个逻辑，可以自定义TreeList组件：

Ext.define('App.view.tree.DisabledAwareTreeList', {
    extend: 'Ext.tree.List',
    alias: 'widget.disabledawaretreelist',

    onItemTap: function(location) {
        const record = location.record;
        // 若节点禁用，直接返回不执行父类逻辑
        if (record.get('isDisabled')) {
            return;
        }
        this.callParent([location]);
    }
});

// 使用自定义组件
const treeList = Ext.create('App.view.tree.DisabledAwareTreeList', {
    store: treeStore,
    renderTo: Ext.getBody(),
    listeners: {
        beforeselect: function(tree, record) {
            return !record.get('isDisabled');
        }
    }
});

4. 添加禁用节点的视觉样式 #

通过itemConfig给禁用节点添加CSS类，让用户直观识别不可操作的节点：

const treeList = Ext.create('Ext.tree.List', {
    // ...其他配置
    itemConfig: {
        viewModel: true,
        cls: function(data) {
            return data.isDisabled ? 'disabled-tree-node' : '';
        }
    }
});

对应的CSS样式：

.disabled-tree-node {
    color: #999; /* 灰色文本模拟禁用状态 */
    cursor: not-allowed; /* 鼠标变为禁止样式 */
}

内容的提问来源于stack exchange，提问作者Raj Gandhi