Tweet
I have an application with an Grid using Cell Editing that was all working fine. I tried adding a Summary feature to it and have run into a problem. The summary is working fine if I change any cells except one. That cell has the following renderer function:
The line record.set.... causes my grid to disppear unless only digits are entered, the column headings remain but the rest disappears. Only one column uses the summary function and it is not this one. The error I get in the console is
Uncaught TypeError: Cannot call method 'removeChild' of null at ext-all.js:18
I was using the record.set to save the upper case value of whatever the user typed. Maybe I should do something different???
Thanks,
Scott
P.S. Below is code that I have stripped out of my applicaiton that I believe someone can run to see the issue. When it displays click the 'SAVE' button to add lines to the grid then put any characters in the description field and Tab out of it.
Code:
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
value = value.toUpperCase();
record.set('KDIDES', value);
return value;
},
Uncaught TypeError: Cannot call method 'removeChild' of null at ext-all.js:18
I was using the record.set to save the upper case value of whatever the user typed. Maybe I should do something different???
Thanks,
Scott
P.S. Below is code that I have stripped out of my applicaiton that I believe someone can run to see the issue. When it displays click the 'SAVE' button to add lines to the grid then put any characters in the description field and Tab out of it.
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Copyright" content="Davis Transport Inc, All Rights Reserved">
<title>Accounts Payable Transaction Entry</title>
<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<script type="text/javascript" src="/extjs4/ext-all.js"></script>
<script type="text/javascript" src="/vvresources/valence-extjs4.js"></script>
<script type="text/javascript">
var CellToUpdate;
Ext.onReady(function() {
// turn on quicktips functionality
Ext.QuickTips.init();
Ext.define('detail', {
extend: 'Ext.data.Model',
fields: ['KDIDES', 'KDAMT']
});
var detailStore = Ext.create('Ext.data.Store',{
model : 'detail'
});
//-----------------------------------------------------------------------------------------------
// function to begin adding a record
var addRec = function() {
myViewport.layout.setActiveItem(0);
mode = 'add';
detailStore.removeAll();
detailStore.add({'KDAMT':0
}, {'KDAMT':0
}, {'KDAMT':0
}, {'KDAMT':0
}, {'KDAMT':0
}, {'KDAMT':0
}, {'KDAMT':0
}, {'KDAMT':0
}, {'KDAMT':0
}, {'KDAMT':0
});
formEdit.down('#VENDOR').enable();
formEdit.getForm().reset();
formEdit.down('#VENDOR').focus();
myViewport.doLayout();
};
// form edit panel
var formEdit = Ext.create('Ext.form.Panel', {
frame: true,
region: 'north',
header: false,
border: false,
labelAlign: 'right',
labelWidth: 105,
width: 400,
waitMsgTarget: true,
tbar: [{
text: 'Save',
tooltip: 'Save',
iconCls: 'save',
handler: addRec
}],
items: [{
xtype: 'fieldset',
iconCls: 'application_view_detail',
title: 'Invoice Detail',
width: 500,
defaults: {
labelAlign: 'left',
labelPosition: 'left',
labelWidth: 100,
selectOnFocus: true,
layout: {
type: 'hbox',
defaultMargins: {top: 0, right: 5, bottom: 0, left: 0}
}
},
items: [{
xtype: 'fieldcontainer',
items: [{
xtype: 'textfield',
id: 'INVOICE',
name: 'INVOICE',
fieldLabel: 'Invoice Number',
width: 200,
maxLength: 8,
enforceMaxLength: true,
allowBlank: false
}]
}]
}]
});
///////////////////////////////////////////////////////////////////////////////////////////
var DetailGrid = Ext.create('Ext.grid.GridPanel', {
region: 'center',
store: detailStore,
defaults: {
width: 100
},
sortableColumns: false,
enableColumnHide: false,
enableColumnMove: false,
selType: 'cellmodel',
features: [{
ftype: 'summary'
}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})],
columns: [{
header: "<b>Description</b>",
width: 250,
dataIndex: 'KDIDES',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
value = value.toUpperCase();
record.set('KDIDES', value);
return value;
},
editor: {
xtype: 'textfield',
maxLength: 20,
enforceMaxLength: true,
allowBlank: false,
selectOnFocus: true
}
}, {
header: "<b>Amount</b>",
dataIndex: 'KDAMT',
align: 'right',
renderer: 'usMoney',
summaryType: 'sum',
editor: {
xtype: 'numberfield',
allowBlank: false,
hideTrigger: true,
minValue: -99999999.99,
maxValue: 99999999.99,
selectOnFocus: true
}
}]
});
// viewport
new Ext.Viewport({
id: 'viewport',
layout: 'card',
activeItem: 0,
items: [
{
title:'Invoice Details',
width:200,
//region:'east',
split:true,
layout:{
type: 'border'
},
items:[DetailGrid, formEdit]}]
});
var myViewport = Ext.getCmp('viewport');
});
</script>
</head>
<body>
</body>
</html>
Comment