PDA

View Full Version : grid.property.Grid - change the text of the columns?



jeffcrilly
25 Nov 2011, 11:10 AM
How would one go about changing the "Name" and "Value" text in the property.grid headers?

It seems that the text could be overridden through redefinition of grid.property.HeaderContainer (similar to the localization example use-case), however I would like to set the columns for per instance.

Afaict, this is where the property.Grid headers are set...



Ext.define('Ext.grid.property.HeaderContainer', {
extend: 'Ext.grid.header.Container',
alternateClassName: 'Ext.grid.PropertyColumnModel',

nameWidth: 115,

// private - strings used for locale support
nameText : 'Name',
valueText : 'Value',


thx

flanders
26 Nov 2011, 2:03 AM
You can pass them as part of the instantationConfig or set them using initComponent



Ext.create('Ext.grid.property.HeaderContainer', {
nameText: '',
...
}


or

[code]
Ext.define('your decendant', {
extend: 'Ext.grid.property.HeaderContainer,
initComponent: function() {
nameText: '',
...
this.callParent() //!
}
});

jeffcrilly
28 Nov 2011, 1:16 PM
Yes.. I can see how to set nameText with the HeaderContainer.

However, i'm working with property.Grid, which does not expose nameText, nor does property.Grid expose customization of the HeaderContainer (afaict).

For example, below is the creation of a property.Grid... (from the example at http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.property.Grid )



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": .01,
"Description": "A test object"
}
});


I can think of three alternative strategies to change the "nameText" value...


Re-implement my own version of property.Grid to expose nameText. (not desirable)
After create, dig into propertyGrid, get the HeaderContainer, and change the value. (not desirable - the field is labeled "private" after all.)
"overload" the localization for HeaderContainer. (not desirable - this will change all instances of the property grid; I might have different labels depending on the use-case in the app.)
Is there another way to change the headers of a property.Grid?

Thx again

-jeff

pzs1
9 Jan 2012, 12:11 PM
Hi,

this is my solution:



Ext.define('Ext.grid.property.HeaderContainer2', {
override: 'Ext.grid.property.HeaderContainer',
constructor: function(grid){
if(grid.nameText) this.nameText=grid.nameText;
if(grid.valueText) this.valueText=grid.valueText;
this.callOverridden(arguments);
}
});


and after that you can use like this



Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 300,
renderTo: Ext.getBody(),
textName: 'Custom name',
valueName: 'Custom value',
source: {
"(name)": "My Object",
"Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"Available": false,
"Version": .01,
"Description": "A test object"
}
});


pzs