PDA

View Full Version : Grid not showing the column headers in bold italic when I turn on a filter



WagsMax
28 Sep 2012, 2:47 PM
My grid is not showing the column headers in bold italic when I turn on a filter. Here is my code:


Ext.define('MyApp.view.SimpsonsGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.simsonsgrid',
id: 'simpsonsgrid',
itemId: 'simpsonsgrid',

requires: [
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.grid.FiltersFeature'
],


frame: false,
title: 'Cases',
bodyPadding: 5,
closable: true,

store: Ext.data.StoreManager.lookup('Simpsons'),

features: [{
ftype: 'filters',
encode: true,
local: true,
filters: [{
type: 'boolean',
dataIndex: 'visible'
}]
}],

columns: [
{ text: 'Name', dataIndex: 'name', filterable: true, filter: { type: 'string'} },
{ text: 'Email', dataIndex: 'email', filterable: true, filter: { type: 'string'} },
{ text: 'Phone', dataIndex: 'phone', filterable: true, filter: { type: 'string'} }
],


dockedItems: [Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
store: Ext.data.StoreManager.lookup('Simpsons')
})]
});

sword-it
29 Sep 2012, 1:25 AM
Hi Wagsmax,

It seems you want to give style to grid header text, you can use componentCls config of gridColumns like



columns: [
{
text: 'Name',
componentCls: 'sword',
dataIndex: 'name'},
{
text: 'Email',
componentCls: 'sword',
dataIndex: 'email',
flex: 1},
{
text: 'Phone',
componentCls: 'sword',
dataIndex: 'phone'}
]

for more info read API - http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-componentCls
See working example here - http://jsfiddle.net/maneeshgo/nvR2f/

vietits
29 Sep 2012, 1:39 AM
@Wagsmax,

Do you have a link to GridFilters.css file which locates inside ux/grid/css folder?