PDA

View Full Version : catching partially fiiiled data of form, saving in temprory memory and reterive.



dev_ill
11 Dec 2014, 5:02 AM
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..


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..



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

lumberjack
16 Dec 2014, 7:40 AM
I'd like to test this along with you. Can you post a simple test case either inline here or at https://fiddle.sencha.com?


Regards,
Brian

dev_ill
9 Jan 2015, 2:30 AM
Hi Brian,

Consider a tab bar which consist many tab menu, each tab menu contains unique or different form. Suppose i click on first tab menu and fill the form partially then i moved on next tab menu and click on next tab menu. Fill the form for that menu, now again i click on first tab menu to fill remaining form that i left on first step. The form should look like same as i left(partially filled) so that user should not fill save field of form which he already filled previously.

Simlar to that i have two different panel, one panel contains xml graph and another panel contains forms realated to xml geraph. The forms of panel two will change according to component of graph selected in panel one. In my case when i click some component of graph in panel first one form (say form_one) will display in panel two. I filled some of the field of form and left some of the field(partially filled). Then i click on some other component of graph in panel first, another form(say form_two) display in panel two.Again i filled this form completely. Now i want to complete the form_one for that i clicked on prevoius component of graph and form_one will display in panel two.

My problem is that when form_one will appear in panel two the data i filled prevoiusly is gone and i have to fill all the fields of form again which i already filled previously.

I want form_one display as i left like partially filled.

Thanks & Regards,
ved

lumberjack
9 Jan 2015, 6:02 AM
I've mocked up the fiddle below to try and gain a better understanding of what you're trying to accomplish. Clicking a record in the grid will populate the form. As I understand it, you'd like to be able to click the first record (John), fill out the Hobby field in the form, switch back to the grid and click the second record (Jane), switch back to the first record (John), and have the form still reflect the Hobby value you'd previously entered. Does that sound correct?

Regards,
Brian

g4e