Javascript 高级选项卡面板向导

我正在使用一个相当高级的

选项卡面板

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

我遇到的主要问题是，一个未渲染的选项卡认为它是有效的，而实际上，它的字段设置为

allowBlank:false

，并且它有一个空值。然后是相反的，我有一个值集，但它认为它是无效的

另一个怪癖是，当选项卡面板加载时，我必须调用

this.getViewModel（）.notify（）

。。。否则，当我检查初始有效性时，我激活的表单认为它无效。。。虽然，我相信这与绑定和延迟有关，所以我现在可以处理这个问题

我可以使用

deferredRender:false

来解决这个问题，但我不想这样做，因为在我的实际应用程序中，每个选项卡中都有相当多的内容，所以性能不是很好

，您将看到3个选项卡已启用，而事实上，应该有4个选项卡已启用，因为第3个选项卡具有来自其模型的数据，但该选项卡认为它无效。因为选项卡认为它无效，所以它会重新激发我的checkValidity方法，因为我检查isValid是否为false（这是为了在当前选项卡无效时禁用右侧的任何选项卡，并且用户被迫点击continue，这是出于设计）。在控制台中：

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

---

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

之所以会这样，是因为视图模型和绑定并不像您想象的那样

首先-创建如下字段时：

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

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

这样做的最终结果是，当您检查选项卡3的有效性时，它失败了，因为的值尚未绑定。如果将第24行的log语句更改为以下内容，则可以更清楚地看到这一点：

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

通过此更改，首次渲染选项卡面板时，将获得以下输出（无注释）：

请注意，如果不调用

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无效（尚未绑定数据），因此未启用TAB4

如果未调用

viewModel.notify（）

，则在第一次调用

checkValidity（）

期间，选项卡1还没有数据绑定。因此，它是无效的（它有字段，但没有值），并且没有启用tab2等

所有的有效性最终都会得到解决，但您只会在从true更改为false时检查状态，而不是从false更改为true。这就是你所看到的行为

---

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

感谢您在那里完成了整个调试过程。。。这就是我想发生的事情。但问题是，如果表单有一个allowBlank:false的字段和一个空值，那么表单就不应该有效。。。这才是真正奇怪的。根据设计，应该说它是无效的，所以tab4也应该是无效的。false变为true的问题是，它会触发很多次（由于调用了isValid），并且这不是所需的行为，因为其他选项卡可能在选项卡无效后变为启用状态。该表单对于一个字段无效，该字段在其值为空时不允许空值。这就是tab3无效的原因。问题是表单在构建和呈现之前根本没有字段。字段为零的表单是有效的。Robert，使用该逻辑，tab3尚未呈现，因此它应该仍然有效。请查看调试。呈现Tab1。这将触发对

checkValidity（）

的调用。表1是有效的。因此，检查表2的有效性。这将加载表单，但不会加载viewModel。这对tab2没关系，所以它是有效的，tab3被选中。Tab3已加载到（sans viewModel），但无效-它有字段，但没有数据。这将禁用tab4。然后，Tab4被实例化，并且在获取字段之前是有效的，而在需要获取字段之前是无效的（例如，通过呈现或对其调用isValid（））。视图模型稍后会出现，使所有内容都有效-但您不会重置禁用状态。渲染是一个将加载到表单字段中的事件。调用

isValid（）。这里的要点是，您的表单还没有数据-修复它，您的问题就会消失。
afterrender
activate
checking
tab2 Object {} false true
tab3 Object {} false true
tab4 Object {} false true
tab1 Object {value: "blah"} true true