Grid with colored columns

hi guys

I have a requirment where i need to come up with a grid on a screen where when user selects
data on first column, the related data on other columns needs to be highlighted.

from the image
colored-grid.png
When user clicks on apple, it should be highlighted in yellow and
its corresponding data in other columns should also be highlighted in yellow.
Similarly with Mango and PineApple.

Is there any grid in Ext-js 4.2 which i can use to support this feature?

Thanks.
royjaydAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
you need to store the color somewhere for each product

var colors = {};
function getColor(product) {
    if(colors[product]) return colors[product];
    colors[product] = '#' + Math.random().toString(16).slice(2, 8);
    return colors[product];
}

Open in new window


and use :
cells[i].style.backgroundColor = getColor(record.data.product);

Open in new window

0
 
Priya SudharsanProgrammer AnalystCommented:
try using renderer property.
0
 
royjaydAuthor Commented:
renderer can get little complex, there are more than 100 products in my grid.
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
leakim971PluritechnicianCommented:
could you provide a SIMPLE and sample data? Thanks.
0
 
royjaydAuthor Commented:
Sure
we have backend in java which will return json data
so we will have something like
{
    "total": 3,
    "data": [
        {
            "product": "apple",
            "timeOfYear": "april",
            "salesAmount": ">400"           
        },
        {
            "product": "mango",
            "timeOfYear": "july",
            "salesAmount": ">150" 
        },
        {
             "product": "pineapple",
            "timeOfYear": "feb",
            "salesAmount": ">200" 
        },
       {
             "product": "grapes",
            "timeOfYear": "feb",
            "salesAmount": ">150" 
        }

    ],
    "success": true,
    "serverMessage": null
}

Open in new window


and for the above data the grid will be displayed
colored-grid1.png
0
 
leakim971PluritechnicianCommented:
where do come from the right color?
0
 
royjaydAuthor Commented:
it can be any color (in random) but each selected product has unique color to differentiate from the rest.
0
 
leakim971PluritechnicianCommented:
so what about a renderer for each column like this one :
function rndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}

Open in new window


listen for cell click for your grid :
    listeners: {
        cellclick: function(cell, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
            var cells = Ext.query("."+record.data.product + "-color");
            for(i=0;i<cells.length;i++) {
                cells[i].style.backgroundColor = getRandomColor();
            }
        }
    }

Open in new window


and you create a function getRandomColor to return a random color
0
 
royjaydAuthor Commented:
tested it in fiddle by hardcoding the color to red..

Ext.create('Ext.data.Store', {
    storeId:'productStore',
    fields:['product','timeOfYear', 'salesAmount'],
    groupField: 'department',
    data:[
        {product:"apple", timeOfYear:"april", salesAmount:">400"},    
        {product:"mango", timeOfYear:"july", salesAmount:">150"},  
        {product:"pineapple", timeOfYear:"feb", salesAmount:">200"},
        {product:"grapes", timeOfYear:"feb", salesAmount:">150"}
                               
    ]
});


function productRndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}

function timeRndr(value, meta) {
        meta.tdCls = meta.record.data.timeOfYear + "-color";
        return value;
}

function salesRndr(value, meta) {
        meta.tdCls = meta.record.data.salesAmount + "-color";
        return value;
}
 

Ext.create('Ext.form.Panel',{
    layout : {
		type : 'hbox',
		align: 'left',
		pack: 'center'
        
	}, 
    items: [       
	{
        id:'myGrid',
        xtype : 'grid',       
        title: 'Product / Time/ Sales Analysis',
        store: Ext.data.StoreManager.lookup('productStore'),       
        autoHeight: true,        
        columns: [
            {header: "Product", width: 79, dataIndex: 'product', renderer:productRndr,
            listeners: {
				cellclick: function(cell, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
				var cells = Ext.query("."+record.data.product + "-color");
				for(i=0;i<cells.length;i++) {
                cells[i].style.backgroundColor = 'red';
					}
				}
			}},
            {header: "Time", width: 100, dataIndex: 'timeOfYear', renderer: timeRndr, sortable: true
              

                      
			},
            {header: "Sales Amount", width: 100, dataIndex: 'salesAmount', sortable: true,renderer:salesRndr},
              
            
        ],
        

    
 
    height:410,
    //width:400,
    // split: true,
    // region: 'south',
    renderTo: Ext.getBody() //Ext.getBody()
	}

    ]
    }
           
)

Open in new window


cant seem to make it work.
Can you tell me what is wrong..
Thanks very much.
0
 
leakim971PluritechnicianCommented:
check here t osee the difference : http://jsfiddle.net/of0ntLhu/3/
0
 
royjaydAuthor Commented:
ok thanks.
I took your code and replaced 'red' with random color generator using:
'#' + Math.random().toString(16).slice(2, 8);


Ext.create('Ext.data.Store', {
    storeId:'productStore',
    fields:['product','timeOfYear', 'salesAmount'],
    groupField: 'department',
    data:[
        {product:"apple", timeOfYear:"april", salesAmount:">400"},    
        {product:"mango", timeOfYear:"july", salesAmount:">150"},  
        {product:"pineapple", timeOfYear:"feb", salesAmount:">200"},
        {product:"grapes", timeOfYear:"feb", salesAmount:">150"}
                               
    ]
});


function productRndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}

function timeRndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}

function salesRndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}


Ext.create('Ext.form.Panel',{
    layout : {
		type : 'hbox',
		align: 'left',
		pack: 'center'
        
	}, 
    items: [       
	{
        id:'myGrid',
        xtype : 'grid',       
        title: 'Product / Time/ Sales Analysis',
        store: Ext.data.StoreManager.lookup('productStore'),       
        autoHeight: true,        
        columns: [
            {header: "Product", width: 79, dataIndex: 'product', renderer:productRndr},
            {header: "Time", width: 100, dataIndex: 'timeOfYear', renderer: timeRndr, sortable: true },
            {header: "Sales Amount", width: 100, dataIndex: 'salesAmount', sortable: true,renderer:salesRndr}              
        ],
    height:410,
    //width:400,
    // split: true,
    // region: 'south',
    renderTo: Ext.getBody(), //Ext.getBody()
        
        
    listeners: {
				cellclick: function(cell, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
				var cells = Ext.query("."+record.data.product + "-color");
				for(i=0;i<cells.length;i++) {
                cells[i].style.backgroundColor = '#' + Math.random().toString(16).slice(2, 8);
					}
				}
			}	}
    ]
    }
           
)

Open in new window


But when i click on apple, i see 3 different colors.
Any clue
0
 
royjaydAuthor Commented:
Thanks.

What i have done now is
I have taken uniique set of products, unique set of Time, unique set of Salesamount.
so from unique set of Time, feb is eliminated
from unique set of sales amount >150 is eliminated

This is the code (tested in fiddle)
Ext.create('Ext.data.Store', {
    storeId:'productStore',
    fields:['product','timeOfYear', 'salesAmount'],
    groupField: 'department',
    data:[
        {product:"apple", timeOfYear:"april", salesAmount:">400"},    
        {product:"mango", timeOfYear:"july", salesAmount:">150"},  
        {product:"pineapple", timeOfYear:"feb", salesAmount:">200"},
        {product:"grapes", timeOfYear:"feb", salesAmount:">150"}
                               
    ]
});



var colors = {};
function getColor(product) {//make a new color for every product and return that
    if(colors[product])
    return colors[product];
    colors[product] = '#' + Math.random().toString(16).slice(2, 8);
    return colors[product];
}


function productRndr(value, meta) {
        meta.tdCls = meta.record.data.product + "-color";
        return value;
}

var maco = {};
function timeRndr(value, meta) {
    if( !maco[value] ) {  // check if it already exists (return null if not)
        maco[value] = true;
        meta.tdCls = meta.record.data.product + "-color";
        return value;
    }
    else {
        return  '';
    } 
}



var maco1 = {};
function salesRndr(value, meta) {
        if( !maco1[value] ) {  // check if it already exists (return null if not)            
        maco1[value] = true;
        meta.tdCls = meta.record.data.product + "-color";
        return value;
    }
    else {
        return  '';
    }
    
       
}


Ext.create('Ext.form.Panel',{
    layout : {
		type : 'hbox',
		align: 'left',
		pack: 'center'
        
	}, 
    items: [       
	{
        id:'myGrid',
        xtype : 'grid',       
        title: 'Product / Time/ Sales Analysis',
        store: Ext.data.StoreManager.lookup('productStore'),       
        autoHeight: true,        
        columns: [
            {header: "Product", width: 79, dataIndex: 'product', renderer:productRndr},
            {header: "Time", width: 100, dataIndex: 'timeOfYear', renderer: timeRndr, sortable: true },
            {header: "Sales Amount", width: 100, dataIndex: 'salesAmount', sortable: true,renderer:salesRndr}              
        ],
    height:410,
    //width:400,
    // split: true,
    // region: 'south',
    renderTo: Ext.getBody(), //Ext.getBody()
        
        
    listeners: {
				cellclick: function(cell, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
				var cells = Ext.query("."+record.data.product + "-color");
				//alert(cells);
                for(i=0;i<cells.length;i++) {
                //cells[i].style.backgroundColor = '#' + Math.random().toString(16).slice(2, 8);
                cells[i].style.backgroundColor = getColor(record.data.product);

					}
				}
			}	}
    ]
    }
           
)

Open in new window


Now when apple is clicked  i see the first row selected
Now when mango is clicked i see the second row selected
Now when pineapple is clicked  i see the third row selected

When grapes is clicked
{product:"grapes", timeOfYear:"feb", salesAmount:">150"}

I want to show something like
colored-grid2.png
Is there any way i can fill a grid cell with two colors
For example
cell with 'feb' has two colors (one for pineapple and one for grapes)
cell with '>150' has two colors (one for mango and one for grapes)

Thanks.
0
 
leakim971PluritechnicianCommented:
I don't see any way to do that
0
 
royjaydAuthor Commented:
ok thanks.
0
 
royjaydAuthor Commented:
any help with my next question will be greatly appreciated
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28511714.html

Thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.