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

ExtJS Grid Panel类为您提供定义自定义样式的参数。您可以使用以下类参数：

边界
bodyStyle
bodyCls
bodyBorder
bodyPadding

您可以使用这些参数的组合来操纵网格的边框和主体样式。有关这些参数的详细信息，请参阅文档。

Answer 2

您可以在任何网格或任何绘制框的组件上设置此配置的快速和脏：

style: 'border: solid Red 2px'

更正确的方法是创建css规则并在配置中设置cls:'myRedBorderRule。

编辑：

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

Answer 3

在css下添加以删除边框

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

改变网格的边界

3 个答案: