PDA

View Full Version : Multiple forms loading from the same url



willsun52000
15 Feb 2012, 11:53 PM
following is an example of a tabpanel which contains 3 forms.
My question is when I want load detailed data into each form on hitting 'Load' button, the url '/details.do' will be invoked 3 times. Is there an easy way to invoke '/details.do' only once to populate all the forms.
Thanks!


var detailForm = Ext.create('Ext.tab.Panel', {
autoHeight : false,
autoWidth : false,
title : 'Details',
activeTab : 0,
renderTo : 'details',

items : [ {
xtype : 'panel',
autoHeight : false,
autoWidth : false,
title : 'form1',
dockedItems : [ {
xtype : 'form',
id : 'form1',
autoHeight : false,
autoWidth : false,
bodyPadding : 10,
title : '',
dock : 'top',
border : false,
items : [],

buttons : [ {
text : 'Load',
handler : function() {
var form = Ext.getCmp('form1').getForm();
form.load( {
url : '/details.do',
method : 'get',
waitMsg : 'Loading...',
failure : function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
};
var form = Ext.getCmp('form2').getForm();
form.load( {
url : '/details.do',
method : 'get',
waitMsg : 'Loading...',
failure : function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
};
var form = Ext.getCmp('form3').getForm();
form.load( {
url : '/details.do',
method : 'get',
waitMsg : 'Loading...',
failure : function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
}
}, {
text : 'Save'
}, {
text : 'Save and Continue'
}, {
text : 'Cancel'
} ]
} ]
}, {
xtype : 'panel',
autoHeight : false,
autoWidth : false,
title : 'form2',
dockedItems : [ {
xtype : 'form',
id : 'form2',
autoHeight : false,
autoWidth : false,
bodyPadding : 10,
title : '',
dock : 'top',
border : false,
items : [],

buttons : [ {
text : 'Load',
handler : function() {
}
}, {
text : 'Save'
}, {
text : 'Save and Continue'
}, {
text : 'Cancel'
} ]
} ]
}, {
xtype : 'panel',
autoHeight : false,
autoWidth : false,
title : 'form3',
dockedItems : [ {
xtype : 'form',
id : 'form3',
autoHeight : false,
autoWidth : false,
bodyPadding : 10,
title : '',
dock : 'top',
border : false,
items : [],

buttons : [ {
text : 'Load',
handler : function() {
}
}, {
text : 'Save'
}, {
text : 'Save and Continue'
}, {
text : 'Cancel'
} ]
} ]
}, {...}, {...} ]
});

vietits
16 Feb 2012, 12:22 AM
Let try by putting your form outsite tabpanel. It means that make your form to be container of all tabs. Also, put all the action buttons outside form. Something like this:


Ext.create("Ext.panel.Panel", {
renderTo: Ext.getBody(),
width: 500,
height: 300,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
text: 'Load',
handler : function() {
var form = this.up('panel').down('form').getForm();
form.load( {
url : '/details.do',
method : 'get',
waitMsg : 'Loading...',
failure : function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
};
}
},{
text: 'Save'
...
}]
}],
items: {
xtype: 'form',
items: {
xtype: 'tabpanel',
items: [{
title: 'tab 1',
items: [{
xtype: 'textfield'
}]
},{
title: 'tab 2',
items: [{
xtype: 'textfield'
}]
},{
title: 'tab 3',
items: [{
xtype: 'textfield'
}]
....
}]
}
}
});