PDA

View Full Version : Ext.Window bug after reopening a closed Window



plessmann
15 Nov 2010, 8:32 AM
Hello Community,

I need a ExtJS Window with a EditorGridPanel in it. The EditorGridPanel has everytime I open it different values to display.
The window itself is opened from a grid cell (there is a link/button) of another Grid on the document page.

My problem is, that I have to use destroy / close function to trigger a new instance with the current data in the grid and a correspongind title of the window. When I use the hide function, these values do no get updated by a reopening! So its not a solution to tell me use the hide function.

But now my problem with the destroy method is, that the EditorGridPanel's editable cells do not work properly any more, when I reopen the window! The editable cells do not accept editing any more. I got a javascript error like this, when I click into the editor cell:

this.field.getEl().dom is undefined.


So what's the way to recreate a window and make the Editor Grid Panel working?


thanks in advance,
max

devtig
16 Nov 2010, 10:50 AM
Probably a scoping problem. Firebug on what 'this' is. Show some code please.

plessmann
16 Nov 2010, 1:50 PM
Sure. I tried to cut the code a bit, because its quite a lot.
I hope you can see the problem in this excerpt.

By the way, the function calculateRow is called by another grid (there is just a link in a grid cell which calls this function). Tell me if you also need this code part.




function findRecordByBeanId(id) {
for(var i = 0; i < dataStore.data.length; i++) {
if(dataStore.data.items[i].data.bean_id == id) {
return dataStore.data.items[i];
}
}
return null;
}


function numberCellRenderer(value, metadata, currentRecord, rowIndex, colIndex, store) {
[...]
return value
}

function textCellRenderer(value, metadata, currentRecord, rowIndex, colIndex, store) {
[...]
return value;
}



var calcStoreProxy;
var calcStoreReader;
var calcStoreWriter;
var calcStore;



function calculateRow(id) {

var popupCalcWin;
var calculationGrid;

var currentRecord = findRecordByBeanId(id); // returns the object of a extjs store


if(currentRecord != null) {

calcStoreProxy = new Ext.data.HttpProxy({
[...]
});

calcStoreReader = new Ext.data.JsonReader({
[...]
});

calcStoreWriter = new Ext.data.JsonWriter({
[...]
});

calcStore = new Ext.data.Store({
[...]
});

calcStore.setBaseParam('item', id); // we also need the item guid for calculation


var qty = '';
if(currentRecord.data.quantity != null && currentRecord.data.unit != null) {
qty = currentRecord.data.quantity + ' ' + currentRecord.data.unit + ' ';
}

popupCalcWin = new Ext.Window({
renderTo: Ext.getBody(),
id: Ext.id(),
width: 800,
height: 420,
stripeRows: true,
closable: false,
plain: true,
modal: true,
layout: 'fit',
title: 'Calculation for ' + qty + currentRecord.data.product_name + ' (' + currentRecord.data.product_id + ')',
listeners: {
'hide': {
fn: function() {
}
}
},
items: [ new Ext.grid.EditorGridPanel({
id: Ext.id(),
store: calcStore,
clicksToEdit: 1,
cm: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: false
},
columns: [
new Ext.grid.RowNumberer(),
{ id: 'description', header: 'Description', width: 250, renderer: textCellRenderer, dataIndex: 'description'},
{ id: 'value', header: 'Value', width: 75, dataIndex: 'value', editable: editViewMode, renderer: numberCellRenderer, format: currencyFormat, editor: currencyField },
{ id: 'quantity', header: 'Qty', width: 50, dataIndex: 'quantity', renderer: textCellRenderer },
{ id: 'amount', header: 'Amount', width: 125, dataIndex: 'amount', editable: false, renderer: numberCellRenderer, format: currencyFormat, editor: currencyField }
],
isCellEditable: function(colIndex, rowIndex) {
var currentRecord = calcStore.getAt(rowIndex);
if (currentRecord.get('editable') != true) {
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, colIndex, rowIndex);
}
}),
columnLines: true,
width: 600,
height: 320,
frame: false,
listeners: {
'viewready': {
fn: function() {
}
}
}
}) ],

buttons: [{
text: 'Use Calculated Value',
hidden: !editViewMode,
handler: function() {

for(var i=0; i<calcStore.data.items.length; i++) {
if(calcStore.data.items[i].data.condition_context == 'net_value') {
currentRecord.set('price', calcStore.data.items[i].data.amount);
}
}

popupCalcWin.destroy();
}
},{
text: 'Cancel',
handler: function() {
popupCalcWin.destroy();
}
}]
});

popupCalcWin.show();

}
else {
Ext.Msg.alert('Error', 'An error occured.');
}

}
What do you want to know about the "this" variable? I can dump this on Firebug, but it looks normal for me.
I don't know how to copy+past the dump of the this variable from Firebug. Maybe you are interested in something special? I can send this to you of course...


cheers,
max

plessmann
17 Nov 2010, 8:02 AM
Okay. I got it!
The problem was that I used the generic textfields included in the other grid! In this case we got a problem at the time, the memory is freed....
I created new generic text fields for the second editor grid and now it works fine :-)

Thanks.