[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1470
  • Last Modified:

Ext-JS 4.2 : conditional if else in combobox getInnerTpl

Hi experts
I am using Ext-Js 4.2 in my project.

I have a combobox but in its getInnerTpl i want to use  if - else conditional statement

{
		xtype : 'combo',
		queryMode: 'local',
		fieldLabel : 'Name',
		width: '250',
		store : 'BusinessNames',
listConfig :{
getInnerTpl : function(){
return '<div data-qtip="{status}">' +
	'<div class="blackcss">{status}</div>' +
}
},

Open in new window

The above code works.


What i want to do is
{
		xtype : 'combo',
		queryMode: 'local',
		fieldLabel : 'Name',
		width: '250',
		store : 'BusinessNames',
listConfig :{
getInnerTpl : function(){
return '<div data-qtip="{status}">' +
if(status == 'ACTIVE'){
'<div class="blackcss">{status}</div>' +
}else if(status == 'INACTIVE'){
'<div class="REDcss">{status}</div>' +
}else{
'<div class="GREENcss">{status}</div>' +
}
	
}
},

Open in new window

any idea how i can do that?

thanks
0
royjayd
Asked:
royjayd
  • 5
  • 5
2 Solutions
 
Randy PooleCommented:
{
		xtype : 'combo',
		queryMode: 'local',
		fieldLabel : 'Name',
		width: '250',
		store : 'BusinessNames',
listConfig :{
getInnerTpl : function(){
var o='';
if(status == 'ACTIVE'){
o='<div class="blackcss">{status}</div>';
}else if(status == 'INACTIVE'){
o='<div class="REDcss">{status}</div>';
}else{
o='<div class="GREENcss">{status}</div>';
}

return '<div data-qtip="{status}">' + o+'</div>';
	
}
},

Open in new window

0
 
leakim971PluritechnicianCommented:
You should use CSS :
{
	xtype : 'combo',
	queryMode: 'local',
	fieldLabel : 'Name',
	width: '250',
	store : 'BusinessNames',
	listConfig :{
		getInnerTpl : function() {
			var template = "";
			template += '<div data-qtip="{status}">';
			template += '<div class="blackcss">{status}</div>';
			template += '<div class="REDcss">{status}</div>';
			template += '<div class="GREENcss">{status}</div>';
			template += '</div>';
			return template;
		}
	}
},

Open in new window


and depending which one you want to display in your code somewhere in your code, when you can handle the change of the status

var els = Ext.DomQuery.select('.blackcss,.GREENcss,.REDcss');
for(var i=0;i<els.length;i++) {
     els[i].addClass("hideClass");
}
if(status == 'ACTIVE') {
    Ext.query(".blackcss")[0].removeClass("hideClass");
}
else if(status == 'INACTIVE') {
    Ext.query(".REDcss")[0].removeClass("hideClass");
}
else {
    Ext.query(".GREENcss")[0].removeClass("hideClass");
}

Open in new window


CSS :
hideClass {
    display:none !important;
}

Open in new window

0
 
royjaydAuthor Commented:
hi randy
Thanks for the reponse.
when i try your above sugession i get
Uncaught ReferenceError: status is not defined  on line >>if(status == 'ACTIVE'){

To get the value of status we do {status} but when i try something like
if({status} == 'ACTIVE'){  

i get an error.

any clue?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
royjaydAuthor Commented:
Thanks leakim971,
but i am getting an error >> status is not defined.
0
 
leakim971PluritechnicianCommented:
yes, where do you set it?
you should place the code in the same scope/section
0
 
royjaydAuthor Commented:
status is defined in Model which is accessed from the store  : 'BusinessNames'

My Store
Ext.define('common.BusinessNames', {
    extend: 'Ext.data.Store',
    model: 'common.BusinessNameModel',//Store uses model
    autoLoad : true,		
    proxy: {
        type: 'ajax',
        url: 'businessNameList.controller', 
		method:'GET',
		reader: {
            type : 'json',
			root : 'data',
			totalProperty : 'total',
			successProperty: 'success'
			
        }
    }
});

Open in new window


My Model

Ext.define('common.BusinessNameModel', {
    extend: 'Ext.data.Model',
    fields: ['firstName','lastName','status',        
        {
            name    : 'fullName', 
            convert : function (v, rec) {
               return rec.get('firstName') + ' ' + rec.get('lastName');
            }
        }]
});

Open in new window



and in my view i am doing
{
            xtype : 'combo',
            queryMode: 'local',
            fieldLabel : 'Name',
            width: '250',
            store : 'common.BusinessNames',
listConfig :{
getInnerTpl : function(){
var o='';
if(status == 'ACTIVE'){
o='<div class="blackcss">{status}</div>';
}else if(status == 'INACTIVE'){
o='<div class="REDcss">{status}</div>';
}else{
o='<div class="GREENcss">{status}</div>';
}

return '<div data-qtip="{status}">' + o+'</div>';
      
}
},
0
 
leakim971PluritechnicianCommented:
your view seems to be the wrong place to set the status
Now I see you're only adding different class but it's globally the same content to show with different style

What about something like :

{
	xtype : 'combo',
	queryMode: 'local',
	fieldLabel : 'Name',
	width: '250',
	store : 'BusinessNames',
	listConfig :{
		getInnerTpl : function() {
			var template = "";
			template += '<div data-qtip="{status}">';
			template += '<div class="{status}css">{status}</div>';
			template += '</div>';
			return template;
		}
	}
},

Open in new window


so instead having blackcss, REDcss and GREENcss you have : ACTIVEcss,INACTIVEcss and css
0
 
royjaydAuthor Commented:
thanks , that was pretty good solution.
Just curious why you feel view is wrong place to set the status. where should the status be set?
thanks
0
 
leakim971PluritechnicianCommented:
view is view, you should not put any logic here
0
 
royjaydAuthor Commented:
Ok so I should move that if else logic to the store , correct?
0
 
leakim971PluritechnicianCommented:
it's just a suggestion...
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now