1. #1
    Sencha User
    Join Date
    Nov 2008
    Posts
    163
    Vote Rating
    0
    wgpubs is on a distinguished road

      0  

    Question Listener never fires ... help

    Listener never fires ... help


    In my columnmodel defined for a grid I have the following:

    Code:
    {
                    header: "Applicability Rating",
                    dataIndex: 'ApplicabilityRating',
                    width: 125,
                    sortable: true,
                    renderer:
                        function(value) {
                            crowns = '';
    
                            for (var i = 1; i <= value; i++) {
                                crowns += '<img class="rate' + i + '" src="' + rating.im1 + '">';
                            }
    
                            for (var f = i; f <= rating.no; f++) {
                                crowns += '<img class="rate' + f + '" src="' + rating.im2 + '">';
                            }
    
                            return '<div class="rating" title="' + value + '">' + crowns + '</div>';
                        },
                    listeners: {
                        'mousedown': this.onMouseDown, scope: this
                    }
    
                }
    But nothing ever gets fired. Ideally, I'd like to write the function inline as well ... but until I can figure out why this never fires, that is secondary I guess.

    Any ideas?

    Thanks - wg

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Columns don't have listeners. GridPanel has listeners.

    Use:
    Code:
    var grid = new Ext.grid.GridPanel({
      ...
      listeners: {
        cellclick: function(grid, row, col){
          if(col == grid.colModel.findColumnIndex('ApplicabilityRating')){
            ...
          }
        }
      }
    });

  3. #3
    Sencha User
    Join Date
    Nov 2008
    Posts
    163
    Vote Rating
    0
    wgpubs is on a distinguished road

      0  

    Default


    That would make sense ... thanks

    The reason I'm trying to do this is because I'm trying to take some code I found on the forums for creating a rating column and make it reusable in multiple columns. The code is below ... if you have any ideas on how to do this I'd appreciate it. Its probably easy but I'm still relatively new to ExtJs so any help would be great.

    Thanks

    Code:
    var rating = {
    
    
    
        ///////////////////////////////////////////////////////////////////////////////////////////////// 
        /* 
        Ext-Rating-System
        The Ext-Rating-System is based on a method writing values to title and Style-classes.
            
        1.     The items are rendered by the custom Renderer. The value of each single Image is
        included in it's own class. Just like: '.rate1','.rate2' etc.
        The overall value of each item is stored in the title of the parent-DIV.
                
        2.    A save function is called, which adds a click-handler to each Image and saves the new 
        value to the parent-DIV
                
        3.    
        */
        /////////////////////////////////////////////////////////////////////////////////////////////////
        // @ Configurations                                                                         @////
    
        im1: 'content/crown.png',
        im2: 'content/crown_fade.png',
        no: 5,
    
        // @ You can modify these lines, to fit your source and number of favorite icons            @////
        /////////////////////////////////////////////////////////////////////////////////////////////////    
    
    
        /////////////////////////////////////////////////////////////////////////////////////////////////
        // @ Renderer                                                                                @////
    
        renderer: function(value) {
            crowns = '';
    
            for (var i = 1; i <= value; i++) {
                crowns += '<img class="rate' + i + '" src="' + rating.im1 + '">';
            }
    
            for (var f = i; f <= rating.no; f++) {
                crowns += '<img class="rate' + f + '" src="' + rating.im2 + '">';
            }
    
            return '<div class="rating" title="' + value + '">' + crowns + '</div>';
        },
    
        // @                                                                                         @////
        /////////////////////////////////////////////////////////////////////////////////////////////////    
    
        /////////////////////////////////////////////////////////////////////////////////////////////////
        // @ Save                                                                                    @////    
    
        save: function() {
            var el = Ext.select('.rating img');
    
            el.on('click', function(e, ele) {
                var o = Ext.get(ele);
                var value = o.dom.className.substr(4, 1);
                o.parent().set({ title: value }); ;
            });
        },
    
    
        // @                                                                                         @////
        /////////////////////////////////////////////////////////////////////////////////////////////////    
    
        /////////////////////////////////////////////////////////////////////////////////////////////////
        // @ init                                                                                    @////
    
        init: function() {
    
            Ext.select('.rating').each(function(el) {
                rating.save();
            });
        }
        // @ Let' go!!!                                                                                @////
        /////////////////////////////////////////////////////////////////////////////////////////////////    
    
    }
    
    
    RateColumn = function() {
        var grid, record;
    
        function getRecord(t) {
            var index = grid.getView().findRowIndex(t);
            return grid.store.getAt(index);
        }
    
        function onMouseDown(e, t) {
            var parentDiv = t.parentNode;
            if (parentDiv.className == 'rating') {
                var newRating = Ext.fly(t).dom.className.substr(4, 1);
                e.stopEvent();
                var record = getRecord(t);
                record.set('rating', newRating);
            }
        }
    
        Ext.apply(this,
            {
                header: 'Rating',
                width: 125,
                sortable: true,
                fixed: true,
                //dataIndex: 'rating',
                //id: 'fav-col',
                renderer: rating.renderer,
                init: function(xg) {
                    grid = xg;
                    grid.on('render', function() {
                        var view = grid.getView();
                        view.mainBody.on('mousedown', onMouseDown);
                    });
                }
            });
    
        
    };

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    As you can see from the example this class should be used both:
    1. A column in the column model.
    2. A plugin in the gridpanel (the gridpanel will call the init() method, which attaches a render listener, that in turn will attach a mousedown listener).

  5. #5
    Sencha User
    Join Date
    Nov 2008
    Posts
    163
    Vote Rating
    0
    wgpubs is on a distinguished road

      0  

    Default


    Yah I think I get that.

    The problem is this code in the mousedown handler:

    Code:
    record.set('rating', newRating);
    It requires a field in the grid's store to be named 'rating.' But I want to be able to use this in multiple columns ... how can this be modified to make that happen?

    Thanks

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    82
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    I've updated the plugin code to support multiple rating columns inside a single grid.

Thread Participants: 1