Extjs 6 - grid search

Question

I try to apply this example with another way. When I try it on console.log it seems run without error but when I do it on function(){}, it turns error all grid method is undefined such:

Uncaught TypeError: Cannot call method 'getView' of undefine.

The function:

onTextFieldChange = function () {
        var grid = Ext.getCmp('grid'),
                value = Ext.getCmp('gridfield'),
                view = grid.getView(),
                columns = grid.getColumns();
        view.refresh();
        grid.searchValue = value.getValue();
        grid.matches = [];
        grid.currentIndex = null;
        if (grid.searchValue !== null) {
            grid.store.each(function (record, index) {
                var node = view.getNode(record),
                        count = 0;
                if (node) {
                    Ext.Array.forEach(columns, function (column) {
                        var cell = Ext.fly(node).down(column.getCellInnerSelector(), true),
                                matches,
                                cellHTML,
                                seen;
                        if (cell) {
                            matches = cell.innerHTML.match(grid.tagsRe);
                            cellHTML = cell.innerHTML.replace(grid.tagsRe, grid.tagsProtect);
                            cellHTML = cellHTML.replace(grid.searchRegExp, function (m) {
                                ++count;
                                if (!seen) {
                                    grid.matches.push({
                                        record: record,
                                        column: column
                                    });
                                    seen = true;
                                }
                                return '<span class="' + grid.matchCls + '" style="font-weight: bold;background-color: yellow;">' + m + '</span>';
                            }, grid);
                            Ext.each(matches, function (match) {
                                cellHTML = cellHTML.replace(grid.tagsProtect, match);
                            });
                            // update cell html
                            cell.innerHTML = cellHTML;
                        }
                    });
                }
            });
        }
    };

The event:

xtype: 'textfield',
name: 'searchField',
id: 'txtfield',
hideLabel: true,
width: 200,
change: onTextFieldChange()

Any suggestions?

Answer 1

I answer my own question if there is none, this is onTextFieldChange() method

   onTextFieldChange = function () {
        var me = Ext.getCmp('grid'),
                count = 0;
        me.view.refresh();
        me.searchValue = getSearchValue();
        me.indexes = [];
        me.currentIndex = null;

        if (me.searchValue !== null) {
            me.searchRegExp = new RegExp(me.searchValue, 'g' + (me.caseSensitive ? '' : 'i'));

        me.store.each(function (record, idx) {
            var td = Ext.fly(me.view.getNode(idx)).down('td'),
                    cell, matches, cellHTML;
            while (td) {
                cell = td.down('.x-grid-cell-inner');
                matches = cell.dom.innerHTML.match(me.tagsRe);
                cellHTML = cell.dom.innerHTML.replace(me.tagsRe, me.tagsProtect);

                // populate indexes array, set currentIndex, and replace wrap matched string in a span
                cellHTML = cellHTML.replace(me.searchRegExp, function (m) {
                    count += 1;
                    if (Ext.Array.indexOf(me.indexes, idx) === -1) {
                        me.indexes.push(idx);
                    }
                    if (me.currentIndex === null) {
                        me.currentIndex = idx;
                    }
                    return '<span class="' + me.matchCls + '">' + m + '</span>';
                });
                // restore protected tags
                Ext.each(matches, function (match) {
                    cellHTML = cellHTML.replace(me.tagsProtect, match);
                });
                // update cell html
                cell.dom.innerHTML = cellHTML;
                td = td.next();
                if (me.currentIndex !== null) {
                    me.getSelectionModel().select(me.currentIndex);
                }
            }
        }, me);
    }

    // no results found
    if (me.currentIndex === null) {
        me.getSelectionModel().deselectAll();
    }
};