javascript - 高级选项卡面板向导

Question

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

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

另一个怪癖是，我必须在选项卡面板加载时调用 this.getViewModel().notify()...否则，当我检查初始有效性时，我激活的表单认为它无效。 .. 虽然，我相信这与绑定(bind)和延迟有关，所以我现在可以处理这个问题。

我可以使用 deferredRender: false 来解决这个问题，但我不想这样做，因为在我实际的应用程序中，每个选项卡都有相当多的内容，所以这不是非常高效。

In my Fiddle ，您会看到启用了 3 个选项卡，而实际上应该启用了 4 个选项卡，因为第 3 个选项卡具有来自其模型的数据，但选项卡认为它无效。因为该选项卡认为它无效，所以它重新触发我的 checkValidity 方法，因为我检查 isValid 是否为假(这是在当前选项卡无效时禁用右侧的任何选项卡，并且用户被迫点击继续，这是通过设计)。在控制台中:

• Tab3 认为它是无效的，这不是真的，因为它被设置为allowBlank: false，但它绑定(bind)了一个值
• Tab4 会认为它是有效的，这是不正确的，因为它被设置为 allowBlank: false 并且没有值

有没有人有什么见解？我这样做是不是大错特错了？

Answer 1

之所以会发生这种情况，是因为 View 模型和绑定(bind)并没有按照您的想法行事。

首先 - 当您创建这样的字段时:

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

该字段最初创建时没有值。那是因为你没有定义任何值——你已经绑定(bind)了它。并且绑定(bind)不会立即生效。出于性能原因，在呈现选项卡之前通常不会绑定(bind)它(这就是为什么不为您延迟呈现的原因)

这样做的最终结果是，当您检查选项卡 3 的有效性时，它失败了，因为尚未绑定(bind)值。如果将第 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

注意不同的顺序。

那么这里发生了什么？那么，首先 - 选项卡上的各个表单在绑定(bind)字段值之前没有数据。没有字段，它们被认为是有效的。

当您调用 isValid 时，它会强制定义字段 - 但它们仍未绑定(bind)。所以它们没有值(value)，在 tab3 的情况下，这使得它无效。因为 tab3 无效(还没有数据绑定(bind))，所以 tab 4 没有启用。

如果您不调用 viewModel.notify()，那么在第一次调用 checkValidity() 时，tab1 还没有数据绑定(bind)。因此，它是无效的(它有字段，但没有值)，并且未启用 tab2 等。

有效性最终都得到了解决——但你只检查从真到假时的状态——而不是从假到真。这给出了您看到的行为。

如何解决这个问题？大概有这么几种方法。可能最有效的方法是在面板的 initComponent 期间从 viewModel 中获取值，并在创建它们时将它们显式分配给字段。这样一开始它们就以正确的状态创建，从而通过了有效性检查。