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

を今、私は2番目の文にJavaScriptエラーが出ます：「gridFilterがnullです」。

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")] }), 
    }) 

最後に、ビューポートの後：

Answer 2

あなたのコードのすべてを見ることができないので、私の推測では、あなたのコードはaddDom（）を呼び出す前にツールバーをレンダリングしなければならないと思っています。このバージョンの非互換性の理由は、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();}); 

});