CSS - ExtJS 4 - Styling the Grid Panel Column Header

1
votes

Good day. I am developing a web application. I have a form where I have a Grid Panel. I want the Grid Panel to have a border around it and in between the columns. I've achieved this for the Grid View, however, I am struggling to put borders on the column headers. Here is how my Grid Panel looks like:

Grid Panel

As you can see, the Grid View (the one below the column headers) have borders around them, while the Column Headers do not. Here is the CSS Resource that I used:

.child-row .x-grid-cell{
    font-size: 17px; 
    font-weight: bold; 
    font-style: italic; 
    font-family: 'Times New Roman';

    border-bottom-color: #000000; 
    border-bottom-style: solid; 
    border-top-color: #000000; 
    border-top-style: solid; 
    border-right-color: #000000; 
    border-right-style: solid; 
    border-left-color: #000000; 
    border-left-style: solid; 

    line-height: 17px;
    height: 100px;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
} 

.child-row .x-grid-cell-inner{
    text-align:center !important;
    white-space: normal !important;
}

And thus far, it's worked well for styling the grid cells. I used this in my gridView as such:

viewConfig: {
    getRowClass: function(record, rowIndex, rowParams, store) {
        return 'child-row';
    },
    itemId: 'pfReceiptGrid',
    style: 'border: solid Black 1px'
},

I need to put the border code in there because otherwise, only the inside of the columns will have borders between them.

Can anyone help me with this? I'm not good with CSS and I'm a newbie in ExtJS 4. I've been stuck here for quite some time trying various .x-grid- code in hopes of making something work but to no avail. Thank you in advance for the help.

2
cssextjsextjs4extjs4.2

2 Answers

3
votes

The following will colour the header for all Extjs 4 grids (based on application to http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/array-grid.html). It's up to you to put an ID to this grid and limit the CSS to apply to this specific grid (#myGrid) if you don't want to affect other grid components.

.x-grid-header-ct { border: 1px solid #000; }
.x-grid-header-ct .x-box-inner { border-bottom: 1px solid #000;}
.x-grid-header-ct .x-box-inner .x-column-header-inner { border-right: 1px solid #000; }
0
votes

When i have similar issues i try to inspect the html code in hopes of finding the right css class. Have you tried

.x-column-header { border-right: 1px solid #7e7e7e; /*your style here*/ }