PDA

View Full Version : Property grid questions



r_sarvas
18 Jul 2012, 1:15 PM
Is there any way to set the property grid field names and widths in ExtJS 4.x? I feel like I'm missing something obvious in the documentation.

sdt6585
18 Jul 2012, 1:44 PM
I think it's the configs nameColumnWidth and columnWidth for column widths.

Then I think you use nameField and valueField set as keys from the object that you set as the source. Then in your source object, you have those keys set to whatever you want the column names to be...not positive on that one though.

r_sarvas
19 Jul 2012, 7:38 AM
I think it's the configs nameColumnWidth and columnWidth for column widths.

Then I think you use nameField and valueField set as keys from the object that you set as the source. Then in your source object, you have those keys set to whatever you want the column names to be...not positive on that one though.

I actually noticed the nameColumnWidth property shortly after making this post (not sure how I missed that the first time), though I'm still at a loss as to how to do the column name change. The nameField property seems to be used for selecting what field in the data store populates the the content of the name column. Based on further testing I'm getting the feeling that the property I'm looking for might be somehow accessed through propertyNames, though I haven't been able to confirm this or find an example that works with ExtJS 4 - most example on the web are from ExtJS 2.x and don't work quite the same.

Also, what's the deal with the grey area to the left of each of the values in the property name column? Can that be turned off?

sdt6585
19 Jul 2012, 9:08 AM
Well, this works, but it's a bit of a workaround:



var p = Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 300,
renderTo: Ext.getBody(),
source: {
"(name)": "My Object",
"Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"Available": false,
"Version": 0.01,
"Description": "A test object"
}
});
p.columns[0].setText('NameHeader');
p.columns[1].setText('PropertyHeader');


And as to your question about the grey area...I'm not sure. I think it's a carry over from visual ides like Visual Studio and their property grid when creating ui's....I would imagine you can somehow change their color using css classes.

r_sarvas
19 Jul 2012, 10:02 AM
Thanks, that did the trick. It looks as though sorting also needs to be set in a similar fashion. I'm finding that part of my problem is that I'm using 4.0.7 and that a number of things associated with the store don't quite work as they should. See other forum post here:

http://www.sencha.com/forum/showthread.php?173981-Ext.grid.property.Store-(maybe)-not-working-properly-in-ExtJS-4.0.7&highlight=property+grid

At any rate, in case anyone else should happen to be looking for a similar solution, here's an update to your code that also includes the fix for sorting and setting the name column field length as you pointed out earlier.



var p = Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 300,
nameColumnWidth: 100,
renderTo: Ext.getBody(),
source: {
"(name)": "My Object",
"Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"Available": false,
"Version": 0.01,
"Description": "A test object"
} });

p.columns[0].setText('NameHeader');
p.columns[1].setText('PropertyHeader');
p.store.sort('none');
p.columns[0].tdCls=''; //removes the grey area next to the property name


As for the gray area in the property name column, that looks like it is being applied as a background image ("[ExtJS location]/resources/themes/images/default/grid/property-cell-bg.gif") as the result of a style called "x-grid-property-name". After a bit if searching through the ExtJS code I found how to turn it off using what looks like an internal setting called "tdCls". The code above has been updated to include this setting as well. Setting "tdCls" to null removes the grey background and it to "x-grid-property-name" turns it back on. It also looks as though you could use this same property to apply other CSS class values to both the property and value columns.