Display data from a row click

I have not been able to test this, but I believe this is not working because "this" is a Prototype object and the innerHTML property is not directly accessible. You should be able to use the Prototype update() function, like this: 

onRowClick: function(grid, rowClicked, e) {
         if ( rowClicked >= 0) {
this.displayDiv.update('<div style="padding:5px;border:solid 3d3d3d;"><center>colModel.getSelections()[0].data</center></div>');
        }

Please let us know if this works -- and I will update the documentation appropriately.

The mashlet itself is not able to be previewed once this event is introduced to the code, is this event syntx correct for the mashlet i am using. maybe this could be the problem. i have attached the code incase

Jack

I can see quite a few things that will stop this working. First thing, where you define the onRowClick method the syntax is wrong, as you are inside a function, not specifiying an object literal property, you should use the syntax:

this.onRowSelect = function(grid, row, e){ ... }

You only use the syntax :

onRowSelect: function(grid, row, e){ ... },

if you are defining a function as a property of an object literal.

Second thing is the rowclick event wont get fired because the GridPanel doesnt have a RowSelectionModel object configured, it will have the default selection model which doesnt do row selection, it just does cell clicking.

Also the rowclick event is fired by the GridPanel, not the colModel object.

In your event handling code, you have set the scope to be the mashlet object so you should use this.container rather than this.mashlet.container.

So to get it working do the following:

a. Remove your row clicking code

b. Add the RowSelectionModel as a property of the grid config object:

        // Config for the Grid
        var c = {
            applyTo: this.resultsDiv,
            store: this.dataStore,
            cm: colModel,
            viewConfig: {
                forceFit: true
            },
            autoScroll: true,
            sm: new Ext.grid.RowSelectionModel({ singleSelect:true })          };

c. Then listen for rowClick events on the GridPanel after it is created :

      this.gridPanel = new Ext.grid.GridPanel(c);

        this.gridPanel.on("rowclick", function(grid, rowClicked, e) {
            // console.log('row clicked :', grid, rowClicked, e);
            if ( rowClicked >= 0) {
                var data = grid.getSelections()[0].data;
                // console.log('publishing data : ', data);
                this.container.publish('RowClick', data);
                this.displayDiv.innerHTML = '<div style="padding:5px;border:solid 3d3d3d;"><center>'+ data.sfname+'</center></div>'; //new
            }
        }, this);

        this.execute();

The event listener uses an anonymous function. If you make these changes you should see the first name displayed in your display div.

Thanks for taking the time to look through the code, it works perfectly now. Much appreciated