Results 1 to 9 of 9

Thread: Modern 6.2: Renderer Listener on Grid with dynamic data not called correctly

  1. #1
    Sencha User
    Join Date
    Jun 2018
    Posts
    11

    Default Answered: Modern 6.2: Renderer Listener on Grid with dynamic data not called correctly

    Hi,

    I've got a store which i bind to a grid. For the grid-columns i have a renderer listener each. So my thought is : When loading data, every column gets called by the renderer.
    Example of a column:
    Code:
    {
        text: "Test", dataIndex: "indexone", width: 60,
        renderer: function(value){
            if(value == "Bart Simpson"){
                value = "Mr. Simpson";
            }
            return value;
        }
    }
    For testing purposes i'm loading the Store by :
    Code:
    myGrid.getStore().loadData([["Bart Simpson", "12"],["Lisa Simpson", "9"], ["Marge Simpson", "40"]]);
    The renderer gets called 3 times, as expected. All good untill i try it again, remove grid store first: myGrid.getStore().removeAll();
    Then i call it with only one record
    Code:
    myGrid.getStore().loadData([["Bart Simpson", "12"]]);
    Renderer gets called once, all good. Clear store again. Then i call it again with the early 3 records:
    Code:
    myGrid.getStore().loadData([["Bart Simpson", "12"],["Lisa Simpson", "9"], ["Marge Simpson", "40"]]);
    Result: Renderer gets called..... once.....
    Why is that?
    I can even loadData with completely different records and even 1000 inside, renderer only gets called once, for the first record thats inside.

    Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2mv3 (open dev console)

    Greets

  2. If you want to call the column renderer each time then you need to udpate its cached value that grid cell is keeping in "_value" config.

    I tried to find a place to do so. You need to override the updateRecord function of Ext.grid.Row class.

    You can check the fiddle - https://fiddle.sencha.com/#view/editor&fiddle/2mv6

    I added below line in that override function -

    // added below line to flush last cached value of cell
    cell['_value'] = null;

    After that engine is calling each time renderer that you want.

    Hope that helps.

  3. #2
    Sencha User
    Join Date
    Oct 2018
    Location
    Noida
    Posts
    56
    Answers
    10

    Default

    Hi,

    I have seen this behavior when there is any error in rendering grid row. Can you confirm in developer tool console that there is no error in console in that case ??

    If no clue, can you please provide fiddle for your code to look at ?

  4. #3
    Sencha User
    Join Date
    Jun 2018
    Posts
    11

    Default

    No errors. Grid renders all rows, but i need to get all renderers called.
    Here is a fiddle example (open Dev tools to see the logs and reload... you see 3 Logs, then on clear and tap on 1, you see 1 log, then clear and on multi: 1 log aswell.... Even if you do multi, clear it and again multi: no renderer called). If you change all the records from the MultiButton to Bart, you can even see: Everything gets to "Mr.", but not all renderer logs are called. And thats what i NEED. i need all rows to iterate through the renderer.

    https://fiddle.sencha.com/#view/editor&fiddle/2mv3

  5. #4
    Sencha User
    Join Date
    Oct 2018
    Location
    Noida
    Posts
    56
    Answers
    10

    Default

    Hi,

    I tried to debug the code you gave. What engine is rendering the rows is keeping there reference in memory for future use. Now if you are passing the same record again at the same index, it will try to compare the last cached value with new value came in record, if those are same, it will not render new html, it will use the old one. When you are clicking again on single or multi record button, its coming first time because last time at that index first name was different.
    So if you edit the code for single button and rather than firstName as Marge, put there firstName as Bart which is same as multi record, scenario, There will not be any log as engine will not render new row as record is same as cached one.

    You can debug that easily to understand its working.

    debug.PNG

    You can check screenshot how its rendering the rows, hope it help.

  6. #5
    Sencha User
    Join Date
    Jun 2018
    Posts
    11

    Default

    Okay, i would've guessed it's caching when im immediately loading new records when already records exists, but not with everything. Even if you would loadData([["",""]]), it's then on the Multi records not rendering 3 times, which is kinda weird for my taste, since the 3 records are compared by one record containing empty strings, which means 3 new datasets are entered, therefor 3 renderer ....

    It really helps to understand the way it works, but there has to be a way opening the same records in different orders and calling renderer every time. Is there a way to clear the cache?

  7. #6
    Sencha User
    Join Date
    Oct 2018
    Location
    Noida
    Posts
    56
    Answers
    10

    Default

    If you want to call the column renderer each time then you need to udpate its cached value that grid cell is keeping in "_value" config.

    I tried to find a place to do so. You need to override the updateRecord function of Ext.grid.Row class.

    You can check the fiddle - https://fiddle.sencha.com/#view/editor&fiddle/2mv6

    I added below line in that override function -

    // added below line to flush last cached value of cell
    cell['_value'] = null;

    After that engine is calling each time renderer that you want.

    Hope that helps.

  8. #7
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,255
    Answers
    759

    Default

    i need all rows to iterate through the renderer.
    Why? To what end? Given the example you specified it's rendering exactly what it's supposed to.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  9. #8
    Sencha User
    Join Date
    Jun 2018
    Posts
    11

    Default

    Given the example you specified it's rendering exactly what it's supposed to.
    Not quite. I still need every dataindex renderer called (even those that are not new) to resize a few columns and get the longest row, since autoSize is not working in modern 6.2.
    Thanks for your help praveensaini23 , its working! Greets.

  10. #9
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,255
    Answers
    759

    Default

    Right, that was my point. You decided you needed to use the renderer to achieve this, that was never mentioned anywhere in the original post.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Similar Threads

  1. Grid Renderer - HTML? In Modern
    By mlitch1 in forum Sencha Architect 3.x: Q&A
    Replies: 1
    Last Post: 3 Apr 2017, 1:40 PM
  2. Ext JS 6 modern grid column renderer no html support
    By lubendo in forum Ext JS 6.x Q&A
    Replies: 5
    Last Post: 18 Oct 2016, 7:46 AM
  3. Replies: 2
    Last Post: 17 Sep 2015, 5:23 AM
  4. [4.1.1] grid renderer not work correctly
    By ppyy in forum Ext:Bugs
    Replies: 10
    Last Post: 14 Mar 2013, 4:07 AM
  5. renderer Grid never called
    By lesmyrmidons in forum Ext: Discussion
    Replies: 4
    Last Post: 29 Jun 2011, 7:37 AM

Tags for this Thread

Posting Permissions

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