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.

The log file contained the following …

!SESSION Thu Jan 14 16:42:24 CST 2010
------------------------------------------
!ENTRY org.eclipse.equinox.launcher 4 0 2010-01-14 16:42:24.080
!MESSAGE Exception launching the Eclipse Platform:
!STACK
java.lang.ClassNotFoundException:
org.eclipse.core.runtime.adaptor.EclipseStarter
	at java.net.URLClassLoader$1.run(URLClassLoader.java:200)
	at java.security.AccessController.doPrivileged(Native Method)
	at java.net.URLClassLoader.findClass(URLClassLoader.java:188)
	at java.lang.ClassLoader.loadClass(ClassLoader.java:316)
	at java.lang.ClassLoader.loadClass(ClassLoader.java:251)
	at org.eclipse.equinox.launcher.Main.invokeFramework(Main.java:556)
	at org.eclipse.equinox.launcher.Main.basicRun(Main.java:514)
	at org.eclipse.equinox.launcher.Main.run(Main.java:1311)

Well, luckily I was able to come up with a workaround.

For development I also use the Subversive and Maven Integration plugins so here is what I did. (This assumes you know how to install plugins via update sites)

1. Start with a fresh copy of Galileo
2. Add all the plugins without restarting Eclipse in the following order.
3. Add the GWT plugin from the update site
   1. http://dl.google.com/eclipse/plugin/3.5
4. Add the Subversive plugin and required SVN connectors from Polarion
   1. http://community.polarion.com/projects/subversive/download/eclipse/2.0/galileo-site/
5. Add the maven integration plugin
   1. http://m2eclipse.sonatype.org/update
6. After all the plugins are installed restart Eclipse.

And there you have it. Eclipse starts up without any problems.

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.

Here is what I ended up doing. It may not be pretty, but hey, its a sample.

I made a few updates to the CheckboxSelectionModel.js in order to properly update the checkbox in the Header row when a user manually (un)selects all the rows. This required that I comment out the CheckboxSelectionModel definition in the ext-all.js and include the CheckboxSelectionModel.js in my HTML. I updated the onMouseDown function as follows…

I also used the code from the URL http://extjs.com/forum/showthread.php?t=45723&highlight=getselectionmodel, however it too needed to be modified to update the Header checkbox.

I created a CheckBoxMemory.js with the following code and included it in my HTML…

I have not had a chance to really dive in ,but you will need to make sure that your RecordDef has a FieldDef with a name of “id”, example… new StringFieldDef(”id”, 0)

I then created the corresponding Java class as follows.

Then you just need to add the CheckBoxMemoryPlugin to the GridPanel. (This assumes that you already have set up a Local Paging Checkbox Grid Panel)

Anyway, I hope this helps someone else who may be looking to solve this.

I still need to update the code in order to be able to get the selected row IDs, but that is for another day.

Google Web Toolkit

My first task at Mersoft was to develop an ajax-rich web interface with a Java backend. I was told that it must be tabbed and was shown the existing interface which pretty much was just a file upload. The project was to keep the file upload plus have several tabs containing different types of reports generated from the file upload.

I was originally directed to Tibco’s GI. The GI has it’s own “Interface Builder” used to build the gui. Creating tabs using the builder was easy, but it looked like the only way the interface could talk to a server was through a web service. Also, I didn’t see anything that would allow me to do a file upload. I started looking at the source code, and it appeared difficult to customize and/or expand.

After doing some searching, I came across Google’s Web Toolkit (GWT). This uses Java code to build the interface and gets compiled to html and javascript. This even works with Eclipse. GWT was able to handle file uploading (although due to security issues, this had to be done with a form submit). I have been able to find lots of plugins, plus it has been very easy to expand most plugins and it seems easy to create my own plugin for GWT. Also, although I haven’t done this personally, it looks like it’s easy to integrate with a Javascript library, if the need ever arises. I was also able to integrate it with Struts 2.

I have looked at several other toolkits. Most of them required a lot of Javascript, even with the use of the toolkit. For me (a Java programmer), it is much easier writing code in Java than in Javascript. After reviewing the other frameworks and working with projects that do not use GWT, I highly recommend GWT and look forward to using it on future projects.