[Solved]Datasource on Editor Window doesn't work

[undertoe]

I am having a problem and just to give you some background I have a grid that loads records from a database. Then on each record I have it set to pop-up a window for editing each record on doubleclick which works just fine. However when I click to edit the first record it does pull up the data source and show the correct items in the dropdown's marked 'form_e_manuf, form_e_items, form_e_size'. I close the window and double click on another row and it pops up the window and there is no data in the comboboxs 'form_e_manuf, form_e_items, form_e_size'. Fire does show it hitting the data source script and returning data. I am confused any help would be greatly appreciated.

		grid.on('rowdblclick', function(grid, rowIndex, e) {
			var win;
			var record = Ext.getCmp('data-grid');
			selectedMatchId = record.getSelectionModel().getSelected().id;
			
        if(!win){
						/*====== Manufacture Section ======*/
						//Data Store for Manufactures
						var DS_e_Manuf = new Ext.data.Store({
							id: 'DS_e_Manuf',
							proxy: new Ext.data.HttpProxy({method:'post', url: 'ajax/search_manuf.php'}),
							reader: new Ext.data.JsonReader({}, ['id','name']),
							remoteSort: true 
						});
						//Data Store for Items
						var DS_e_Item = new Ext.data.Store({
							id: 'DS_e_Item',
							proxy: new Ext.data.HttpProxy({method:'post', url: 'ajax/search_product.php'}),
							reader: new Ext.data.JsonReader({}, ['id','name']),
							remoteSort: true 
						});
						//Data Store for Sizes
						var DS_e_Size = new Ext.data.Store({
							id: 'DS_e_Size',
							proxy: new Ext.data.HttpProxy({method:'post', url: 'ajax/static_sizes.php'}),
							reader: new Ext.data.JsonReader({}, ['id','name']),
							remoteSort: true 
						});
        		//Create Form Fields
				   //Items Combo Box
						var form_e_items = new Ext.form.ComboBox({
							id: 'fmEdit-items',
							store: DS_e_Item,
							fieldLabel: 'Product Name',
							displayField: 'name',
							valueField: 'id',
							hiddenName: 'e_product',
							typeAhead: true,
							mode: 'remote',
							triggerAction: 'all',
							loadingText: 'please wait loading',
							emptyText: 'select item',
							selectOnFocus: true,
							width: 200,
							editable: true,
							minChars: 1, 
							allowBlank: true
						}); 
								
				    //Manufactures Combo Box
						var form_e_manuf = new Ext.form.ComboBox({
							id: 'fmEdit-manuf',
							store: DS_e_Manuf,
							fieldLabel: 'Manufacture Name',
							displayField: 'name',
							valueField: 'id',
							hiddenName: 'e_manuf',
							typeAhead: true,
							mode: 'remote',
							triggerAction: 'all',
							loadingText: 'please wait loading',
							emptyText: 'select manufacture',
							selectOnFocus: true,
							width: 200,
							editable: true,
							minChars: 1, 
							allowBlank: true,
							listeners: {
								select: function (combo, record, index) {
									Update_Items_Combo_Box(form_e_items, DS_e_Item, form_e_manuf.getValue());
								}
							}
						});       
						
				    //Size Combo Box
						var form_e_size = new Ext.form.ComboBox({
							id: 'fmEdit-size',
							store: DS_e_Size,
							fieldLabel: 'Item Size',
							displayField: 'name',
							valueField: 'id',
							hiddenName: 'e_size',
							typeAhead: false,
							mode: 'remote',
							triggerAction: 'all',
							loadingText: 'please wait loading',
							emptyText: 'query by size',
							selectOnFocus: true,
							width: 200,
							editable: false, 
							allowBlank: true
						});		
										  	
        		//Create Edit form
				    var form_edit = new Ext.FormPanel({
				        labelAlign: 'top',
				        id: 'fmEditpanel',
				        title: 'Modify Record: ',
				        bodyStyle:'padding:5px',
				        width: 600,
				        items: [{
				            layout:'column',
				            border:false,
				            items:[{
				                columnWidth:.5,
				                layout: 'form',
				                border:false,
				                items: [{
				                    xtype:'textfield',
				                    fieldLabel: 'House #',
				                    id: 'fmEdit-housenum',
				                    name: 'e_housenum',
				                    width: 100
				                }, {
				                    xtype:'textfield',
				                    fieldLabel: 'Lot #',
				                    id: 'fmEdit-lotnum',
				                    name: 'e_lotnum',
				                    width: 100
				                } , {
				                    xtype:'textfield',
				                    fieldLabel: 'Lot #',
				                    id: 'fmEdit-lotnum',
				                    name: 'e_lotnum',
				                    width: 100
				                }]
				            },{
				                columnWidth:.5,
				                layout: 'form',
				                border:false,
				                items: [form_e_manuf, form_e_items, form_e_size]
				            }]
				        },{
				            xtype:'tabpanel',
				            plain:true,
				            activeTab: 0,
				            height:235,
				            defaults:{bodyStyle:'padding:10px'},
				            items:[{
				                title:'Personal Details',
				                layout:'form',
				                defaults: {width: 230},
				                defaultType: 'textfield',
				
				                items: [{
				                    fieldLabel: 'First Name',
				                    name: 'first',
				                    allowBlank:false,
				                    value: 'Jack'
				                },{
				                    fieldLabel: 'Last Name',
				                    name: 'last',
				                    value: 'Slocum'
				                },{
				                    fieldLabel: 'Company',
				                    name: 'company',
				                    value: 'Ext JS'
				                }, {
				                    fieldLabel: 'Email',
				                    name: 'email',
				                    vtype:'email'
				                }]
				            },{
				                title:'Phone Numbers',
				                layout:'form',
				                defaults: {width: 230},
				                defaultType: 'textfield',
				
				                items: [{
				                    fieldLabel: 'Home',
				                    name: 'home',
				                    value: '(888) 555-1212'
				                },{
				                    fieldLabel: 'Business',
				                    name: 'business'
				                },{
				                    fieldLabel: 'Mobile',
				                    name: 'mobile'
				                },{
				                    fieldLabel: 'Fax',
				                    name: 'fax'
				                }]
				            },{
				                cls:'x-plain',
				                title:'Biography',
				                layout:'fit',
				                items: {
				                    xtype:'htmleditor',
				                    id:'bio2',
				                    fieldLabel:'Biography'
				                }
				            }]
				        }],
				
				        buttons: [{
				            text: 'Save'
				        },{
				            text: 'Cancel'
				        }]
				    });
				    //Create Window for edit
            win = new Ext.Window({
                layout:'fit',
                width:625,
                height:400,
                closeAction:'hide',
                plain: true,
                autoCreate:true,
                items: form_edit
            });
        }
        win.show(this);
    
    //return selected data
    Set_Match_Information(selectedMatchId);
		});

    var PanelDirections = new Ext.Panel({
        title: 'My Panel',
        id: 'Dirx',
        collapsible:true,
        hidden:true,
        renderTo: 'search-plan-data',
        width:'100%',
        html: '<div style="padding-left: 5px"></div>'
    });

Function Called to fill in form fields and combo boxes

function Set_Match_Information(matchid){

	Ext.Ajax.request({
		url : 'ajax/get_matchinfo.php' , 
		params : { mid : matchid },
		method: 'POST',
		success: function ( result, request ) { 
			var Mdata = Ext.util.JSON.decode(result.responseText);
			var cmpMANUF = Ext.getCmp('fmEdit-manuf');
			var cmpITEM = Ext.getCmp('fmEdit-items');
			var cmpSIZE = Ext.getCmp('fmEdit-size');
			
			//Set static data
			Ext.getCmp('fmEdit-housenum').setValue(Mdata.housenum);
			Ext.getCmp('fmEdit-lotnum').setValue(Mdata.lot);

			
		},
		failure: function ( result, request) { 
			Ext.MessageBox.alert('Failed', 'database lookup error'); 
		}
	});
	
}

[tryanDLS]

That's a whole lot of code to wade thru - can you simplify that to an example that people can digest easily?

[willydee]

I think I know what the problem is: the variable 'win' only exists inside the rowdblclick event handler function. So anytime the handler is invoked by double clicking a grid row, the window and all of it's data including stores are created again. So there might be also a large memory leak...

Just declare or instantiate the window outside of the event handler, and you're done. Please have a look at the following scheme:

// 1) create the editor window and it's accessoires:
var win = new Ext.Window(...);
win.comboStore = new Ext.data.JsonStore(...);
// 2) create the store:
var store = new Ext.data.JsonStore(...);
// 3) create the grid:
var grid = new Ext.grid.GridPanel(...);
// 4) attach some handlers to the grid:
grid.on('rowdblclick', function(grid, rowIndex) {
    win.show();
    win.comboStore.load();
    var record = grid.store.getAt(rowIndex);
    var form = win.items.get(0).form;
    form.loadRecord(record);
}); 

The win.comboStore.load() in step 4 is only required if server data could have been changed since window creation. If it's a rather static source, I would prefer to place the loader in step 1.

[undertoe]

I see what you mean, that did the trick!

Thanks for your help