extjs How to get a grid

Question

In Designer I set my grid name to equal MyGrid

On clicking the button addRecord is called, it fails where rows is attemting to get an undefined grid.

How do I define this MyGrid so that it references the grid within the panel?

Ext.define('MyApp.view.MyPanel', {
    extend: 'MyApp.view.ui.MyPanel',

    initComponent: function() {
        var me = this;
        me.callParent(arguments);

        var button = me.down('button[text=Submit]');

         button.on('click', me.onSubmitBtnClick, me);
    },

    addRecord: function(myRecordArray) {

        var rows = grid.getStore().getRange(); // ERROR happens here

            console.log(rows);


    },

    onSubmitBtnClick: function() {
        this.addRecord(["ll", "kk", "mm"]);
    }
});

Chrome Javascript Debugger Console ->

   Uncaught ReferenceError: grid is not defined

Answer 1

try changing button.on('click', me.onSubmitBtnClick, me) to button.on('click', Ext.bind(me.onSubmitBtnClick, me), me)

This looks like a scope issue, in your onSubmitBtn() method, this probably refering to the wrong object (e.g. window, or the button), and not the grid object, which is what you want.

Answer 2

Before you call grid.getStore() you need to define "grid". You can just do var grid = this; right before the call because you are defining the addRecord function from inside of the grid.

EDIT:

I just noticed that this wasn't being called from inside the grid panel with the store but some other panel. What you will have to do to is set an id config on your grid panel. E.g. id: MyGridPanel There may already be an id config set on it and you just have to find out what it is. If you are using the ExtJS designer it may actually already be set to "MyGridPanel". Then you would call it like so:

var grid = Ext.getCmp("MyGridPanel");

then you would do:

grid.getStore().getRange()