Изменить границу сетки

Question

У меня есть следующий код, который я создаю сетку

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
        }
    });

});

Я хочу изменить цвет и ширину сетки сетки.Как я могу это сделать?

Answer 1

Быстро и грязно, вы можете установить этот конфиг на любую сетку или на любой компонент, который рисует прямоугольник:

style: 'border: solid Red 2px'

Более правильный способ - создать правило css и установить в конфигурации cls:'myRedBorderRule '.

EDIT:

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

Answer 2

Класс ExtJS Grid Panel предоставляет параметры для определения ваших пользовательских стилей. Вы можете использовать следующие параметры класса:

• Граница
• Bodystyle
• bodyCls
• bodyBorder
• bodyPadding

Вы можете использовать комбинацию этих параметров для манипулирования границей сетки и стилями тела. Подробнее об этих параметрах см. В документации.

Answer 3

Добавьте ниже CSS для удаления границы

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