PDA

View Full Version : How change color of GridPanel title bar?



tBSTAR
28 Apr 2011, 5:41 AM
This is my Grid class


.void { background-color:#FF00FF !important; }

Application.PersonnelGrid = Ext.extend(Ext.grid.GridPanel, {
border:false
,frame: true
,columnLines: true
,region: 'center'
,autoHeight: true
,title:' '
,width: 800
//,maskDisabled: false
//,height: 200
,initComponent:function() {
var config = {
store:new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: [{name: 'CD'}, {name: 'DE'}]}),
sortInfo:{field:'CD',direction:'ASC'},
remoteSort: false })
,columns:[{ header: 'Date', dataIndex: 'CD', width: 135, sortable: true },
{ header: 'Description', dataIndex: 'DE', width: 670, sortable: false }]
,viewConfig:{forceFit:true}
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

Application.PersonnelGrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent

,onRender:function() {
//this.store.load();
Application.PersonnelGrid.superclass.onRender.apply(this, arguments);
} // eo function onRender
});

var gridHistory = new Application.PersonnelGrid();
gridHistory.addClass('void');


I tried everything with no luck, any help would be appreciated.

Fahd

tryanDLS
28 Apr 2011, 7:25 AM
Use firebug to see what class is added to the element you want to change and add a CSS override.

http://sencha.com/learn/Ext_FAQ_Grid

tBSTAR
28 Apr 2011, 9:03 AM
the class name is 'x-panel-tl', how do I override it?

tryanDLS
28 Apr 2011, 11:01 AM
Add a CSS entry to your style sheet, after the ext css file.

If you had looked at the referenced FAQ, you would see a number of examples related to altering the grid appearance in the Appearance section.

fay
28 Apr 2011, 11:02 AM
Search the FAQ (http://sencha.com/learn/Ext_FAQ_Grid) Tim pointed you to for "Adding border lines to cells in grid" and "Styling a grid" and there are some examples of how to override CSS.