I found this fix on the EXTJS forum, however the fix did not work when the user entered in their own value into the combo box.

To resolve this I changed 2 lines of code from the fix I found.

I modified…

this.startValue = this.getValue();

to

this.startValue = this.getRawValue();

and

var v = this.getValue();

to

var v = this.getRawValue();

So here is the entire code for the updated fix…

Ext.override(Ext.form.Field, {
 onFocus : function() {
 if (!Ext.isOpera) { // don't touch in Opera
 this.el.addClass(this.focusClass);
 }
 if (!this.hasFocus) {
 this.hasFocus = true;
 this.startValue = this.getRawValue();
 this.fireEvent("focus", this);
 }
 },

 onBlur : function() {
 this.beforeBlur();
 this.el.removeClass(this.focusClass);
 this.hasFocus = false;
 if (this.validationEvent !== false && this.validateOnBlur && this.validationEvent != "blur") {
 this.validate();
 }
 var v = this.getRawValue();
 if (String(v) !== String(this.startValue)) {
 this.fireEvent('change', this, v, this.startValue);
 }
 this.fireEvent("blur", this);
 }
 });

I hope this helps someone out there who may be having the same problem I had.

Note: This post does not cover the creation of the TabPanel, Toolbar and ToolbarButton with a Menu.

Step 1: Override the Ext.TabPanel. (Note: This was just added to a JavaScript file I added to my application. I did not modify the ext-all.js file)

Ext.override(Ext.TabPanel, {

  hideTabStripItem : function(item){
    //Don't hide if its the last tab
    var cnt = this.items.length;
    var visibleTabs = 0;
    for(var i = 0; i < cnt; i++ ){
      if(!this.isTabStripItemHidden(i)){
        visibleTabs++;
      }
    }
    if(visibleTabs > 1){
      item = this.getComponent(item);
      var isactive = (item == this.activeTab);	    

      var el = this.getTabEl(item);
      if(el){
        el.style.display = 'none';
          this.delegateUpdates();
      }

      if(isactive){
        //Set the next visible tab active
        var curIndx = 0;
        var indx = 0;
        for(var i = 0; i < cnt; i++ ){
          var tab = this.getComponent(i);
          if(tab.id == item.id){
            curIndx = i;
            break;
          }
        }

        //Check for the next available tab
        for(var i = (curIndx+1); i < cnt; i++ ){
          if(!this.isTabStripItemHidden(i)){
            indx = i;
            break;
          }
        }

        if(indx == 0){
          //Check for a tab before the current one
          for(var i = 0; i < curIndx; i++ ){
            if(!this.isTabStripItemHidden(i)){
              indx = i;
              break;
            }
          }
        }

        this.setActiveTab(indx);
      }
    }
    if(visibleTabs == 1){
      throw "Could not hide the tab";
    }
  },

  unhideTabStripItem : function(item){
    item = this.getComponent(item);
    var el = this.getTabEl(item);
    if(el){
      el.style.display = '';
      this.delegateUpdates();
    }

    this.setActiveTab(item);
  },

  isTabStripItemHidden : function(item){
    item = this.getComponent(item);
    var el = this.getTabEl(item);
    if(el){
      return el.style.display == 'none';
    }
    //return true since it does not exist.
    return true;
  }
});

Step 2: Create a CheckItem with a listener to show/hide the tab (add it to a ToolbarButton’s Menu).

public CheckItem createTabCheckItem(String menuTitle, final String tabId, final TabPanel tabPanel){
  CheckItem ci = new CheckItem(menuTitle);
  ci.addListener(new CheckItemListenerAdapter() {
    public void onCheckChange(CheckItem item, boolean checked) {
      if (checked) {
        tabPanel.unhideTabStripItem(tabId);
      } else {
        try {
          tabPanel.hideTabStripItem(tabId);
        } catch (Exception e) {
          item.setChecked(true);
        }
      }
    }
  });
  ci.setHideOnClick(false);
  return ci;
}

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.