View Full Version : How to invoke a renderer on a displayfield xtype

21 Sep 2011, 9:58 AM
I'm new to ExtJS and, working in a team environment where someone else wrote the code I'm trying to modify, I find myself wanting to call the currency formatter ( Ext.util.Format.currency(value, '$ ', 2) on a value that's in a displayfield, but as far as I can see, it isn't valid to do so. displayfield doesn't support the 'renderer:' configuration item.

Is this a simple matter of changing the xtype to some other type? I see that if I completely re-architected my code I might be able to put the data into a gridpanel, which supports a renderer, but the data really isn't suited to a gridpanel.

Am I missing something simple?

Thanks in advance for any and all help.

21 Sep 2011, 10:44 AM
I think all you need to do is override the valueToRaw (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.form.field.Display-method-valueToRaw) function for the components you want. If you're going to re-use the component, then you'll probably want to create a simple subclass. Here's an example:

Ext.define('CurrencyField', {
extend: 'Ext.form.field.Display',
alias: ['widget.currencyfield'],

valueToRaw: function(value) {
return Ext.util.Format.currency(value, '$ ', 2);

Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 175,
height: 120,
bodyPadding: 10,
title: 'Money',
items: [{
xtype: 'currencyfield',
fieldLabel: 'Me',
value: 10
}, {
xtype: 'currencyfield',
fieldLabel: 'You',
value: 11.5

21 Sep 2011, 2:34 PM
This works just like I need. Thank you so much.

21 Sep 2011, 3:06 PM
You're welcome! :)

By the way, you should be able to mark this thread as "Answered" so it doesn't show display as "Unanswered" in the forum listing anymore.

1 Feb 2012, 9:33 AM
Hey guys, I hope you don't mind me borrowing this thread for a follow-up question.

I needed to implement something similar and got it working thanks to your suggestion, burnnat. However, now that I've done all I can to follow the new MVC-pattern in Ext JS 4 it just don't feel right to paste this Ext.define-code above some other component, in the "wrong" file. How do I implement a custom view/component in the MVC-logic and filestructure?

I've put the Ext-define-part of my component in it's own file, but from there I'm lost. I've tried putting 'MyApp.custom.MyField' in the Ext.require of my "main" app.js, but that causes the app not to start. I've tried putting the same in the require-property of a panel, with the same result. It seems the application never reaches it's launch-function when I require my new component (which loads, seemingly, with no error).

What do I have to do? Is there anything I need to do within the definition of the new component?