Results 1 to 6 of 6

Thread: Implementing the rating plugin in a gridpanel

  1. #1

    Default Implementing the rating plugin in a gridpanel

    Hello everyone,

    I have been spending the last few days migrating a lot of stuff from YUI to EXTjs. Now the last thing i need to do is use the rating system. I made a renderer for the column and called it "renderRelevanceStars". In the renderer i need to pass a HTML object to the rating plugin ( i think? ), but I dont see why the cell itself isn't enough.

    Here is the relevant piece of code:

    the column defined with the renderer
    Code:
     {
    header: 'Relevance <span class=\"information\"  id=\"tip1_relevance\"></span>',
    width: 75, 
    renderer: renderRelevanceStars, 
    sortable: true, 
    dataIndex: 'relevance'
    }
    The renderer itself:
    Code:
    function renderRelevanceStars(val, cell, record) {
    
        var relevance = record.get('relevance');
    
        for (var i = 0; i<11; i+=2)
        {
           cell.innerHTML += '<input type="radio" name="rating1" ' +  (relevance == i ? "checked=\"true\"": "") + 'value="' + i + '" title="' +  (i*10) + '%">';
        }
    
        var rating = new Ext.ux.Rating( cell, { canReset: true, resetValue:  -1 });
      
        rating.on('change', function() { 
            
             // Save the data into the recordset
          record.setData('relevance', rating.value); 
        });
    }
    Now I know that passing the sell to the constructor isn't enough, but what SHOULD I pass ?

    Hope you guys can help me.

    Regards,

    Jeroen

  2. #2

    Default

    I think the problem is the cell content. Because the <div> and <input> elements aren't actually in the screen yet when i try to render the Rating plugin.
    My second idea was as small test:
    Code:
    function renderRelevanceStars(val, cell, record) {
    
        var relevance = record.get('relevance');
        cell.innerHTML = '<div id="rating">';
    
        for (var i = 0; i<11; i+=2)
        {
           cell.innerHTML += '<input type="radio" name="rating1" ' + (relevance == i ? "checked=\"true\"": "") + 'value="' + i + '" title="' + (i*10) + '%">';
        }
        cell.innerHTML += '</div>';
      
        return cell.innerHTML;
    }
    This would build a <div> with some radio buttons in it.
    My next idea was to use the "afterrender" function on the grid. Like this:
    Code:
      ...other grid stuff like width etc......
      listeners: {
                afterrender: function() {
                    // We need to build the tooltips after the grid is rendered. 
                    gridTooltip('tip1_relevance', 'relevance');
                    var rating = new Ext.ux.Rating( Ext.get("rating"), { canReset: true, resetValue: -1 });
                  }
                }
    But this gives me the same result. An error in firebug:

    Code:
    this.el is null
              this.container =  this.el.createChild({
    Tried it with document.getElementById and just passing the div's id "rating". Still nothing.
    What am i missing here?

    Jeroen

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    It's a very bad idea to render Components into grid cells.

    Grid cell content is completely transient. The HTML is just wiped out on any update. How will your Component(s) be cleared up?

  4. #4

    Default

    Hey Animal,

    The general idea is as following.
    I have a grid with 5 columns. The first is a metakeyword, the 3rd, 4th and 5th are just some analytics numbers from google. However I need to know how the user rates the importance of the word for his website. So the general idea was to render the rating plugin in the 2nd cell. Like the image below.
    grid.png

    The value from the rating is set in the record when updated and stored when the grid is saved.
    You think it's a bad idea to put the rating in there like this ?

    Jeroen

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    It is possible that you could use a special case of the forthcoming ActionColumn in 3.3

    That allows you to specify a series of icons, and associated class names to be rendered in the column's cells.

    A configured handler function is called upon click (either a single handler configured into the Column, or one for each icon)

    The handler is passed enough info to determine which icon was clicked on.

    It could then set a Record property like ratingValue to a value from 1 to six.

    The View's getRowClass could attach a CSS class to the row which would affect the background image of the icons.

    Something like that anyway. It will be possible to do.

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

Similar Threads

  1. Need plugin Star Rating/Voting
    By king1231986 in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 28 Mar 2013, 12:47 AM
  2. Problems with GridPanel and RowEditor plugin
    By synchronicity in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 22 Feb 2010, 4:31 PM
  3. GridPanel: button plugin
    By randomuser01 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 10 Dec 2008, 9:37 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •