PDA

View Full Version : [CLOSED] Disable items of combobox and reenable them based on condition



PriceRightHTML5team
Jul 29, 2013, 1:03 PM
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
Jul 29, 2013, 2:00 PM
Hi @PriceRightHTML5team,

I think the Tpl is incorrect.

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

PriceRightHTML5team
Jul 30, 2013, 9:49 AM
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
Jul 30, 2013, 11:34 AM
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
Aug 13, 2013, 9:55 AM
I changed it to {field2} and remove the if condition from template.
Here's what i get

6743

"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
Aug 13, 2013, 5:42 PM
Please provide a test case to reproduce.

PriceRightHTML5team
Aug 14, 2013, 5:33 AM
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
Aug 14, 2013, 11:33 AM
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
Aug 14, 2013, 1:20 PM
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
Aug 14, 2013, 2:03 PM
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

Daniil
Aug 14, 2013, 2:51 PM
Well, something like this:

App.CmbMetric.getPicker().el.down("li.disabled-item").removeCls("disabled-item")

I would still strongly recommend to use a separate ModelField for that. If you get round a ComboBox's template (by the above code), the changes will be lost if the template gets refreshed.

PriceRightHTML5team
Sep 05, 2013, 7:24 AM
Well, something like this:

App.CmbMetric.getPicker().el.down("li.disabled-item").removeCls("disabled-item")

I would still strongly recommend to use a separate ModelField for that. If you get round a ComboBox's template (by the above code), the changes will be lost if the template gets refreshed.

Well this is working fine. But the issue is when i don't expand the CmbMetric dropdown and directly change the value from "SnapShot" to "Trend"

it gives me JS error " App.CmbMetric.getPicker().el" is undefined.

What might be the reason.Please let me know

Daniil
Sep 05, 2013, 7:27 AM
It means that a picker's el is not rendered before showing. So, there is no an HTML element which you need to modify.

PriceRightHTML5team
Sep 05, 2013, 7:47 AM
It means that a picker's el is not rendered before showing. So, there is no an HTML element which you need to modify.

Ok. So what is the workaround in this case

Daniil
Sep 05, 2013, 8:35 AM
I would apply the change in the template.

PriceRightHTML5team
Sep 05, 2013, 8:42 AM
I would apply the change in the template.

Is there any we can load that boundlist on init of dropdown.

Also Can you please provide with a snippet of how to apply change in the template

Daniil
Sep 05, 2013, 10:18 AM
I cannot see good ways to do that. Why do you not want to follow this suggestion?



I would still strongly recommend to use a separate ModelField for that. If you get round a ComboBox's template (by the above code), the changes will be lost if the template gets refreshed.

PriceRightHTML5team
Sep 05, 2013, 11:02 AM
I cannot see good ways to do that. Why do you not want to follow this suggestion?

Ok i will try the other method you recommended

Daniil
Sep 05, 2013, 11:21 AM
Way to go.

By the way, in another thread we are discussing the alternative which I recommend. For references:
http://forums.ext.net/showthread.php?26372&p=116881&viewfull=1#post116881