Results 1 to 4 of 4

Thread: [Solved]Datasource on Editor Window doesn't work

  1. #1

    Default [Solved]Datasource on Editor Window doesn't work

    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.

    Code:
    		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

    Code:
    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'); 
    		}
    	});
    	
    }

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

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

  3. #3
    Sencha Premium Member
    Join Date
    Mar 2007
    Location
    Munich, Germany
    Posts
    154

    Default

    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:
    PHP Code:
    // 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(gridrowIndex) {
        
    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.
    Kind regards,
    WillyDee

    Problems worthy of attack, prove their worth by hitting back.

  4. #4

    Default

    I see what you mean, that did the trick!

    Thanks for your help

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •