catching partially fiiiled data of form, saving in temprory memory and reterive.

Hi all,

I have three Extjs panels(panel_1, panel_2, panel_3) and i used viewport to view in my app. When i click on a graph component in panel_2, a form appear in panel_3, so i can feed data into form for different component of a graph. Suppose i partially fiiled data into form for a component and i click on another component and fill data for that component and then again i click on previous component to comple the filling of remaining data. So my problem is that when i come back to previous form, all the previously filled data will be gone from the form, i need partial filled form with data.

my sample code for panels is..

Code:

var panelHeader = '';
var dataItems = '';
var panel_1 = new Ext.TabPanel({
        id : 'panel_1',
        region : 'center',
        activeTab : 0,
        items : [ panelItems ]

    });

var panel_2 = new Ext.Panel({
        id : 'panel_2',
        layout : 'fit',
        split : true,
        height : 100,
        region : 'south'
    });
var panel_3 = new Ext.Panel({
        title: panelHeader,
        id : 'panel_3',
        collapsible : true,
        width : 280,
        layout: {
            type : 'form',
        },
        region : 'east',
        autoScroll : true,
        items: [ dataItems ]
    });


var viewport = new Ext.Viewport({
        layout : 'border',
        items : [ {
            xtype : 'panel',
            margins : '5 5 5 5',
            region : 'center',
            layout : 'border',
            border : false,
            items : [ new Ext.Panel({
                region : 'west',
                layout : 'border',
                split : true,
                width : 180,
                border : false,
                items : [ panel_1]
            }), panel_2, panel_3 ]
        }]
    });

and my listener looks like..

Code:

graph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt)
    {
        var e = evt.getProperty('event'); // mouse event
        var cell = evt.getProperty('cell'); // cell may be null

        //if (cell != null && !e.isConsumed())
        {
            if(graph.getSelectionCell() != null && graph.getSelectionCount() == 1)
                {
                var selectedCell = graph.getSelectionCell();
                    if(selectedCell.value.nodeName === 'step_1')
                    {
                        panelHeader = 'step_1';
                        dataItems = {
                            xtype: 'fieldset',
                            items: [
                                    {
                                        xtype: 'radiogroup',
                                        fieldLabel: 'Select a method for step_1',
                                        labelStyle: 'font-weight:bold;',
                                        columns: 1,
                                        vertical: true,

                                        items: [{
                                            boxLabel: 'button_1',
                                            name: 'rb',
                                            inputValue: '1'
                                        }, {
                                            boxLabel: 'button_2',
                                            name: 'rb',
                                            inputValue: '2',
                                            checked: true
                                        }]

                                    },
                                    {
                                        xtype: 'textfield',
                                        name : 'name',
                                        fieldLabel: 'Your name',
                                        labelStyle: 'font-weight:bold;'
                                    },
                                    {
                                        xtype: 'button',
                                        buttonAlign: 'center',
                                        text: 'Save',
                                        handler: function() {
                                            
                                        }
                                    }
                                    ]
                    };          
                    }
                    else if(selectedCell.value.nodeName === 'step_2')
                    {
                        panelHeader = 'step_2';
                        dataItems = {
                            xtype: 'fieldset',
                            items: [
                                    {
                                        xtype: 'radiogroup',
                                        fieldLabel: 'Select method for step_2,
                                        labelStyle: 'font-weight:bold;',
                                        columns: 1,
                                        vertical: true,

                                        items: [{
                                            boxLabel: 'method_1',
                                            name: 'rb',
                                            inputValue: '1'
                                        }, {
                                            boxLabel: 'method_2',
                                            name: 'rb',
                                            inputValue: '2',
                                            checked: true
                                        }]

                                    },
                                    {
                                        xtype: 'textfield',
                                        name : 'name',
                                        fieldLabel: 'Specify e-value',
                                        labelStyle: 'font-weight:bold;'
                                    },
                                    {
                                        xtype: 'button',
                                        buttonAlign: 'center',
                                        text: 'Save',
                                        handler: function() {
                                            
                                        }
                                    }
                                    ]
                    };
                    }
                }
           var updpanl = pane_3l.items.first();
            panel_3.items.remove(updpanl);
            pane_3l.items.add(dataItems);
            panel_3.items.doLayout();
            evt.consume();
        }
    });

Please help...

Thaks in advance



catching partially fiiiled data of form, saving in temprory memory and reterive.