Hey guys,

I am a very new at javascript and decided to play around with some of it's functionality after being told how awesome Sencha is. My problem arises from the getSelectorModel, for some reason I just cannot get it to work. Clearly I am doing something wrong, but after spending so much time on the damn thing it is beginning to be annoying. If anyone has time, could you help me out resolve this issue?

Also, I apologize if I post this in a wrong forum, but like I said, I'm new to this.

The functionality goes like this:
a user must be able to click two buttons to submit form and reset a form (that's done) and must be able to click a row and see the detailed description of that grid. (basically all of the data must be displayed). I am stuck on the row clickable part, for some reason it just doesn't want to work for me.

(the set up)
Code:
Ext.define('MyApp.view.ui.TabMethodology', {
    extend: 'Ext.tab.Panel',

    height: 558,
    width: 803,
    activeTab: 0,

    initComponent: function() {
        var me = this;
        me.items = [
            {
                xtype: 'panel',
                autoShow: true,
                title: 'Report',
                items: [
                    {
                        xtype: 'panel',
                        frame: true,
                        height: 529,
                        width: 800,
                        layout: {
                            align: 'stretch',
                            type: 'vbox'
                        },
                        title: 'Meeting Log',
                        items: [
                            {
                                xtype: 'gridpanel',
                                autoShow: true,
                                id: 'displayid',
                                store: 'DataStorage',
                                flex: 1,
                                columns: [
                                    {
                                        xtype: 'gridcolumn',
                                        dataIndex: 'Name',
                                        text: 'Name'
                                    },
                                    {
                                        xtype: 'numbercolumn',
                                        dataIndex: 'Duration',
                                        width: 75,
                                        text: 'Duration'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        dataIndex: 'Attendees',
                                        width: 150,
                                        text: 'Attendees'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        dataIndex: 'Date',
                                        text: 'Date'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        dataIndex: 'Description',
                                        width: 363,
                                        text: 'Description'
                                    }
                                ]
                            },
                            {
                                xtype: 'panel',
                                id: 'infoid',
                                height: 111,
                                padding: 10,
                                tpl: Ext.create('Ext.XTemplate', 
                                    'Name: {Name}<br/> ',
                                    'Description: {Description}'
                                ),
                                ref: 'detail',
                                width: 481,
                                flex: 1
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'panel',
                id: 'dataid',
                title: 'New Meeting',
                items: [
                    {
                        xtype: 'form',
                        height: 198,
                        id: 'formid',
                        itemId: 'dataid',
                        bodyPadding: 10,
                        title: 'Enter A New Meeting',
                        items: [
                            {
                                xtype: 'fieldcontainer',
                                height: 194,
                                width: 800,
                                fieldLabel: '',
                                items: [
                                    {
                                        xtype: 'textfield',
                                        name: 'Name',
                                        fieldLabel: 'Name'
                                    },
                                    {
                                        xtype: 'textfield',
                                        name: 'Attendees',
                                        fieldLabel: 'Attendees'
                                    },
                                    {
                                        xtype: 'numberfield',
                                        name: 'Duration',
                                        fieldLabel: 'Duration'
                                    },
                                    {
                                        xtype: 'datefield',
                                        name: 'Date',
                                        fieldLabel: 'Date'
                                    },
                                    {
                                        xtype: 'textfield',
                                        name: 'Description',
                                        fieldLabel: 'Description'
                                    },
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'toolbar',
                        height: 32,
                        items: [
                            {
                                xtype: 'tbfill',
                                height: 20
                            },
                            {
                                xtype: 'buttongroup',
                                title: '',
                                columns: 2,
                                layout: {
                                    columns: 2,
                                    type: 'table'
                                },
                                items: [
                                    {
                                        xtype: 'button',
                                        text: 'Reset'
                                    },
                                    {
                                        xtype: 'button',
                                        text: 'Submit'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ];
        me.callParent(arguments);
    }
});
Code:
Ext.define('MyApp.view.TabMethodology', {
    extend: 'MyApp.view.ui.TabMethodology',

    initComponent: function() {
        var me = this;
        me.callParent(arguments);
        me.down('button[text=Reset]').on('click', me.onResetBtnClick, me);
        me.down('button[text=Submit]').on('click', me.onSubmitBtnClick, me);
/*
this is where i'm experiencing the problem. 
*/
        var sm = Ext.getCmp('displayid').getSelectionModel();
//    sm.on('displayid', this.onGridRowSelect, this);
    //    var sm = this.grid.getSelectionModel();
        sm.on('rowselect',me.onGridRowSelect, me);
        console.log('Row was clicked');
        
    },
    onGridRowSelect: function(sm, rowIdx, r){
        alert("haha");
        Ext.getCmp('infoid').update(r.data);
    },
    
    onSubmitBtnClick: function(){
        // check the validity of the form if something changes. 
        if (Ext.getCmp('formid').form.isValid() == true)
        {       
            // Ajax call to the php file to change the .json storage data.
            Ext.Ajax.request({
            // works
            });
            
        };
        
    },
    
    onResetBtnClick: function() {
        // Resets the fields
        Ext.getCmp('formid').form.reset();
        },
});
Thanks a lot for the assistance, It's probably something minor, but I am just destroyed already.

~Metamorf