1. #1
    Ext User
    Join Date
    Jul 2009
    Posts
    82
    Vote Rating
    0
    andryi is on a distinguished road

      0  

    Default how can I use renderer in dynamic grid

    how can I use renderer in dynamic grid


    hi all, someone have an example about how can I use renderer in dynamic grid

    this is my metadata:

    Code:
    {"metaData" : { "totalProperty" : "TotalRegistries" , "root" : "data" , "fields": ["bulletinId","airframeId","auxiliaryId","engineId","bulletinNumber","Fecha","bulletinTypeId","ataCode01","ataCode02","ataCode03","relatesId","modelNumber","belongTo"], "colModel" : [ new Ext.grid.CheckboxSelectionModel({checkOnly: true, singleSelect: false}),{"dataIndex":"bulletinId","header":"bulletinId","hidden":true},{"dataIndex":"airframeId","header":"airframeId","hidden":true},{"dataIndex":"auxiliaryId","header":"auxiliaryId","hidden":true},{"dataIndex":"engineId","header":"engineId","hidden":true},{"dataIndex":"bulletinNumber","header":"bulletinNumber","renderer":"RenderRow"},"hidden":false},{"dataIndex":"Fecha","header":"Fecha","hidden":false},{"dataIndex":"bulletinTypeId","header":"bulletinTypeId","hidden":true},{"dataIndex":"ataCode01","header":"ataCode01","hidden":false},{"dataIndex":"ataCode02","header":"ataCode02","hidden":false},{"dataIndex":"ataCode03","header":"ataCode03","hidden":false},{"dataIndex":"relatesId","header":"relatesId","hidden":true},{"dataIndex":"modelNumber","header":"modelNumber","hidden":false},{"dataIndex":"belongTo","header":"belongTo","hidden":false}]},"TotalRegistries": 16,"data" : [{"bulletinId":"2","airframeId":"4","auxiliaryId":"0","engineId":"0","bulletinNumber":"3546","Fecha":"2009-11-23}]
    and this is my function to renderer in one column
    Code:
        function RenderRow(value,p,rec) {
            return value+'<p><span style="font-size: 8pt; color: Navy; font-family: Verdana; font-weight: bold;">' + rec.data.Name + '</span></p>';
        }
    So, to the first column, I want to visualize the renderer , like viewconfig

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,266
    Vote Rating
    121
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      1  

    Default


    Proper JSON cannot have variable references or inline functions. If you were to change your JSON encoder to spit out:

    Code:
    "renderer": RenderRow,
    Your existing code would work without problem.

    When specifying a string for a renderer, Ext will automatically look in the Ext.util.Format namespace. Therefore if you did the following:

    Code:
    Ext.util.Format.RenderRow = function (value,p,rec) {
       return value+'<p><span style="font-size: 8pt; color: Navy; font-family: Verdana; font-weight: bold;">' + rec.data.Name + '</span></p>';
    };
    Your original JSON will work. I would rename the function and go this route.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    82
    Vote Rating
    0
    andryi is on a distinguished road

      0  

    Default


    hi aconran, well, I try with your code, and have some problems, when I put the renderer , the grid not load but If I not put the renderer the grid works, so

    this is the json
    Code:
    {"metaData" : { "totalProperty" : "TotalRegistries" , "root" : "data" , "fields": ["bulletinId","airframeId","auxiliaryId","engineId","bulletinNumber","Fecha","bulletinTypeId","ataCode01","ataCode02","ataCode03","relatesId","modelNumber","belongTo"], "colModel" : [ new Ext.grid.CheckboxSelectionModel({checkOnly: true, singleSelect: false}),{"dataIndex":"bulletinId","header":"bulletinId","hidden":false},{"dataIndex":"airframeId","header":"airframeId","hidden":true},{"dataIndex":"auxiliaryId","header":"auxiliaryId","hidden":true},{"dataIndex":"engineId","header":"engineId","hidden":true},{"dataIndex":"bulletinNumber","header":"bulletinNumber","renderer":RenderRow,"hidden":false},{"dataIndex":"Fecha","header":"Fecha","hidden":false},{"dataIndex":"bulletinTypeId","header":"bulletinTypeId","hidden":true},{"dataIndex":"ataCode01","header":"ataCode01","hidden":false},{"dataIndex":"ataCode02","header":"ataCode02","hidden":false},{"dataIndex":"ataCode03","header":"ataCode03","hidden":false},{"dataIndex":"relatesId","header":"relatesId","hidden":true},{"dataIndex":"modelNumber","header":"modelNumber","hidden":true},{"dataIndex":"belongTo","header":"belongTo","hidden":false}]},"TotalRegistries": 15,"data" : [{"bulletinId":"2","airframeId":"4","auxiliaryId":"0","engineId":"0","bulletinNumber":"3546","Fecha":"2009-11-23 00:00:00.0","bulletinTypeId":"1","ataCode01":"2","ataCode02":"2","ataCode03":"2","relatesId":"0","modelNumber":"1122","belongTo":"Airframe: AIRFRAME0004"},{"bulletinId":"3","airframeId":"0","auxiliaryId":"0","engineId":"1","bulletinNumber":"999","Fecha":"2009-02-15}]
    and this is the function to renderer
    Code:
       Ext.util.Format.RenderRow = function (value,p,rec) {
       return value+'<p><span style="font-size: 8pt; color: Navy; font-family: Verdana; font-weight: bold;">' +     rec.data.belongTo + '</span></p>';
    };

  4. #4
    Ext User
    Join Date
    Jul 2009
    Posts
    82
    Vote Rating
    0
    andryi is on a distinguished road

      0  

    Default


    any suggestion?

  5. #5
    Ext User
    Join Date
    Dec 2009
    Posts
    1
    Vote Rating
    0
    vigneswaran is on a distinguished road

      0  

    Smile Checkonly not working

    Checkonly not working


    I used your code..i have problem regarding checkbox..i want checkbox to get selected only when i click checkbox..whereas using this code,the checkbox gets selected when i click anywhere in the corresponding row..i heard it doesn't work in extjs2.2..Is there any way to do it in extjs2.2..

  6. #6
    Ext User
    Join Date
    Dec 2007
    Location
    Maida Vale
    Posts
    96
    Vote Rating
    0
    dearsina is on a distinguished road

      0  

    Default


    Thank you aconran, thank you! You just solved an issue I've been scratching my head over the past few hours.

    But what about a predefined Ext renderer, like Ext.util.Format.dateRenderer() that expects values to be fed to it, how do you best reference those renderers dynamicly, including their values?