1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    19
    Answers
    1
    Vote Rating
    0
    jweymarn is on a distinguished road

      0  

    Default Answered: Grid panel: style CELL according to its value (not whole row)

    Answered: Grid panel: style CELL according to its value (not whole row)


    Hi Gurus!

    My goal: I want to have a grid panel with lots of rows and columns. The cells will contain numbers and I want each and every cell to format according to its value. There are plenty of examples like below out there but that's for the whole row.
    Code:
    viewConfig: {
       getRowClass: function(record, index) {
          var c = record.get('dataIndexA');      
          ...
    Because there will be a lot of cells in my grid I would like to move the styling over to the data if possible. Now I load my data from a .json file which looks something like:
    Code:
    {
        data:[
                    {
                        "topic": "Account balance",
                        "jan": 100,
                        "feb": -10,
                        ...

    Can I specify a cls style for each value (as can be done for example with a treePanel)? Something like:
    Code:
    {
        data:[
                     {"topic": "Account balance"},
                     {"jan": 100, "cls": "trafficLightGreen"},
                     {"feb": -10, "cls": "trafficLightRed"},
                     {"march": 42, "cls": "trafficLightGreen"},
                     ...
    With the above the grid will render empty. :-(

  2. Thanks!
    Working now with the below code:

    Code:
    function trafficLightRenderer(value, metaData){
        //alert('Value passed is: '+value);
        if (value <= 0){
            metaData.tdCls += 'trafficLightRed';
        } else {
            metaData.tdCls += 'trafficLightGreen';
        }
        return value;
    }
    ...
    ...
    ...
    table1 = Ext.create('Ext.grid.Panel', {
            store: table1store,
            width: tableWidth,
            //minHeight: 400,
            title: 'Topic',
            cls: 'center table',
            border: 0,
            columns: [
                {
                    text: 'Topic A',
                    width: tableFirstColWidth,
                    dataIndex: 'topicA',
                    sortable: false,
                    hideable: false
                },
                {
                    text: 'Jan',
                    width: tableColWidth,
                    dataIndex: 'jan',
                    sortable: false,
                    renderer: trafficLightRenderer
                },
                {
                    text: 'Feb',
                    width: tableColWidth,
                    //flex: 1,
                    sortable: false,
                    dataIndex: 'feb',
                    renderer: trafficLightRenderer
                },

  3. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,663
    Answers
    130
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    http://docs.sencha.com/ext-js/4-0/#!...n-cfg-renderer

    gives you all you need. like:

    Code:
    metaData.style += 'color:red;';
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    19
    Answers
    1
    Vote Rating
    0
    jweymarn is on a distinguished road

      0  

    Default


    Thanks!
    Working now with the below code:

    Code:
    function trafficLightRenderer(value, metaData){
        //alert('Value passed is: '+value);
        if (value <= 0){
            metaData.tdCls += 'trafficLightRed';
        } else {
            metaData.tdCls += 'trafficLightGreen';
        }
        return value;
    }
    ...
    ...
    ...
    table1 = Ext.create('Ext.grid.Panel', {
            store: table1store,
            width: tableWidth,
            //minHeight: 400,
            title: 'Topic',
            cls: 'center table',
            border: 0,
            columns: [
                {
                    text: 'Topic A',
                    width: tableFirstColWidth,
                    dataIndex: 'topicA',
                    sortable: false,
                    hideable: false
                },
                {
                    text: 'Jan',
                    width: tableColWidth,
                    dataIndex: 'jan',
                    sortable: false,
                    renderer: trafficLightRenderer
                },
                {
                    text: 'Feb',
                    width: tableColWidth,
                    //flex: 1,
                    sortable: false,
                    dataIndex: 'feb',
                    renderer: trafficLightRenderer
                },

  5. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    19
    Answers
    1
    Vote Rating
    0
    jweymarn is on a distinguished road

      0  

    Default


    A new small but annoying question arose relating to this... If anyone else gets stuck on this...

    In my CSS style trafficLightRed I, among other things, want to align the text in the middle. For some mysterious reason ExtJS adds a style (text-align: left) marking right inside the HTML <td> tag that then overrides any alignment i try to do:

    Code:
    <td class=" x-grid-cell x-grid-cell-gridcolumn-1036 trafficLightRed">
       <div class="x-grid-cell-inner x-unselectable" style="text-align: left;" unselectable="on">
          3
       </div>
    ...
    ...
    To, inside the trafficLightRed style put the text-align: center as !important did not help.

    The solution i found to this was to in my renderer add metaData.style += 'text-align: center !important' so that in the HTML source both left and center are present but center overrides due to the !important command...

    Code:
    metaData.tdCls += 'trafficLightRed';
    metaData.style += 'text-align: center !important'
    
    <td class=" x-grid-cell x-grid-cell-gridcolumn-1036  trafficLightRed">
    
       <div class="x-grid-cell-inner x-unselectable" style="text-align: center !important; text-align: left;" unselectable="on">
          3
       </div>
    Not pretty but hey it works...

  6. #5
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,663
    Answers
    130
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    well, i would not call it a mystery:

    http://docs.sencha.com/ext-js/4-0/#!...lumn-cfg-align
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  7. #6
    Sencha User
    Join Date
    Nov 2011
    Posts
    19
    Answers
    1
    Vote Rating
    0
    jweymarn is on a distinguished road

      0  

    Wink


    Dammit! Somehow I had assumed that the API page for grid.panel contained everything i needed for that particular component... I was wondering how Google knew so much more about grids than the API... my bad!

    Thank you for not calling me styypid... I know is must have crossed your mind... :-)

  8. #7
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,663
    Answers
    130
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    nah, the grid has a lot of subclasses and it takes time to get familiar with them.

    you should mark this topic as "answered", so other users can use it if they stuck on the same issue.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  9. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    19
    Answers
    1
    Vote Rating
    0
    jweymarn is on a distinguished road

      0  

    Default


    Quote Originally Posted by tobiu View Post
    nah, the grid has a lot of subclasses...
    Exactly, but only 3 are listed in the API page for grid panel...

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar