Change border of grid - extjs4

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',
.....

Answer 2

ExtJS Grid Panel class provides you with parameters to define your custom styles. You can make use of the following class parameters :
border
bodyStyle
bodyCls
bodyBorder
bodyPadding
You can use combination of these parameters to manipulate the grid's border and body styles. Refer to the docs for details of these parameters.

Answer 3

Add below css to remove border
.x-panel-body .x-grid-item-container .x-grid-item {
border: none;
}