Extending a CompositeField for use in EditorGridPanels?

Question

I've been working on creating an EditorGridPanel for use with multiple addresses, without much success. See, the thing is that the customer would like to store the address bits in separate pieces, but formatted as a standard address. So both the general textarea for address entry and the having completely discrete fields methods are both out.

This is where the CompositeField comes into play. I've been playing with extending both Column and Composite field to get the editor to work in the desired way. It's gotten to the point where it sort of-kind of works (it displays if you click it enough), but throws the error "this.ownerCt is undefined". From some googling, I see this is an issue of the order in which things are instantiated, yet I'm not sure how to instantiate the editor any later, while maintaining its' encapsulation.

Code:

Framework.AddressEditorField = Ext.extend(Ext.form.CompositeField,{
    initComponent: function() {
        Ext.apply(this,{
            items:[
                {name:'test',xtype:'textfield',width:50},
                {name:'test2',xtype:'textfield',width:50}
            ]
        });
        Framework.AddressEditorField.superclass.initComponent.apply(this);
    }
});

Framework.AddressEditor = Ext.extend(Ext.grid.Column,{
    width:220,
    editable:true,
    constructor: function(cfg) {
        this.editor = new Framework.AddressEditorField();
        Framework.AddressEditor.superclass.constructor.call(this, cfg);
        this.text="";
        if(!this.id){
            this.id = Ext.id();
        }
        this.renderer = this.renderer.createDelegate(this);
    },
    init : function(grid){
        this.grid = grid;

    },

    renderer : function(v, p, record){
        p.css += ' x-grid3-address-col-td';
        var template = new Ext.XTemplate("<pre class='{0}'><tpl if='careof!=\"\"'>{careof}\n</tpl>{address1}\n<tpl if='address2!=\"\"'>{address2}\n</tpl>{city}, {state} {zip}<tpl if='country!=\"\">\n{country}</tpl></pre>")
        var t = template.applyTemplate(record.data);
        return String.format(t, this.createId());
    },

    createId : function(){
        return 'x-grid3-cc-' + this.id;
    }
});

And the relevant section of the EditorGridPanel:

{xtype:'fieldset',itemId:'mailGridFieldset',title:'Addresses',items:{
                    xtype:'editorgrid',
                    unstyled:true,
                    itemId:'mailGrid',
                    hideHeaders:true,
                    autoHeight:true,
                    width:450,
                    clicksToEdit:1,
                    defaultMailType:'Home',
                    store:this.addressStore,
                    border: false,
                    columns:[
                        {
                            editable:true,dataIndex:'address_type',editor:combo,renderer:Ext.util.Format.comboRenderer(combo)
                        },
                        new Framework.AddressEditor(),
                        defaultBoxMailing
                    ],
                    sm:new Ext.grid.RowSelectionModel()
                }}

I'm sure I'm actually doing this quite wrong considering I haven't found many examples that extend CompositeField or Column. Any words of wisdom?

Thanks.

Answer 1

Just go around it and on cell click display a modal window with a form in which the user can enter/edit data.