View Full Version : Change property grid cell options, e.g. background color

22 Nov 2013, 2:22 AM

I am just learning by doing, and I don't find anything about the cell objects of the property grid in the documentation.

Is it possible to change row/col/cell options, like size, colors, borders?

For instance, I want to make a property grid for color properties (taking values like #fc0 or #aeaeae), where onPropertyChange the cell's or the row's background-color changes to the color that was put into the row. (Of course I will add a colorPicker for normal users, where a row can be selected and then a color for that row, but hex format is fastest input method for power users).

Or I want to make a propertyGrid where some Image URL can be entered, and onPropertyChange, the cell's background changes to the image (changing the row height to the image height). And so on.

Is this possible or am I bending the PropertyGrid too much? :D

22 Nov 2013, 3:01 PM
Here is a good article on coloring grids:

You can change the size using CSS

.my-prop-grid.x-grid-with-row-lines .x-grid-cell-inner {
line-height: 25px;

name: 'Fiddle',

launch: function() {

Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 300,

cls: 'my-prop-grid',

renderTo: Ext.getBody(),
disableSelection: true,
simpleSelect: false,
listeners: {
'beforeedit': function(e) {
return false;
source: {
"(name)": "My Object",
"Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"Available": false,
"Version": 0.01,
"Description": "A test object"