Question

美好的一天。我有一个Web应用程序，我想更改我的属性网格的列标题/属性的样式。我设法以编程方式更改列名称（这是一个侦听PropertyGrid的before render事件的函数）：

onPropertygridBeforeRender: function(component, eOpts) {
    var cols = component.getView().getHeaderCt().getGridColumns();
    cols[0].setText("Mode");
    cols[1].setText("Amount");
},

但是，我怀疑我是否也可以以编程方式格式化属性。到目前为止，我尝试过的是PropertyGrid的renderer函数：

    renderer: function(v){
        return '<div style="text-align: right;"><span style="font-family:Arial; font-weight: bold; font-size: 15px; line-height: normal;">' + v + '</span></div>';
    },

但是，这只会改变细胞。就我而言，它只更改了Amount列下方的行而不是Mode列。另外，我注意到如果我更改了属性网格的内容，例如我更改了Amount列中的任何内容，格式化就会消失。

我也尝试了bodyStyle：

bodyStyle: {
        background: '#ffc',
        padding: '0px'
},

但是，这不会影响列标题或Mode列下的行。它也很容易被重置＆＃34;如果用户更改字段的值。

有谁知道如何正确设置/格式化Property Grid？我无法编写CSS来拯救我的生命，因此非常感谢任何帮助。提前谢谢。

Answer 1

使用CSS哟更改网格视觉属性

// This changes the CSS for all cells
.x-grid-cell {
    color: #FF0000;
}
// This changes the CSS for the Value Column    
.x-grid-cell-value {
    text-align: right;
    font-family:Arial; 
    font-weight: bold; 
    font-size: 15px; 
    line-height: normal;
}
// This changes the CSS for the Name Column
.x-grid-cell-name {
    font: italic bold 16px Helvetica;
}

显然，这将改变项目中每个网格的CSS，因此如果您只想更改此网格，请将其添加到网格：cls: 'myCustomGrid'，然后在类之前添加.myCustomGrid名称（例如.myCustomGrid .x-grid-cell { color: #FF0000; }）

ExtJS 4 - CSS - PropertyGrid列标题/属性样式

1 个答案: