为Interactive Grid工具栏添加Toggle按钮遇报错求助

问题根源 #

你的代码存在几个核心问题导致报错：

• Toggle控件缺少必填的icon属性，APEX工具栏的Toggle项必须指定图标才能完成正常渲染，缺失会触发内部逻辑错误
• 获取Grid实例的方式重复且未声明局部变量，造成全局变量污染
• 依赖focusElement.value判断Toggle状态的逻辑不可靠，APEX的Toggle状态应通过action自身的状态获取

修正后的完整代码 #

function(config) {
    let $           = apex.jQuery,
        toolbarData = $.apex.interactiveGrid.copyDefaultToolbar(),
        toolbarGroup = toolbarData.toolbarFind("actions4"),
        gridRegion; // 提前声明区域变量，避免重复调用

    // 为Toggle项补充必填属性，icon是核心必填项
    toolbarGroup.controls.push({
        type: "TOGGLE",
        action: "toggle-comment",
        icon: "fa-comment", // 可替换为你需要的FontAwesome图标
        label: "显示/隐藏评论列" // 可选：添加按钮 hover 时的提示文本
    });

    config.initActions = function(actions){
        actions.add({
            name: "toggle-comment",
            // 初始化时同步Toggle状态与列的初始可见性
            initialize: function(){
                gridRegion = apex.region("criteria-list");
                const gridView = gridRegion.call("getViews").grid;
                const isColumnVisible = gridView.view$.grid("isColumnVisible", "COMMENT_TEXT");
                this.setState({value: isColumnVisible});
            },
            action: function(event, element) {
                // 通过action自身状态获取Toggle当前选中状态
                const isChecked = this.state.value;
                const gridView = gridRegion.call("getViews").grid;
                
                isChecked 
                    ? gridView.view$.grid("showColumn", "COMMENT_TEXT")
                    : gridView.view$.grid("hideColumn", "COMMENT_TEXT");
            }
        });
    }

    config.toolbarData = toolbarData;
    return config;
}

关键修正说明 #

• 补充icon属性：这是解决c.get is not a function错误的核心，APEX工具栏控件渲染时会依赖图标属性完成DOM构建
• 使用action状态判断：通过this.state.value获取Toggle的选中状态，替代不可靠的focusElement.value
• 优化Grid实例获取：提前缓存区域实例，避免重复调用apex.region提升性能
• 添加状态初始化：页面加载时同步Toggle状态与列的初始可见性，确保交互一致性
• 声明局部变量：避免未声明的全局变量引发潜在冲突

内容的提问来源于stack exchange，提问作者Jason Bourne