ExtJS EditorGridPanel and the column renderer

I'm a little confused by the following documentation for the EditorGrid:

Editing is performed on the value of the field specified by the column's dataIndex in the backing Store (so if you are using a renderer in order to display transformed data, this must be accounted for).

I'm not really sure how to "account for" my renderer in the following situation:

...

columns : [{
                header   : 'Foo',
                width    : 100,
                dataIndex: 'foo',
                renderer: function(value, p, record) {return value? value.bar: ""},  
                editor : new Ext.form.TextField({  
                    allowBlank : false  
                })
            }]
...

As you can see, this renderer is a really simple one, but this is clearly not going to work with a TextField. I understand why it will just display my foo object and not the bar property when the user edits.

So how does one get around this? Should I be overwriting the Ext.form.TextField with a new setValue and getValue? I thought about using the events beforeedit and afteredit, but that seems like overkill. I feel like I'm missi开发者_如何学JAVAng something very simple here.

In case I'm not being clear, here's a few screens of the result I'm getting:

Column Renderer Works!

Ext.form.TextField gets an object

---

If you want to change how the column displays the value you HAVE to change the column renderer and the editor to reflect this. That means, yes, you will have to listen to and act on before and after edit events.

(If you think about it, for example, I change the 7 to a 9. How would the system know what to do with this 9 since your value is a totally different format and in fact an object on its own. the only way to convert is to take the 9 and covert it back into whatever object you want which means, listening for before/after edit and pushing, pulling values from the editor to/from backing record.)