Results 1 to 6 of 6

Thread: how can I use renderer in dynamic grid

  1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    86

    Default 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 User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    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

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    86

    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
    Sencha User
    Join Date
    Jul 2009
    Posts
    86

    Default

    any suggestion?

  5. #5

    Smile 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

    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?

Posting Permissions

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