PDA

View Full Version : [Solved]Datasource on Editor Window doesn't work



undertoe
13 Dec 2007, 12:53 PM
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
13 Dec 2007, 2:31 PM
That's a whole lot of code to wade thru - can you simplify that to an example that people can digest easily?

willydee
13 Dec 2007, 3:05 PM
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
14 Dec 2007, 6:42 AM
I see what you mean, that did the trick!

Thanks for your help