Question

我正在使用Ext JS中的一个应用程序，它使用树进行导航。在中心窗格（使用边框布局）中，我使用卡片视图。选择树上的节点会更改显示的卡。每张卡可能包含完全不同的组件。

到目前为止，这并不是很难做到。但这是问题所在。只有在满足某些条件时才会显示某些卡片。例如，我有一张卡，允许用户查看上传的CSV文件。当用户单击树中的“查看CSV文件”节点时，将显示此卡。但是，如果用户尚未上传CSV文件，并且他点击该节点，我想显示一张带有文件上传字段的卡片，以便用户可以上传CSV文件。

现在，我的控制器init中有以下内容：

this.control({
    'nav-tree': {
        select: {
           fn: function(model, record, index){
               record.handler();  
           },
           scope: this
        }
    }
})

record.handler()是我的模型中定义的函数，它从模型中读取属性cardId，并使用该ID将布局切换到卡片（它还会执行其他一些操作。）

我意识到我可以在我的处理函数中抛出一堆if语句来检查CSV文件是否已上传并加载相应的卡片，但我可以看到这种方法至少有两个缺点：

（1）它非常不优雅，而且（2）我正在检查的条件会变得更加复杂，使得if语句难以阅读并且难以管理。

我希望有一个更好的Ext JS友好解决方案来解决这个难题。

Answer 1

这绝对是应该在控制器中的代码，模型不应该决定要加载哪些视图。当然，您可以在模型上添加辅助函数来检索数据/检查数据条件，但任何决策都应该在控制器中进行。

Ext JS 4 - 树面板和条件卡显示

1 个答案: