爲什麼Ext JS 3.0會破壞我的網格過濾器輸入域？

Question

這裏有一小段代碼，創建我網後立即插入，即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();}); 

現在，我得到了第二份聲明JavaScript錯誤：「gridFilter爲空」。

我是否錯過了關於3.0向後兼容性的一些重要警告？

這是從Ext JS網站上找到的示例代碼改編而來的，所以我不認爲我正在做一些非常深奧的事情。

除上述以外，gridToolbar工作正常，並且輸入框被添加到工具欄中的第一行確實出現在瀏覽器中。所以我認爲addDom（）或Ext.get（）會破壞我的代碼，所以一定有根本的不同。

Answer 1

我想通了，如何使它重新工作：

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(); }); 
    } 

然後，在其他地方，在視口中規範的中間：

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

最後，在視口之後：

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

Answer 2

由於我看不到所有的代碼，我猜測你的代碼並不尊重在調用addDom（）之前必須呈現工具欄，並且代碼在Ext2中「偶然」工作。這種版本不兼容的原因可能是渲染版本之間的變化。在Ext2中渲染的內容可能還沒有在Ext3中渲染。

例修復，您可以嘗試：

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();}); 

});