Search code examples
javascriptextjsextjs4

What is a good way to show required symbol with tab title of ExtJS TabPanel?

I have few tabs in a dialog. Each of them have at least one required field. I can easily show asterisk symbol with those fields using ExtJS allowBlack property but that property doesn't work for tab titles of ExtJS TabPanel.

What is a good way to show the required / asterisk symbol in red beside title of each tab so that the user knows the tabs which contain mandatory items?

Solution

  • You will need some programming to get that to work the way you want.

    Basically what you need, is to check if the form has required fields (allowBlank: false) and add an asterisk to it. If you want to make it a little more responsive, you can add a validitychange listener to add and remove the * from the title as you type.

    You can play around with the CSS to add/remove styles as you do this.

    Here is an example: https://fiddle.sencha.com/#view/editor&fiddle/21mu

    Note: This example is set to work with ExtJS 6, so you will need to adapt it to ExtJS 4.

    Note 2: This example contains an override to add/remove the required attribute in order to make it easier to dealing with CSS validations, but it's not necessary for what you want.