為什么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為null”。

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

這是從Ext JS網站上的示例代碼改編而成的，因此我認為我所做的事情並不深奧。

除此之外，gridToolbar正常工作，並且第一行中添加到工具欄的輸入字段確實出現在瀏覽器中。 因此，我認為與addDom（）或Ext.get（）根本不同的是，它們破壞了我的代碼。

Answer 1

因為我看不到您的所有代碼，所以我猜測您的代碼不尊重在調用addDom（）之前必須呈現工具欄，並且代碼在Ext2中“偶然”起作用。 此版本不兼容的原因可能是ext版本之間的呈現方式發生了變化。 在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();});

});

Answer 2

我想出了如何使其再次起作用的方法：

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