what this code not work correct

Code:
Ext.require([
    '*'
]);


Ext.onReady(function() {
    
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: ['name']
    });
    
    // create the Data Store
    var userStore = Ext.create('Ext.data.Store', {
        model: 'User',
        data: [
            { name: 'ehsan' },
            { name: 'shah' },
            { name: 'Homer' },
            { name: 'Marge'}
        ]
    });  


var myGride=Ext.create('Ext.grid.GridPanel', {
    renderTo: Ext.getBody(),
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name'
        }
    ],
    listeners: {
        rowclick:function(grid, rowIndex, columnIndex, e) {
          alert(rowIndex);
          console.log('Double clicked on ');
        }
    }
});


myGride.on('click', function(){alert(1);}, this, {
        single: true,
        delay: 100,
        forumId: 4
    });


var myPanel=Ext.create('Ext.panel.Panel',{
    layout: {
        type: 'vbox',
        align: 'center'
    },
    items: [
        {
        xtype: 'numberfield',
        anchor: '100%',
        name: 'bottles',
        fieldLabel: 'Bottles of Beer',
        value: 99,
        maxValue: 99,
        minValue: 0
    },
        myGride  
    ]
   }
);


myGride.on('rowdblclick', function(grid, rowIndex, e) {
alert(rowIndex);
});
Ext.create('Ext.window.Window',{
    layout: {
        type: 'hbox',
        align: 'center'
    },
    items: [
        myPanel
    ],
    title: 'Hello Window',
    width: 300,
    height: 300,
    id: 'myWindow'
}).show();
    
});

not any alert when click or dbl click or