4

How to apply conditions in bind?

In view let

{ xtype : 'label', bind : { text : '{//--- set text as per the condition }', hidden : '{//should be true if 'param' in VM is 1 or 2 else should be false}' } }

in view model, 'param' is a data variable. If value of

param=1, text should be one,

param=2, text should be two,

param=3, text should be three.

Is this possible without formula by applying conditions directly in view?

Ankita
  • 199
  • 3
  • 18
  • 1
    No, you need to use a formula. – Evan Trimboli Jan 16 '15 at 10:46
  • Another option you may have is, to bind the state to variable in the config. Bind the state to that config, then change it on the update function hook, depending on state – Vu Nguyen Jan 16 '15 at 19:38
  • 1
    You can find formulas that implement a "state" changing in [this example](http://extjs.eu/ext-examples/#complex-data-binding-5). – Saki Jan 17 '15 at 21:03

1 Answers1

-2
{
    xtype : 'label',
    bind : 
    {
        text : '{textVal}'==0?'Test':'TEST1234',
        hidden : ('{param}'==1 || '{param}'==2)?true:false
    }
}

In the associated viewModel, if one has the property param in data config, then one can use it for binding along with condition checks as mentioned above. If the param value is being changed dynamically, (i.e, this.getViewModel().setData('param', 1)) then still the code will work in hiding the component dynamically. The same applies with the other config, viewModel -> data:{textVal:0,param:1}. If one has an object inside the data, like data:{ config:{ textVal:0 }, param:1 }, One can use bind:{ text:'{config.textVal}' //along with ur condition check }

Adam
  • 2,422
  • 18
  • 29
Deepak P
  • 367
  • 2
  • 4
  • 2
    Add explanations to your answers and format your answer accordingly. – Adam Jul 28 '15 at 12:18
  • 1
    @Adam: Explanation -> Say in the associated viewModel, if u have the property "param" in data config, then u can use it for binding along with condition checks as mentioned above. if my param value is being changed dynamically, (i.e, this.getViewModel().setData('param', 1)) then still my code will work in hiding the component dynamically. Same applys with the other config. viewModel -> data:{textVal:0,param:1} if u have object inside the data, like data:{ config:{ textVal:0 }, param:1 }, You can use bind:{ text:'{config.textVal}' //along with ur condition check } – Deepak P Jul 28 '15 at 12:35
  • 4
    I don't understand how can expressions in the answer happen to work. Any `==` comparison would be always evaluated to false by javascript engine before being passed to extjs bind logic. – Vadzim Dec 29 '16 at 14:59
  • This doesn't work. – John Smith Feb 06 '22 at 00:40