高级选项卡面板向导

Question

我有一个相当先进的TabPanel我正在开发的向导，我似乎无法让它正常运行。基本上，我有4个选项卡...每个选项卡都是自己的形式，因为选项卡需要对其自身进行验证，因此它可以确定是否需要禁用其右侧的选项卡，或者是否应启用下一个选项卡。

我遇到的主要问题是非呈现标签认为它是有效的，实际上，它的字段设置为allowBlank: false，并且它有一个空值。然后是相反的，我设置了一个值，但它认为它是无效的。

另一个怪癖是，我必须在调用面板加载时调用this.getViewModel().notify() ...否则，当我检查初始有效性时，我激活的表单认为它是无效的......尽管如此，我认为这与绑定有关延迟，所以我现在可以处理这个。

我可以使用deferredRender: false来解决这个问题，但我不想，因为在我的实际应用程序中，这些选项卡在每个选项卡上都有点不同，所以这不是很高效。

In my Fiddle，你会看到3个选项卡启用，实际上，它应该已经启用了4个选项卡，因为第3个选项卡有来自其模型的数据，但该选项卡认为它无效。由于该标签认为它是无效的，因此我重新启动了我的checkValidity方法，因为我检查isValid是否为false（这是为了禁用右侧的任何标签，如果当前标签变为无效，并且用户被迫继续，这是设计）。在控制台：

• TAB3认为这是无效的，因为它被设置为 allowBlank这是不正确的：假的，但它绑定了一个值
• TAB4会认为它是有效的，这是不正确的，因为它设置为allowBlank：false并且没有值

有没有人有任何见解？我是否在谈论这个可怕的错误？

Answer 1

发生这种情况是因为视图模型和绑定不执行您认为他们所做的事情。

第一 - 当你创建这样一个领域：

{ fieldLabel: 'Value3', xtype: 'textfield', name: 'value2', allowBlank: false, 
    bind: { value: '{model1.value2}' } 
} 

领域是没有价值最初创建。那是因为你没有定义任何价值 - 你已经限定了它。绑定不会立即生效。出于性能方面的原因，它通常不会被限制，直到呈现标签（这就是为什么不推迟渲染工作为什么）

这最终结果是，当您检查表3的有效性时，它失败因为尚未绑定的值。你可以看到这个更清楚，如果你改变线路24日志声明是这样的：

console.log(form.owner.title, form.getValues(), form.owner.rendered, isValid) 

随着这一变化，当你第一次呈现在标签面板，你得到这个输出（没有评论）：

afterrender // triggers the view model to notify. 
activate 
checking 
tab1 Object {value: "blah"} true true // Value bound because it was rendered. 
tab2 Object {value: ""} false true 
tab3 Object {value2: ""} false false // Value not bound because it is not rendered 
checking 
tab4 Object {} false true // No properties yet... 

需要注意的是，如果你不叫this.getViewModel().notify()，那么你会得到这样的输出：

afterrender 
activate 
checking 
tab2 Object {} false true 
tab3 Object {} false true 
tab4 Object {} false true 
tab1 Object {value: "blah"} true true 

注意不同的订单。

那么这里发生了什么？那么，首先 - 选项卡上的单个表单没有数据，直到字段值被绑定。没有字段时，它们被认为是有效的。

当您调用isValid时，它强制定义字段 - 但它们仍未绑定。所以他们没有价值，而在tab3的情况下，这使得它无效。由于tab3无效（尚未绑定数据），因此未启用选项卡4。

如果您不调用viewModel.notify()，那么在第一次调用checkValidity()期间，它没有数据约束的tab1。因此，它是无效的（它有字段，但没有值），tab2等没有启用。

有效性最终都会被整理出来 - 但是您只能在从true变为false时检查状态 - 不能为false。这给出了你看到的行为。

如何解决这个问题？可能有几种方法。可能最有效的方法是在面板的initComponent期间从viewModel中获取值，并在创建它们时将其明确分配给字段。这样，它们最初以正确的状态创建，并因此通过了有效性检查。