Warum bricht Ext JS 3.0 mein Rasterfilter-Eingabefeld ab?

Question

Hier ist ein Code-Snippet eingefügt unmittelbar nach meinem Gitter zu schaffen, die unter 2,0 fein gearbeitet:

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

Jetzt bekomme ich einen JavaScript-Fehler auf der zweiten Aussage: „gridFilter null ist“.

Habe ich einen wichtigen Vorbehalt zur 3.0-Abwärtskompatibilität übersehen?

Dies wurde von Beispielcode auf der Ext JS Website angepasst, so dass ich nicht dachte, dass ich etwas schrecklich esoterisch tat.

Abgesehen von den oben genannten funktioniert gridToolbar gut, und das Eingabefeld, das der Symbolleiste in der ersten Zeile hinzugefügt wird, erscheint im Browser. Also ich denke, etwas muss grundlegend anders sein mit addDom() oder Ext.get(), die meinen Code bricht.

Answer 1

ich herausgefunden, wie es wieder funktioniert:

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

Dann anderswo, in der Mitte einer Ansichtsfenster Spezifikation:

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

schließlich nach dem Ansichtsfenster:

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

Answer 2

Da ich nicht alles von Ihrem Code sehen kann, ist mein Tipp, dass Ihr Code nicht respektiert, dass die Symbolleiste vor dem Aufruf von addDom() gerendert werden muss, und dass der Code "zufällig" in Ext2 gearbeitet hat. Ein Grund für diese Versionsinkompatibilität kann sein, wie sich das Rendering zwischen den Versionen von ext geändert hat. Was in Ext2 gerendert wurde, wurde möglicherweise noch nicht in Ext3 gerendert.

Beispiel zu beheben, dass Sie versuchen können:

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

});