Change border of grid

Question

I have following code that I creating a grid

var store = Ext.create('Ext.data.ArrayStore', {
    fields: [
   { name: 'company' },
   { name: 'price', type: 'float' },
   { name: 'change', type: 'float' },
   { name: 'pctChange', type: 'float' }

],
    data: myData
});
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    renderTo: 'divGrid',
    columns: [
    {   text: 'Company',
        flex: 1,
        dataIndex: 'company'
    },
    {   text: 'Price',
        flex: 1, 
        dataIndex: 'price'
    },
    {   text: 'Change',
        flex: 1,
        dataIndex: 'change'
    },
    {   text: '% Change',
        flex: 1,
        dataIndex: 'pctChange'
    }],
        height: 250,
        width: '100%',
        title: 'Array Grid',
        renderTo: 'grid-example',
        viewConfig: {
            stripeRows: true
        }
    });

});

I want to change color and width of border grid. How can I do it ?

Answer 1

Quick and dirty you can set this config on any grid or really any component that draws a box:

style: 'border: solid Red 2px'

The more correct way is to create a css rule and set cls:'myRedBorderRule' in the config.

EDIT:

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    renderTo: 'divGrid',
    style: 'border: solid Red 2px',
    .....