1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    3
    Vote Rating
    0
    danoo is on a distinguished road

      0  

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

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


    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

    Code:
    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);
        }
    
    
    });

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,105
    Vote Rating
    114
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    3
    Vote Rating
    0
    danoo is on a distinguished road

      0  

    Default getSelection...

    getSelection...


    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



    Code:
    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);
        }
    
    });

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,105
    Vote Rating
    114
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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);
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    May 2011
    Posts
    3
    Vote Rating
    0
    danoo is on a distinguished road

      0  

    Default Works perfectly.

    Works perfectly.


    Thank you much! Works well now.

    Code:
     ... 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);
        }

Thread Participants: 1