Results 1 to 3 of 3

Thread: Getting TypeError: protoEl is null error after migration from extjs 3.2 to 4.2

  1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    26

    Default Getting TypeError: protoEl is null error after migration from extjs 3.2 to 4.2

    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,
    storeubjectStore,
    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:{
    searchearchString,
    start:0,
    limit:15
    }
    });
    }
    }
    },
    onTriggerClick:function (val) {
    searchString = this.getValue();
    // subjectStore.setBaseParam('search', searchString);
    subjectStore.load({
    params:{
    searchearchString,
    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',

    bbarubjectPager
    });
    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.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    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. Are you using 4.2.1?

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    26

    Default

    4.2.1, the functionality is working only i am seeing the Prototype El error

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •