CODEWITHSUNDEEP
extjs4
Gregory Nozik
Gregory Nozik

Reputation: 3372

Change border of grid

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 ?

Upvotes: 1

Views: 12281

Answers (3)

user486631
user486631

Reputation:

Add below css to remove border

.x-panel-body .x-grid-item-container .x-grid-item {
        border: none;
    }

Upvotes: 0

dbrin
dbrin

Reputation: 15673

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

Upvotes: 3

Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

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.

Upvotes: 3

Related Questions