PDA

View Full Version : Getting TypeError: protoEl is null error after migration from extjs 3.2 to 4.2



mkm_2013
8 Nov 2013, 10:18 AM
I have gridPanel that contains grid with checboxmodel.
However when i migrated to extjs4.2 with compatibility 3 layer, i am getting TypeError: protoEl is null error when i try to render gridPanel.
Below is the code.
var subjectGrid = Ext.create('Ext.grid.Panel',{
renderTo:'manage-subjects',
width:700,
height:480,
id:'subjectGrid',
enableColumnMove:false,
// stripeRows:true,
frame:true,
enableHdMenu:false,
store:subjectStore,
tbar:[
{
xtype:'tbfill'
},
{xtype :'tbtext',text:'Search: '},
{
xtype:'trigger',
name:'field-search',
width:200,
emptyText:'Enter Subject ID',
triggerClass:'x-form-search-trigger',
listeners:{
'specialkey':function (ff, e) {
if (e.getKey() == e.ENTER) {
searchString = this.getValue();
// subjectStore.setBaseParam('search', searchString);
subjectStore.load({
params:{
search:searchString,
start:0,
limit:15
}
});
}
}
},
onTriggerClick:function (val) {
searchString = this.getValue();
// subjectStore.setBaseParam('search', searchString);
subjectStore.load({
params:{
search:searchString,
start:0,
limit:15
}
});
}
},
{
text:'Add',
id:'addLink',
icon:'/pageComponents/images/list-add.png',
cls:'x-btn-text-icon',
tooltip:{
title:'Manage Subject',
text:'Add a new Subject'
},
handler:function () {
editFlag = false;
editSubject(-1);
}
},
{
xtype:'tbseparator'
},
{
text:'Lock Subjects',
id:'lockSubjects',
tooltip:{
text:'Lock Subjects'
},
handler:handleLockSubject
},
{
xtype:'tbseparator'
},
{
text:'Unlock Subjects',
id:'unlockSubjects',
tooltip:{
text:'Unlock Subjects'
},
handler:handleUnlockSubject
}
],

columns:[

//{ cbsm},
{
header:'Subject ID',
width:100,
sortable:true,
dataIndex:'subjectId',
align:'center',
type:'String'
},
{
header:'Letter Code',
width:100,
sortable:true,
dataIndex:'letterCd',
align:'center',
type:'String'
},
{
header:'Subject Status',
width:100,
sortable:true,
dataIndex:'statusCd',
align:'center',
type:'String'
},
{
header:'Locked',
width:55,
sortable:false,
dataIndex:'locked',
align:'center',
type:'String',
sortable:true
},
{
header:'Enrollment Date',
width:115,
sortable:true,
dataIndex:'enrollmentDt',
align:'center',
type:'date',
renderer:Ext.util.Format.dateRenderer('M-d-Y')
},
{
header:'Deactivate Date',
width:115,
sortable:true,
dataIndex:'deactiveDt',
align:'center',
type:'date',
renderer:Ext.util.Format.dateRenderer('M-d-Y')
},
{
name:'edit',
width:80,
dataIndex:'editButton',
align:'center',
flex:1,
renderer:function (v, params, record) {
var isEdit = true;
if (isEdit) {
var index = subjectStore.indexOf(record);

var locked = record.get('locked');

if(locked == 'Locked') {
return '<span onclick="javascript:viewSubject(' + index + ')" style="cursor:pointer;color:#E37200;"><img width="16" height="16" src="/pageComponents/images/view_form_icon.gif" style="vertical-align: middle;">View</span>';
} else {
return '<span onclick="javascript:editSubject(' + index + ')" style="cursor:pointer;color:#E37200;"><img width="16" height="16" src="/pageComponents/images/icon_edit_document.png" style="vertical-align: middle;"> Edit</span>';
}


} else return ('<span></span>');
}
}],
selModel:cbsm,
title:'Manage Subjects',
clicksToEdit:1,
loadMask:true,
//autoExpandColumn:'edit',

bbar:subjectPager
});
console.log("before render");
subjectGrid.render();
console.log("After render");
Can anybody please let me know whats wrong. I am new to Extjs. Please help me.

Gary Schlosberg
13 Nov 2013, 7:27 PM
I don't see problems looking at your code, and the error doesn't help much. You might try posting a runnable test case, which can often encourage assistance from the community. You can use our Fiddle (https://fiddle.sencha.com/#home). Are you using 4.2.1?

mkm_2013
14 Nov 2013, 11:45 AM
4.2.1, the functionality is working only i am seeing the Prototype El error