1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    480
    Answers
    12
    Vote Rating
    0
    abcdef is an unknown quantity at this point

      0  

    Default Answered: Grid column 'renderer' question

    Answered: Grid column 'renderer' question


    I have a grid (takes a while for its store to load - so its masked till it loads completely) with 1 column renderer. I have a div with a certain class name as part of what the renderer returns. I need to show a slider when the user hovers over that div. How do I achieve this?

    Thanks in advance!

  2. Using the delegate option as slemmon suggested would not only reduce memory consumption but would also work around the problems with delayed rendering. Delegating involves registering the listener on a single container element (i.e. one of the elements that surrounds the whole grid body). The delegate option then specifies a CSS selector that will be used to pick out the actual target element for the click event.

    It might look something like this:

    Code:
    el.on('click', function() {
       ..
    }, el, {delegate: '.myapp-task-control-esc-cell'});
    Even though the listener is registered on el it will only be called if the click occurs on an element that matches the CSS selector (or one of its child elements). Further, the getTarget() method of the event object will return the matching delegate. You then just need some way of mapping from the element returned back to the row in question. That depends on what information you write into your HTML in the first place.

    This gets around the rendering delay because the delegate elements don't need to exist when the listener is registered, only el needs to exist at that point.

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Answers
    385
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    You might add a listener to the div containers to show a slider with floating: true there at the cursor's position. You don't want to attach too many listeners to html elements so for the divs you can set up your listeners using a delegate property. There's actually a pretty decent example of this in the API docs under Element > On.
    http://docs.sencha.com/ext-js/4-0/#/...ment-method-on

    If that doesn't get you going just post back and maybe include your renderer code snippet and maybe we can get an example going for you.

  4. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Answers
    385
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I say we meaning on of your helpful peers on the community forums (me or one of the even more clever helpful hands).

  5. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    480
    Answers
    12
    Vote Rating
    0
    abcdef is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by slemmon View Post
    You might add a listener to the div containers to show a slider with floating: true there at the cursor's position. You don't want to attach too many listeners to html elements so for the divs you can set up your listeners using a delegate property. There's actually a pretty decent example of this in the API docs under Element > On.
    http://docs.sencha.com/ext-js/4-0/#/...ment-method-on

    If that doesn't get you going just post back and maybe include your renderer code snippet and maybe we can get an example going for you.
    Thank you very much for you reply.

    So at what point do I add those event handlers to the div? My grid takes a while to load. 'render' fires before that element is ready. So when I do query for the element to attach a listener, I get an empty array back. I hope I am getting what you meant!

    Here is what my renderer more or less looks like:

    Code:
    ...
    columns: [
        {
            xtype: 'gridcolumn',
            flex: 1,
            text: '',
            renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
                return '<div class="myapp-task-wrapper">' + 
                    '<div class="myapp-task-right-controls-section">' +
                        '<div class="myapp-task-control-cell myapp-task-text-cell myapp-task-control-pr-cell">' +
                            'P' + record.get('pr') +
                        '</div>' +
                        '<div class="myapp-task-control-cell myapp-task-text-cell myapp-task-control-es-cell">' +
                            record.get('es') + 'H' +
                        '</div>' +
                        '<div class="myapp-task-control-cell myapp-task-control-esc-cell"></div>' +
                        '<div class="myapp-task-control-cell myapp-task-text-cell myapp-task-control-f-cell">' +
                            'F' + record.get('f') +
                        '</div>' +
                        '<div class="myapp-task-control-cell myapp-task-text-cell myapp-task-control-a-cell">' +
                            record.get('a') +
                        '</div>' +
                    '</div>' +
                '</div>';
            }
        }
    ],
    ...
    So I need the slider when mouseover-ed: 'myapp-task-control-esc-cell' div.

    In my controller, I am doing this:

    Code:
    this.control({
        'mygrid mygridcolumn': {
            afterrender: this.onGridColumnAfterRender
        }
    });
    and in this.onGridColumnAfterRender

    Code:
    var cells = gridColumn.query('.myapp-task-control-esc-cell');
    // But I am getting back an empty array here.
    Any ideas?

  6. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,593
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Using the delegate option as slemmon suggested would not only reduce memory consumption but would also work around the problems with delayed rendering. Delegating involves registering the listener on a single container element (i.e. one of the elements that surrounds the whole grid body). The delegate option then specifies a CSS selector that will be used to pick out the actual target element for the click event.

    It might look something like this:

    Code:
    el.on('click', function() {
       ..
    }, el, {delegate: '.myapp-task-control-esc-cell'});
    Even though the listener is registered on el it will only be called if the click occurs on an element that matches the CSS selector (or one of its child elements). Further, the getTarget() method of the event object will return the matching delegate. You then just need some way of mapping from the element returned back to the row in question. That depends on what information you write into your HTML in the first place.

    This gets around the rendering delay because the delegate elements don't need to exist when the listener is registered, only el needs to exist at that point.

  7. #6
    Sencha User
    Join Date
    Mar 2010
    Posts
    480
    Answers
    12
    Vote Rating
    0
    abcdef is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by skirtle View Post
    Using the delegate option as slemmon suggested would not only reduce memory consumption but would also work around the problems with delayed rendering. Delegating involves registering the listener on a single container element (i.e. one of the elements that surrounds the whole grid body). The delegate option then specifies a CSS selector that will be used to pick out the actual target element for the click event.

    It might look something like this:

    Code:
    el.on('click', function() {
       ..
    }, el, {delegate: '.myapp-task-control-esc-cell'});
    Even though the listener is registered on el it will only be called if the click occurs on an element that matches the CSS selector (or one of its child elements). Further, the getTarget() method of the event object will return the matching delegate. You then just need some way of mapping from the element returned back to the row in question. That depends on what information you write into your HTML in the first place.

    This gets around the rendering delay because the delegate elements don't need to exist when the listener is registered, only el needs to exist at that point.
    Oh ok! That makes sense now. Thanks...now I could find the delegate on addListener in the Docs too!

Thread Participants: 2