Mersoft Corporation Blog

I have been working on an application that required the ability to disable ComboBox options. I googled to see if someone else had already done this and I found the following post. I used the code from the post as a starting point and added additional code to flush out a few more features.
The main features I added dealt with the option selecting itself, such as using the up and down keys to select options. In order to tie everything together I have posted all the critical code in its entirety to avoid confusion.

To start off with I added the following to a JavaScript file that I included in my application. The main difference from this code and the code from the original post above is the addition of the selectNext and selectPrev overrides. I also had to modify the onViewClick override since I was using Strings instead of booleans for the selectable value (see the SimpleStore created later).

Ext.override(Ext.form.ComboBox, {

  tpl: '<tpl for=".">' +
    '<div class="x-combo-list-item <tpl if="selectable == \'false\'">x-combo-list-item-unsel</tpl> ">' +
    '<img src="{image}"> ' +
    '{text}<div class="x-clear"></div></div>' +
    '</tpl>',

    // private

    onViewClick : function(doFocus){

        var index = this.view.getSelectedIndexes()[0];
        var r = this.store.getAt(index);
        var sel = r.get('selectable');
        if(sel && sel == 'false'){
            return;
        }

        if(r){
            this.onSelect(r, index);
        }

        if(doFocus !== false){
            this.el.focus();
        }
    },

    selectNext : function(){
        var ct = this.store.getCount();
        if(ct > 0){
        	var hasSelectable = this.store.getAt(0).get('selectable');

        	if(hasSelectable){
        		//check for selectable records
        		//Get the next selectable record
        		var currentIndex = this.selectedIndex;
        		var nextIndex = currentIndex;

        		while(true){
        			if(nextIndex < ct-1){
        				var r = this.store.getAt(++nextIndex);
        				if(r.get('selectable') == 'true'){
        					break;
        				}
        			}else{
        				break;
        			}
        		}

        		this.select(nextIndex);
        	}else{
        		//select the original way
        		if(this.selectedIndex == -1){
                    this.select(0);
                }else if(this.selectedIndex < ct-1){                     this.select(this.selectedIndex+1);                 }         	}         }     },     selectPrev : function(){         var ct = this.store.getCount();         if(ct > 0){
        	var hasSelectable = this.store.getAt(0).get('selectable');

        	if(hasSelectable){
	        	//Get the next selectable record
	        	var currentIndex = this.selectedIndex;
	        	var nextIndex = currentIndex;

				while(true){
					if(nextIndex != -1){
						var r = this.store.getAt(--nextIndex);
						if(r.get('selectable') == 'true'){
							break;
						}
					}else{
						break;
					}
				}

				this.select(nextIndex);
        	}else{
        		//select the original way
        		if(this.selectedIndex == -1){
                    this.select(0);
                }else if(this.selectedIndex != 0){
                    this.select(this.selectedIndex-1);
                }
        	}
        }
    },
}    

);

I then added the following CSS class to my application’s CSS file…

.x-combo-list-item-unsel{
  -moz-opacity:0.5;
  opacity: .50;
  filter:alpha(opacity=50);
}

And now for some java code.

I created the Store for my ComboBox with the following code. If you read the JavaScript code above you will notice that it depends on the Records in the Store having the “selectable” attribute.

Note: The getOptions() method is coming up next.

final Store store = new SimpleStore(new String[]{"image", "text", "value", "selectable"}, getOptions(false));
store.load();

In my application I needed to be able to reverse the disabled options so I created the following method to generate the Object array used for my Store.

private Object[][] getOptions(boolean isDisabled){
  Object[][] results = new Object[][]{
    new Object[]{"images/image1.gif", "Option 1", "VALUE1", !isDisabled},
    new Object[]{"images/image2.gif", "Option 2", "VALUE2", !isDisabled},
    new Object[]{"images/image3.gif", "Option 3", "VALUE3", isDisabled},
    new Object[]{"images/image4.gif", "Option 4", "VALUE4", !isDisabled},
    new Object[]{"images/image5.gif", "Option 5", "VALUE5", !isDisabled}
  };

  return results;
}

Then in a listener on a TextField I added the following code to switch the disabled options…

Store store = combobox.getStore();
store.removeAll();
store.add(getOptionRecords(true));  //Note: send true or false depending on which options you want disabled.

Here is the getOptionRecords() method used in the code above…

private static Record[] getOptionRecords(boolean isDisabled){
  Store store = new SimpleStore(new String[]{"image", "text", "value", "selectable"}, getPhoneLabels(isDisabled));
  store.load();
  return store.getRecords();
}

I hope that this post helps someone out.