Architect 2: Selecting the first row of grid in gridpanel after data load.

[danoo]

Hello all, I'm new to Architect 2 and ExtJS and I've really been struggling trying to figure out why I can't seem to select the first row in a grid after it loads. I've seen a number of methods but most are basically assuming a little to much in terms of my background knowledge.

I've resorted to editing the .js by hand rather than using the architect gui and came up with the "selectFirst" function.

Will someone please put me in the right direction here, or explain how I could do this in Architect 2?

Thanks ahead for any advice.

--dano

Ext.define('MyApp.view.Educators', {
    extend: 'Ext.panel.Panel',


    frame: true,
    height: 650,
    width: 665,
    autoScroll: true,
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    title: 'Featured Lessons for Educators',


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'gridpanel',
                    height: 157,
                    scroll: 'vertical',
                    store: 'eduStore',
                    viewConfig: {


                    },
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            width: 355,
                            dataIndex: 'lessontitle',
                            text: 'Lesson Title'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'grade',
                            text: 'For Grade(s)'
                        },
                        {
                            xtype: 'gridcolumn',
                            width: 92,
                            dataIndex: 'time',
                            text: 'Time'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'rev_title',
                            text: 'Reviewed By'
                        }
                    ],
                    listeners: {
                        select: {
                            fn: me.onGridpanelSelect,
                            scope: me
                        }
                        viewready: {
                            fn: me.selectFirst,
                            scope: me
                        }
                    }
                },
                {
                    xtype: 'panel',
                    flex: 1,
                    itemId: 'detailPanel',
                    tpl: [
                        ...Deleted for brevity sake...
                        
                    ],
                    title: 'Click on any of the rows above to see more information about that lesson.'
                }
            ]
        });


        me.callParent(arguments);
    },


    onGridpanelSelect: function(selModel, record, index, options) {
        var detailPanel = this.child('#detailPanel');
        detailPanel.update(record.data);
    }
    
    selectFirst: function(gridpanel, eOpts) {
        this.getSelectionModel().select(0);
    }


});

[aconran]

You can reproduce the above code while staying completely in Architect by doing the following:

Choose the grid in the Project Inspector
Go to Event Bindings in the property grid
Click the +
type in viewready (it will autocomplete)
Add the event binding

Click the arrow to drill in, name the function selectFirst
Double click on it and provide the implementation as you have.

Take a look at the interactivity guide
http://docs.sencha.com/architect/2/#.../interactivity

[danoo]

Aaron,

Thanks for the response. So I did exactly what you suggested I do, but I'm getting: Uncaught TypeError: Object [object Object] has no method 'getSelectionModel'

This is the same error that I've been seeing if I use that method. Not sure what's going on, I'm using the 4.1.x documentation/framework. Tried on a number of browsers, but can't seem to crack this.

I've included a screenshot of the project inspector.Screen Shot 2013-02-15 at 12.12.07 PM.png

Thank you,

Dano

Ext.define('MyApp.view.Educators', {
    extend: 'Ext.panel.Panel',

    frame: true,
    height: 650,
    width: 665,
    autoScroll: true,
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    title: 'Featured Lessons for Educators',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'gridpanel',
                    height: 157,
                    scroll: 'vertical',
                    store: 'eduStore',
                    viewConfig: {

                    },
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            width: 355,
                            dataIndex: 'lessontitle',
                            text: 'Lesson Title'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'grade',
                            text: 'For Grade(s)'
                        },
                        {
                            xtype: 'gridcolumn',
                            width: 92,
                            dataIndex: 'time',
                            text: 'Time'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'rev_title',
                            text: 'Reviewed By'
                        }
                    ],
                    listeners: {
                        select: {
                            fn: me.onGridpanelSelect,
                            scope: me
                        },
                        viewready: {
                            fn: me.selectFirst,
                            scope: me
                        }
                    }
                },
                {
                    xtype: 'panel',
                    flex: 1,
                    itemId: 'detailPanel',
                    tpl: [
                  ... template here...
                    ],
                    title: 'Click on any of the rows above to see more information about that lesson.'
                }
            ]
        });

        me.callParent(arguments);
    },

    onGridpanelSelect: function(selModel, record, index, options) {
        var detailPanel = this.child('#detailPanel');
        detailPanel.update(record.data);

    },

    selectFirst: function(tablepanel, options) {
        this.getSelectionModel().select(0);
    }

});

[aconran]

Well this is referring to the class you have here (which is an extension of panel).

You want to grab a reference to your gridpanel, give it an itemId called 'grid'.


this.child('#grid').getSelectionModel().select(0);

[danoo]

Thank you much! Works well now.

 ... me.callParent(arguments);
    },


    onGridpanelSelect: function(selModel, record, index, options) {
        var detailPanel = this.child('#detailPanel');
        detailPanel.update(record.data);


    },


    selectFirst: function(tablepanel, options) {
        this.child('#edugrid').getSelectionModel().select(0);
    }