This example loads the JSON Stores in sequence, and once the store are loaded, it loads the FormPanel data. So all the data is loaded correctly...
var objectAStore = new Ext.data.JsonStore({ url: '/objecta/json_dropdown_list', root: 'Records', totalProperty: 'Total', fields:[ { name: 'id' }, { name: 'name' } ] }); var objectBStore = new Ext.data.JsonStore({ url: '/objectb/json_dropdown_list', root: 'Records', totalProperty: 'Total', fields:[ { name: 'id' }, { name: 'name' } ] }); var myForm = new Ext.form.FormPanel({ monitorValid: true, border: false, bodyBorder: false, baseCls: 'x-plain', labelWidth: 130, defaults:{ width: 270, allowBlank: false, displayField: 'name', valueField: 'id' }, keys: [ { key: [10, 13], fn: function() { if(myForm.getForm().isValid()){ myForm.buttons[0].fireEvent('click'); } } } ], buttons: [ { text: 'Save', formBind: true, handler: function(){ myForm.getForm().submit({ method:'POST', url: '/objectc/save', reset: false, waitTitle: "Please Wait", waitMsg: 'Saving ...', success: function(form, action) { win.close(); }, failure: function() { //Failure stuff here } }) } }, { text: 'Close', handler: function() { win.close(); } } ], items:[ { xtype: 'hidden', name: "id", value: objectc_id }, { mode: 'remote', hiddenName: 'from_objectb', fieldLabel: 'FROM OBJECT B', xtype: 'combo', store: objectBStore }, { fieldLabel: 'OBJECT A', xtype: 'combo', typeAhead: true, mode: 'remote', minChars: 1, hiddenName: 'objecta', triggerAction: 'all', store: objectAStore }, { fieldLabel: 'TO OBJECT B', xtype: 'combo', hiddenName: 'to_objectb', store: objectBStore } ] }); /** * If the relationship_id is not empty, so the window is used of updating data */ if(!Ext.isEmpty(relationship_id)){ objectAStore.load({ params:{ 'objecta': objecta }, callback: function(){ objectBStore.load({ params:{ 'from_objectb': from_objectb, 'to_objectb': to_objectb }, callback: function(){ myForm.load({ url: '/objectc/get_form_data', params: { 'objectc_id': objectc_id } }); } }); } }); } win = new Ext.Window({ title: 'TITLE HERE', height: 163, width: 450, layout: 'fit', border: false, bodyStyle: 'padding: 10px', bodyBorder: false, modal: true, items:[ myForm ], listeners:{ beforeshow: function(){ Ext.MessageBox.hide(); } } }); win.show();
Really useful!
ReplyDeleteThanks!
thanks
ReplyDeleteexcellent
ReplyDelete