I came across a strange bug that occurs when you place a combobox inside a toolbar. What happens is when you click the trigger the list appears as normal under the combobox, then, if you select an item and go back to click the trigger again the list moves to the top left hand corner of the viewport. You can clear the value in the combobox and click the trigger and the list appears where it should be again. A quick fix for this problem is to override the combobox and deselect the value before expanding the picker with the code below.

Update 1

After some more testing it looks like the dropdown worked perfectly in 4.0.2 and has been broken in 4.0.7, the correction that was posted originally did not handle the additional error that occurs when the user tries to type in the box after selecting a value, and did not take into account that you might actually want to remember and reset the selected value, a more complete override has been placed below to handle all of the inconsistencies in the dropdown. Remember this strange behavior appears to only take place when the combo box is placed inside the toolbar and after the user has selected the value, in other words, it’s easy to miss this error when testing your apps.

Ext.override(Ext.form.field.ComboBox, {
		onTriggerClick: function(){	
		 var me = this;
		 me.clearValue();
      	  if (!me.readOnly && !me.disabled) {
            if (me.isExpanded) {
                me.collapse();
            } else {
                me.expand();
            }
            me.inputEl.focus();
        }
	  },
	   onKeyUp: function(e, t) {
        var me = this,
            key = e.getKey(), 
		    rv = me.getRawValue();
        if (!me.readOnly && !me.disabled && me.editable) {
            me.lastKey = key;
            // we put this in a task so that we can cancel it if a user is
            // in and out before the queryDelay elapses
            // perform query w/ any normal key or backspace or delete
            if (!e.isSpecialKey() || key == e.BACKSPACE || key == e.DELETE) {
                me.clearValue();
                me.setRawValue(key_val);
                me.doQueryTask.delay(me.queryDelay);
            }
        }
        if (me.enableKeyEvents) {
            me.callParent(arguments);
        }
    }
});

Yes, you can still add multiple columns to a grouping grid, and it’s not that hard, you just have to look in the store!

To add a second or even third column to an extjs grid all you now have to is add the extra columns in the store’s getGroupString property. The code below illustrates the addition of a second value when the group string equals some_property.

var some_data_store = Ext.create('Ext.data.Store', {
     storeId:'some_data_store',
     groupField:'some_property',
    getGroupString: function(instance) {
	   var group = this.groupers.first();
  	   if (group) {
       	      if (group.property == 'some_property') {
		 return instance.get(group.property) + ' (' + instance.get('my_second_property') + ') ';
	    }
	  return instance.get(group.property);
		   }
		   return '';
		},
	model:'some_data_model',
	autoLoad:true,
	proxy: {
        	type: 'ajax',
        	url : 'some_url.php',
        	reader: {
            	type: 'json',
            	root: 'data'
        }
}
});