Why does Ext JS 3.0 break my grid filter input field?

Question

Here's a snippet of code, inserted immediately after creating my grid, that worked fine under 2.0:

var gridFilter = Ext.get(gridToolbar.addDom({ tag: "input", 
    type: "text", 
    size: "25", 
    value: "", 
    cls: "x-grid-filter"}).el);
gridFilter.on("focus", function(){this.dom.select();});

Now, I get a JavaScript error on the second statement: "gridFilter is null".

Did I miss some important caveat about 3.0 backward-compatibility?

This was adapted from sample code found on the Ext JS site, so I didn't think I was doing something terribly esoteric.

Other than the above, gridToolbar is working fine, and the input field being added to the toolbar in the first line does appear in the browser. So I think something must be fundamentally different with addDom() or Ext.get() that is breaking my code.

Answer 1

As I can not see all of your code, my guess is that your code does not respect that the toolbar has to be rendered before calling addDom(), and that the code worked "by accident" in Ext2. A reason for this version incompatibility can be how rendering has changed between the versions of ext. What had rendered in Ext2, might not have yet rendered in Ext3.

Example fix that you can try:

gridToolbar.on("render", function() {

 var gridFilter = Ext.get(gridToolbar.addDom({ tag: "input", 
     type: "text", 
     size: "25", 
     value: "", 
     cls: "x-grid-filter"}).el);

 gridFilter.on("focus", function(){this.dom.select();});

});

Answer 2

I figured out how to make it work again:

function getGridFilterBox(filterid, width, defaultvalue) {
 // Returns a basic filter box that can be used to filter a grid
 return {
  id: filterid,
  tag: 'input',
  type: 'text',
  size: width || 25,
  value: defaultvalue || '',
  cls: 'x-grid-filter'
  }
 }

function SetupGridFilter(filterid, gridToReload, ds) {
 // Sets up the keyboard and parameter filtering for a basic filter box on a grid toolbar
 var filter = Ext.get(filterid);
 filter.on('keyup', function(e) {
  var key = e.getKey(); // ENTER key filters, as does backspace or delete if the value is blank
  if((key== e.ENTER)||((key == e.BACKSPACE || key == e.DELETE) && this.getValue().length == 0)) { reloadGrid(gridToReload); }
  });
 filter.on('focus', function(){this.dom.select();}); // setup an onfocus event handler to cause the text in the field to be selected
 ds.on('beforeload', function() { ds.baseParams.searchPhrase = filter.getValue(); });
 }

Then, elsewhere, in the middle of a Viewport specification:

thisGrid = new Ext.grid.GridPanel({
   tbar: new Ext.Toolbar({items: ["-",
       getGridFilterBox("myfilter")] }),
   })

Finally, after the Viewport:

thisGrid.show();
SetupGridFilter("myfilter", thisGrid, gridData);