[CLOSED] Disable items of combobox and reenable them based on condition

[PriceRightHTML5team]

I need to disable item with "Revenue" text on load of my view and based on some conditon re-enable it.

Here's what i have implemented:

                            X.ComboBox().ID("CmbMetric").Items(
                             X.ListItem().Text("Price").Value("1"),
                            X.ListItem().Text("Revenue").Value("2")
                        ).SelectedItems(X.ListItem().Value("1")).FieldLabel("Metric").LabelWidth(70)
                       .ListConfig(
                       X.BoundList().Tpl(
                       X.XTemplate().Html(" <div {[getAttributes(values.disabled)]}>{text}</div> ")
                       )
                       )
                                .Listeners(l => l.BeforeSelect.Handler = "return !record.data.disabled;")
                      )

and the script contains:

 var getAttributes = function (disabled) {

        var cls = "class='x-combo-list-item";
        if (!disabled) {
            return cls + "'";
        } else {
            return cls + " disabled-item'";
        }
    }

But it is not working.What is that i am doing wrong

[Daniil]

Hi @PriceRightHTML5team,

I think the Tpl is incorrect.

Here is a working example.
http://forums.ext.net/showthread.php?23388#post102128

[PriceRightHTML5team]

Hi @PriceRightHTML5team,

I think the Tpl is incorrect.

Here is a working example.
http://forums.ext.net/showthread.php?23388#post102128

I tried what's in the link but it doesn't work.Below is my code:

X.ComboBox().ID("CmbMetric").Items(
                             X.ListItem().Text("Price").Value("1"),
                            X.ListItem().Text("Revenue").Value("2")
                        ).SelectedItems(X.ListItem().Value("1")).FieldLabel("Metric").LabelWidth(70)
                         .ListConfig(
                               X.BoundList().Tpl( 
                               X.XTemplate().Html(@" <ul class='x-list-plain'>
                            <tpl for='.'>
                                <li role='option' class='x-boundlist-item <tpl if='disabled'>disabled-item</tpl>'>
                                    {text}
                                </li>
                            </tpl>
                        </ul>")
                               )
                               )
                       .Listeners(l => l.BeforeSelect.Handler = "return !record.data.disabled;")

[Daniil]

In your specific test case you should replace

{text}

with

{field2}

"field2" is a ComboBox's DisplayField by default.

Also this

if='disabled'

assumes that a ComboBox's Store has a "disabled" ModelField in its Model. A default ComboBox's Store doesn't have such a ModelField.

[PriceRightHTML5team]

I changed it to {field2} and remove the if condition from template.
Here's what i get



"Revenue" option looks disable but it is still selectable

what i need is if the Option is "Snapshot" in time basis dropdown . "Revenue" option should be disabled and not selectable.
If any other option is selected it should be enabled.

Please let me know how to configure the dropdown

[Daniil]

Please provide a test case to reproduce.

[PriceRightHTML5team]

Please provide a test case to reproduce.

Below is my code:

Snapshot Combo:

X.ComboBox().ID("CmbTimeBasis")
                                   .LabelCls("fieldLabelTop")
                                   .Items(
                                          X.ListItem().Text("Snapshot").Value("1"),
                                          X.ListItem().Text("Trend").Value("2")
                                          )

Metric Combo:

X.ComboBox().ID("CmbMetric")
                            .Items(X.ListItem().Text("Price").Value("1"),
                                   X.ListItem().Text("Revenue").Value("2")
                                  )
                            .SelectedItems(X.ListItem().Value("1"))
                             .ListConfig(
                               X.BoundList().Tpl(
                               X.XTemplate().Html(@" <ul class='x-list-plain'>
                            <tpl for='.'>
                                <li role='option' class='x-boundlist-item <tpl>disabled-item</tpl>'>
                                   {field2}
                                </li>
                            </tpl>
                        </ul>")))
                            .FieldLabel(PR.Resources.RP.RP.RSCmbMetric)

When i use the above code the Price and Revenue both the options gets the style applied but are still selectable.
What i need is on "Snapshot" option "Revenue" should be disabled. When i select "Trend" in the snapshot combo "Revenue" should be enabled.

Can you please tell me how my script should be.

thanks

[PriceRightHTML5team]

Here's what i have implemented so far:

X.ComboBox().ID("CmbMetric")
                            .Listeners(ls => ls.Select.Handler  = @"App.CmbMetric.setValue('1')")
                            .Items(X.ListItem().Text("Price").Value("1"),
                                   X.ListItem().Text("Revenue").Value("2")
                                  )
                            .SelectedItems(X.ListItem().Value("1"))
                             .ListConfig(
                               X.BoundList().Tpl(
                               X.XTemplate().Html(@" <ul class='x-list-plain'>
                            <tpl for='.'>
                               <li role='option' class='x-boundlist-item <tpl if='field1==2'>disabled-item</tpl>'>
                                   {field2}
                                </li>
                            </tpl>
                        </ul>")))

i checked if field1 =2 then add the class. Which works fine. But i need to re-enable the same li based on the condition.
How can i remove the class that is applied on li.

Please let me know its urgent

[Daniil]

I recommend to configure a Store for the ComboBox instead of using the ComboBox's Items. Put, for example, a "disabled" ModelField into the Store's Model and use it in the Tpl. Then, to manage disabled status on the fly, just change a record's "disabled" ModelField.

It all is presented in the example that I mentioned.

Here is a working example.
http://forums.ext.net/showthread.php?23388#post102128

[PriceRightHTML5team]

Its working with combo box item.
I can add disabled-item class only on the "Revenue" field., but when i change the some other option i need to remove the class.

How can i achieve with ExtJs

Below is my code

 X.ComboBox().ID("CmbMetric")
                            //.Listeners(ls => ls.Select.Handler  = @"handle()")
                            .Items(X.ListItem().Text("Price").Value("1"),
                                   X.ListItem().Text("Revenue").Value("2")
                                  )
                            .SelectedItems(X.ListItem().Value("1"))
                             .ListConfig(
                               X.BoundList().Tpl(
                               X.XTemplate().Html(@" <ul class='x-list-plain'>
                            <tpl for='.'>
                               <li role='option' class='x-boundlist-item <tpl if='field1==2'>disabled-item</tpl>'>
                                   {field2}
                                </li>
                            </tpl>
                        </ul>")))

In js i tried

Ext.get('.disabled-item')
but it is not working. How will i select the li element with the disabled-item class