使用 ExtJS TabPanel 的选项卡标题显示所需符号的好方法是什么?
What is a good way to show required symbol with tab title of ExtJS TabPanel?
我在对话框中只有几个选项卡。他们每个人都有至少一个必填字段。我可以使用 ExtJS allowBlack 属性 轻松地在这些字段中显示星号,但是 属性 不适用于 ExtJS TabPanel 的选项卡标题。
在每个选项卡的标题旁边以红色显示必填/星号符号以便用户知道包含必填项的选项卡的好方法是什么?
您需要进行一些编程才能使其按您希望的方式工作。
基本上您需要的是检查 form
是否包含必填字段 (allowBlank: false
) 并为其添加一个星号。
如果你想让它的响应更快一些,你可以添加一个 validitychange
侦听器来在你键入时添加和删除标题中的 *。
您可以在执行此操作时使用 CSS 到 add/remove 样式。
这里有一个例子:https://fiddle.sencha.com/#view/editor&fiddle/21mu
注意:此示例设置为使用 ExtJS 6,因此您需要将其调整为 ExtJS 4。
注意 2: 此示例包含对 add/remove required
属性的覆盖,以便更容易处理 CSS验证,但这不是你想要的。
我在对话框中只有几个选项卡。他们每个人都有至少一个必填字段。我可以使用 ExtJS allowBlack 属性 轻松地在这些字段中显示星号,但是 属性 不适用于 ExtJS TabPanel 的选项卡标题。
在每个选项卡的标题旁边以红色显示必填/星号符号以便用户知道包含必填项的选项卡的好方法是什么?
您需要进行一些编程才能使其按您希望的方式工作。
基本上您需要的是检查 form
是否包含必填字段 (allowBlank: false
) 并为其添加一个星号。
如果你想让它的响应更快一些,你可以添加一个 validitychange
侦听器来在你键入时添加和删除标题中的 *。
您可以在执行此操作时使用 CSS 到 add/remove 样式。
这里有一个例子:https://fiddle.sencha.com/#view/editor&fiddle/21mu
注意:此示例设置为使用 ExtJS 6,因此您需要将其调整为 ExtJS 4。
注意 2: 此示例包含对 add/remove required
属性的覆盖,以便更容易处理 CSS验证,但这不是你想要的。