Results 1 to 2 of 2

Thread: Color legend for the grid panel

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    26
    Vote Rating
    0
      0  

    Default Color legend for the grid panel

    Hi,

    I have a requirement that each cell in the grid can take any color out of available 8 colors based on some criteria. After that I need to show a color legend of those 8 colors and their tag names below the grid panel. Can somebody help me how can I implement this feature.

    All colors are defined in css file ...

    test.css
    ----------
    .replgrp0 .x-grid-cell {
    background-color: #f0f6ff;
    color: #09d6ff;
    border-left: 1px dotted rgba(2, 3, 3, 0.27);
    border-right: 1px dotted rgba(2, 3, 3, 0.27);
    }


    .replgrp1 .x-grid-cell {
    background-color: rgba(255, 183, 189, 0.22);
    color: #900;
    border-left: 1px dotted rgba(2, 3, 3, 0.27);
    border-right: 1px dotted rgba(2, 3, 3, 0.27);
    }


    .replgrp2 .x-grid-cell {
    background-color: #e2ffe2;
    color: #090;
    border-left: 1px dotted rgba(2, 3, 3, 0.27);
    border-right: 1px dotted rgba(2, 3, 3, 0.27);
    }


    .replgrp3 .x-grid-cell {
    background-color: rgba(255, 233, 228, 0.12);
    color: #99890e;
    border-left: 1px dotted rgba(2, 3, 3, 0.27);
    border-right: 1px dotted rgba(2, 3, 3, 0.27);
    }


    .replgrp4 .x-grid-cell {
    background-color: rgba(186, 242, 250, 0.10);
    color: #1a4f99;
    border-left: 1px dotted rgba(2, 3, 3, 0.27);
    border-right: 1px dotted rgba(2, 3, 3, 0.27);
    }


    .replgrp5 .x-grid-cell {
    background-color: rgba(255, 242, 239, 0.23);
    color: #ff7f00;
    border-left: 1px dotted rgba(2, 3, 3, 0.27);
    border-right: 1px dotted rgba(2, 3, 3, 0.27);
    }


    .replgrp6 .x-grid-cell {
    background-color: rgba(228, 224, 255, 0.7);
    color: rgba(29, 7, 255, 0.60);
    border-left: 1px dotted rgba(2, 3, 3, 0.27);
    border-right: 1px dotted rgba(2, 3, 3, 0.27);
    }


    .replgrp7 .x-grid-cell {
    background-color: rgba(255, 233, 228, 0.32);
    color: rgba(255, 22, 12, 0.65);
    border-left: 1px dotted rgba(2, 3, 3, 0.27);
    border-right: 1px dotted rgba(2, 3, 3, 0.27);
    }


    .norepl .x-grid-cell {
    background-color: rgb(255, 255, 255);
    color: rgb(255, 127, 0);
    border-left: 1px dotted rgba(2, 3, 3, 0.27);
    border-right: 1px dotted rgba(2, 3, 3, 0.27);
    }

    Thanks and Regards,
    Nari

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

    Default

    You just want to know how to create a legend? You can use colored panel?

    Code:
    .mycolor {
        background-color: #FFB0C4;
        color:red;
    }
    
    var panel = Ext.create('Ext.panel.Panel', {
        width: 200,
        html: 'Legend Item 1',
        renderTo: Ext.getBody(),
        bodyCls: 'mycolor'
    });
    Scott.

Posting Permissions

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