# Theme customization

## Customizing a Filter Panel

### Adding an icon to the left of a folder title

In order to set an icon to the left of a folder title, in case the folder contains a filter panel:

* add to xtheme.css file something like

```
.x-tab-strip .x-tab-with-icon span.x-tab-strip-text.myclassename {
	background-image: url(../images/menu/myiconname.png) !important;
}
```

where "myclassname" represents the name of a CSS class referring the icon to show for this specific panel

* set to the "Additional Settings" available in the Filter Panel definition pane something like

```
iconCls: "myclassname"
```

###

### Adding additional graphical settings to a filter panel

You can include more settings for a filter panel using the "Additional Settings" available in the Filter Panel definition pane something like.

See <https://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.FormPanel> to get a whole description of available settings.

### Adding a placeholder inside an input control

It is possible to set an initial tooltip text within the control, which disappears automatically when typing a text in it. In order to do it add to Additional Settings property for a control named **emptyText.**

Example:

```
emptyText: "abc"
```

## Customizing a Grid Panel

### A grid having rows with different heights

It is not needed to set any additional setting to have rows with different heights: you have simply to set a cell content having multiple lines. Lines can be expressed in HTML format and a new line is represented by the \<br> tag.

A good approach can be to bind a server-side javascript business component and use it to fill in the cell content: through javascript you can easily create complex HTML  content, using for example the tags \<table> \<tr> \<td>.

An alternative approach is to do it on the web layer, through the renderer property of a column, where you can define HTML content, for example using the tags \<table> \<tr> \<td>:

```
value = 
'<table height=200 width=200>'+
'<tr><td>ID  :</td><td>'+record.data.id+'</td></tr>'+
'<tr><td>PIN :</td><td>'+record.data.pin+'</td></tr>'+
'<tr><td>Address :</td><td>'+record.data.address+'</td></tr>'+
'</table>';
```

In this example, the record passed to the row must contains attributes named id, pin and address.

### Adding additional graphical settings to a grid panel

You can include more settings for a filter panel using the "Additional Settings" available in the Grid Panel definition pane something like.

See <https://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.GridPanel> to get a whole description of available settings.

### Customizing column headers

The column header area can contain:

* the column header text
* optionally the ascending/descending icon to show a data ordering (the column header is a three-state clickable button: no sort, ascending sort, descending sort)
* optionally the filter icon, used to emphasize the application of a filter condition on such a column; default behavior: visible on the left-top side, beside the text
* optionally the "no filter applied" icon, used to emphasize the application of a filter condition on such a column; default behavior: NOT visible; if set to visible, it would be on the left-top side, beside the text and as an alternative to the filter icon

It is possible to customize the column header content through a series of CSS classes:

**Column header height**

class name: **x-grid3-hd-inner**

Example: how to increase header height

```
.x-grid3-hd-inner {
    height: 30;
}
```

**Filter condition applied icon**

class name: **filter\_on**

Example: position the filter icon on the bottom-left position

```
.filter_on {
    position: absolute;
    bottom: 10;
}
```

Example: redefining the filter icon

```
.filter_on{
	width: 12;
	height: 12;
	background: url(../images/filter_on.gif) no-repeat;
}
```

**NO filter condition applied icon**

class name: **filter\_off**

Example: position the NO filter icon on the bottom-left position

```
.filter_off {
    position: absolute;
    bottom: 10;
}
```

Example: redefining the NO filter icon

```
.filter_off{
	display: initial;
	width: 12;
	height: 12;
	background: url(../../extjsutils/images/filter_off.gif) no-repeat;
}
```

## Customizing a Form Panel

### Adding additional graphical settings to a form panel

You can include more settings for a filter panel using the "Additional Settings" available in the Grid Panel definition pane something like.

[/docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.FormPanel](https://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.GridPanel) to get a whole description of available settings.

## Customizing controls of form and filter panel

You can add, for each control contained in a form and filter panel, one or more css cls. \
Access the controls and activate the advanced mode, then click on the style column.

For button control you can set also the icon.

![](https://4019224283-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M2cc5AGE9gCv0xFi0qT%2F-M__5F-rC0qHa0cw1N0Y%2F-M__8AQjovjTQKJV1U0V%2Fimage.png?alt=media\&token=3b87cf6d-b493-410f-a033-6beea76df20a)

You can set the properties also on panels

![](https://4019224283-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M2cc5AGE9gCv0xFi0qT%2F-M__5F-rC0qHa0cw1N0Y%2F-M__95J9emnSVhUcW6NV%2Fimage.png?alt=media\&token=4f6aac72-db8e-4849-bf6a-dfd0c9dfb572)