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

然后，在其他地方，在Viewport规范的中间：

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

最后，在视口之后：

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

为什么Ext JS 3.0会破坏我的网格过滤器输入字段？

2 个答案: