[CLOSED] Submit gridpanel data in form submit

I want to put a gridpanel into a formpanel. When I call formpanel.getValue, I want to the grid store data to be returned like any other form fields. What's the best way to accomplish this?

Here's my solution in case anyone is looking for something similar. I created a new Ext.ux.FormGridPanel that creates a hiddenfield that's refreshed whenever a cell is edited.

Code:

---

Ext.ux.FormGridPanel = Ext.extend(Ext.net.GridPanel, {
    hiddenValue: null,

    initComponent: function() {
        // call parent initComponent
        Ext.ux.FormGridPanel.superclass.initComponent.call(this);

        var store = this.getStore();
        if (store) {
            store.on('load', this.refreshHiddenValues, this, { single: true });
        }
    }, // end of function initComponent     

    onRender: function() {
        // Call parent (required)
        Ext.ux.FormGridPanel.superclass.onRender.apply(this, arguments);

        // After rendered, we have a parent and add to it
        if (this.container) {
            this.hiddenValue = this.container.createChild({ tag: 'input', type: 'hidden', name: this.id + '_Value', value: '' });
        }

        // update hidden field on cell edit
        this.on('afteredit', this.refreshHiddenValues);
    },

    refreshHiddenValues: function() {
        if (this.hiddenValue) {
            this.hiddenValue.setValue(Ext.encode(this.getRowsValues()));
        }
    }

});

Ext.reg('formgridpanel', Ext.ux.FormGridPanel);

---

Hi,

I can suggest to implement it as plugin

Code:

---

Ext.ux.grid.FormGridPanel = Ext.extend(Object, {
    hiddenValue: null,
       
        init : function (grid) {
                this.grid = grid;
               
                var store = grid.getStore();
        if (store) {
            store.on('load', this.refreshHiddenValues, this, { single: true });
        }
               
                this.grid.on("render", this.onRender, this);
        },
       
        onRender: function() {
        // After rendered, we have a parent and add to it
        if (this.container) {
            this.hiddenValue = this.grid.container.createChild({ tag: 'input', type: 'hidden', name: this.grid.id + '_Value', value: '' });
        }

        // update hidden field on cell edit
        this.grid.on('afteredit', this.refreshHiddenValues, this);
    },

       
        refreshHiddenValues: function() {
        if (this.hiddenValue) {
            this.hiddenValue.setValue(Ext.encode(this.grid.getRowsValues()));
        }
    }
});

---

and use it as

Code:

---

<Plugins>
    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.grid.FormGridPanel" />
</Plugins>

---

Thanks for the tip! Since all the hooks I need are exposed via events, the plugin is the better solution.