PDA

View Full Version : Garbage Collector giving error for component



sandy52
9 Jun 2015, 11:14 PM
Hi All,
I am getting error for component destroy in IE. I have one grid and I used component column to put some component like combobox, textfield, timefield. It work fine on chrome and firefox but doesn't work on IE. I am running development build using IIS. I got this error : "Missing DOM node in element garbage collection: combobox-2211-triggerWrap."
any idea, how can i resolve this?
I am using extjs 4.2.0 framework


Thanks,
Sandeep tathe

tristan.lee
11 Jun 2015, 9:43 AM
Can you provide a code sample so I can reproduce the error? What version of IE are you using?

sandy52
14 Jun 2015, 8:06 PM
I am using IE 11 on windows 8.1 and here is my code for grid with component column :


Ext.define('Demo.view.SettingsEdit', {
extend: 'Ext.grid.Panel',
xtype: 'grouped-grid',
requires: ['Ext.grid.feature.Grouping', 'HO.ex.skirtle.grid.column.Component'],
alias: 'widget.dinerwarePreferenceEdit',
store: 'SettingStore',
id: 'SettingsEditId',
hidden: false,
anchor: '70% 100%',
hideHeaders: true,
header: false,
collapsible: false,
iconCls: 'icon-grid',


frame: false,
style: { height: 'auto' },
bodyStyle: {
border: '1px solid lightgray !important',
height: 'auto'
},
features: [{
ftype: 'grouping',
groupHeaderTpl: '{name}',
hideGroupedHeader: true,
startCollapsed: false,
id: 'settGrouping'

}],
viewConfig: {
loadingCls: 'x-loading-mask-common',
loadingText:''
},
selType: 'cellmodel',
plugins: [
],


defaults: {
width: 790
},
culture: null,
initComponent: function () {
var prefs = this;


this.columns = [
{
header: 'Label', dataIndex: 'Label', id: 'clm_set_Label', align: 'right', flex: 2, tdCls: 'wrap',
renderer: function (name) {
if (culture == 'en-GB') {
return name.toLowerCase().replace('tips', 'gratuities').replace('tip', 'gratuity').replace('fresh sheet', 'stock sheet');
}
return name;
}
},
{
xtype: 'componentcolumn', header: 'Value', dataIndex: 'Value', id: 'clm_Pref_Value', flex: 1,
renderer: function (name, meta, record) {
var dataType = record.get('DataType');
var ourEditor = record.get('Editor');
var ourValue = record.get('Value');
var ourName = record.get('Name');
var dispField = 'disp';
var ConstraintName = record.get('Constraint');
var ConstraintValue = record.get('Constraint_Value');
var ConstraintMinValue = record.get('Constraint_Min_Value');
var ConstraintMaxValue = record.get('Constraint_Max_Value');
var ErrorMsg = record.get('Error_Msg');
var classname = '';
var listclass = '';
var areWeChecked = false;
var ourXType = 'textfield';
var minVal = 0, maxVal = 100000;
var allow_blank = false;
var myStore = null;
var vtype_email = '';
var inputType_pwd = '';
var hidePort = '';
var helpText = record.get('Help');


if (ourName == 'email_port') {
hidePort = true;
}
switch (ourEditor) {
case 'CheckBox':
//console.log(ourValue);
if (ourValue == 'true' || ourValue == '1') {
areWeChecked = true;
}
ourXType = 'checkbox';
classname = '';
break;
case 'ChooseOnePicker':
//if (ourValue == 'true' || ourValue == '1') {
// areWeChecked = true;
//}
//ourXType = 'checkbox';
//classname = '';
var arr = [];
myStore = Ext.create('HO.system.store.PrefEnumData', { filters: [{ property: 'pref', value: ourName }] });
var id = record.get('Id');
myStore.data.items.forEach(function (item, index) {
var field = { boxLabel: item.data.fldtext, cls: 'x-radio-label', labelClsExtra: 'x-radio-label', prefId: id, name: ourName, inputValue: item.data.fldvalue };
arr.push(field);
});
xtype = {
xtype: 'tristateradiogroup', prefId: record.get('Id'), fieldControlName: ourName, name: ourName, labelSeparator: '', defaultType: 'radio', layout: 'vbox', width: 400, margin: '-5px 0 0 0', inputValueType: 'string', value: ourValue,
items: arr
};
return xtype;
break;
case 'InvertedCheckBox':
if (ourValue == 'false' || ourValue == '0') {
areWeChecked = true;
classname = '';
}
ourXType = 'checkbox';
classname = '';
break;
case 'TextBox':
if (ConstraintName == 'GreaterOrEqualValue') { minVal = ConstraintValue; }
else if (ConstraintName == 'ValueRange') {
minVal = ConstraintMinValue, maxVal = ConstraintMaxValue;
}


if (dataType == 'Integer' || dataType == 'Decimal') {
ourXType = 'numberfield';
classname = 'numInput';
} else classname = 'txtInput';


// if (dataType == 'String') allow_blank = true;


if (ourName == 'email-sender-id') {
return {
prefId: record.get('Id'),
vtype: 'email',
value: ourValue,
xtype: 'textfield',
name: ourName,
allowBlank: false,
hideLabel: true,
emptyText: '[email protected]',
cls: classname
}
}


else if (ourName == 'email-password' )
{
ourValue = HO.utils.Base64.decode(ourValue, "");
return {
prefId: record.get('Id'),
value: ourValue,
xtype: 'textfield',
name: ourName,
allowBlank: false,
inputType: 'password',
cls: classname
}
}


else if (ourName == 'email-host') {
allowBlank: false;
}
else
if (dataType == 'String') allow_blank = true;


break;
case 'MultilineTextBox':
ourXType = 'textareafield';
classname = 'MultiTxtInput';
break;
case 'TimeFromDateTimePicker':
ourXType = 'timefield';
classname = 'TimeInput';
if (new Date(ourValue) == 'Invalid Date')
ourValue = new Date(Ext.String.format('1/1/00 {0}', ourValue));
else
ourValue = new Date(ourValue);
break;
//case 'ChooseOnePicker':
case 'Dropdown':
ourXType = 'combobox';
classname = 'x-dw-system-combobox';
listclass = 'x-dw-system-combolist';
dispField = 'fldtext';
myStore = Ext.create('HO.system.store.PrefEnumData', { filters: [{ property: 'pref', value: ourName }] });
ourValue = myStore.findRecord('fldvalue', ourValue);
//return "Coming soon...";
break;


default:
return "Coming soon...";
break;
}
return {


prefId: record.get('Id'),
value: ourValue,
checked: areWeChecked,
xtype: ourXType,
//id: ourName,
name: ourName,
allowBlank: allow_blank,
format: 'h:i: s A', altFormats: 'g:i: s A', increment: 1,
minValue: minVal, maxValue: maxVal,
cls: classname,
store: myStore,
queryMode: 'local',
valueField: 'fldvalue',
displayField: dispField,
forceSelection: false,
returnsModel: false,
listConfig: {
cls: listclass,
//loadingText: '',
//loadingCls: 'x-loading-mask-common'
},
listeners: {
//beforerender: function (me) {


//}
}
};
}
}
];

this.callParent(arguments);

},
afterRender: function () {
var myStore = this.getStore();
if (myStore)
myStore.load();
this.callParent(arguments);
}


});

tristan.lee
16 Jun 2015, 8:35 AM
It looks like this is an issue within the Ext.ux.ComponentColumn. This thread may shed some light.: https://www.sencha.com/forum/showthread.php?148064-Component-Column-Components-in-Grid-Cells&p=1056320&viewfull=1#post1056320

skirtle
16 Jun 2015, 9:01 AM
I'm happy to help you investigate if you can provide a complete, minimal test case. The current 'test case' is neither complete nor minimal. I suggest using Sencha Fiddle rather than just posting code.

sandy52
16 Jun 2015, 9:28 PM
Hi Tristan,
your given link was very helpful it resolve my problem, I use componentGC with the component column now the DOM missing error get resolve.
Thanks a lot

Sandy

sandy52
16 Jun 2015, 9:33 PM
Hi Skirtle,
My apology, I was busy with the work so didn't get time for generate sample code for my issue.

tristan.lee
17 Jun 2015, 6:46 AM
Great, glad you got it resolved!

skirtle
17 Jun 2015, 8:02 AM
If all you've done is set componentGC: false then you've probably made things worse as you'll now be leaking components.

sandy52
18 Jun 2015, 1:06 AM
really!!
GC will not find orphan component and remove it, so right now i got quick fix using componentGC but i want permanent solution over this