PDA

View Full Version : Js error is GroupHeader is null not an object, for innergrid for rowexpander



Vrushali.Suryawanshi
11 Mar 2014, 3:41 AM
Hi,
Extjs4.2.2- we are using rowexpander plugin, after expand outer grid on mouseover inner grid, gives js error.

Can any one help?
Here is sample code:

Ext.onReady(function () {
var myStore = Ext.create('Ext.data.Store', {
fields: [
{name:'name' , type:'string'},
{name:'email' , type:'string'},
{name:'phone' , type:'number'},
{name:'dob' , type:'date'}
],data : [
{"name":"ABC", "email":"abc.k@gmail.com","phone":"12556","dob":"1990/09/11"},
{"name":"PQR", "email":"pqr.l@yahoo.com","phone":"13332","dob":"1990/09/11"},
{"name":"STV", "email":"stv.m@gmail.com","phone":"123422","dob":"1991/09/12"},
{"name":"UVW", "email":"uvw.n@gmail.com","phone":"321424","dob":"1989/09/13"}
]
});
Ext.create('Ext.grid.Panel', {
title: 'Employee Details',
id: 'empGridID',
store: myStore,
plugins : [{ ptype:'rowexpander',
pluginId: 'rowPlugin',
rowBodyTpl : '<div id="empDivId-{name}" style="padding-left:20 ;"></div>'
}],
columns: [
{ id:'EmpID1',text: 'Name', dataIndex: 'name'},
{ id:'EmpID2',text: 'Email', dataIndex: 'email',renderer:function(value){ return Ext.String.format('<a href="mailto:{0}">{1}</a>' ({0}&quot;>{1}</a>'), value, value);}},
{ id:'EmpID3',text: 'Phone', dataIndex: 'phone' },
{ id:'EmpID4',text: 'Date of Birth', dataIndex: 'dob' , lockable:false , xtype:'datecolumn', format:'Y-m-d' }
],
height: 200,
width: 500,
renderTo: formID,
selModel:Ext.create('Ext.selection.CheckboxModel',{})
});
myStore.load();
var empExapander = Ext.getCmp('empGridID').getView();
empExapander.addListener('expandbody',function(rowNode, record, expandRow, eOpts){
exapndInnerGrid(record);
});
empExapander.addListener('collapsebody',function(rowNode, record, expandRow, eOpts){
document.getElementById('tradeLevelDivId'+record.get('name')).innerHTML = "";
});
});
function exapndInnerGrid(iRecord){
var personStore = Ext.create('Ext.data.Store', {
fields: [
{name:'workName'},
{name:'designation'},
{name:'salary'},
{name:'gender'}
],
data : [
{"workName":"ABC", "designation":"Developer","salary":"123344","gender":"Male"},
{"workName":"PQR", "designation":"Developer","salary":"33232","gender":"Male"},
{"workName":"STV", "designation":"Developer","salary":"14523","gender":"Female"},
{"workName":"UVW", "designation":"Tester","salary":"322421","gender":"Female"}
]
});
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
Ext.create('Ext.grid.Panel',{
id: 'personGridID',
store: personStore,
plugins : [cellEditing],
columns: [
{ id:'pp1',text: 'WorkName', dataIndex: 'workName', locked: true },
{ id:'pp2',text: 'Designation', dataIndex: 'designation'},
{ id:'pp3',text: 'Salary', dataIndex: 'salary',editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
} },
{ id:'pp4', text: 'Gender', dataIndex: 'gender' , lockable:false }
],
height: 80,
width: 400,
renderTo: 'empDivId-'+iRecord.get('name')
});
}


Thanks.

Gary Schlosberg
18 Mar 2014, 4:53 PM
I don't believe the cellediting plugin is designed to function within a rowexpander. There may be a conflict in the events since clicking inside an expanded row usually closes it.

andruhon@gmail.com
6 Aug 2014, 7:09 PM
This happens because grid cell or cell editor event (mouseover, click or whatever) is fired in context of another grid (parent or ancestor).

This override might help (it works fine on 4.2.2 for me):


Ext.define('SystemFox.overrides.view.Table', {
override: 'Ext.view.Table',
checkThatContextIsParentGridView: function(e){
var target = Ext.get(e.target);
var parentGridView = target.up('.x-grid-view');
if (this.el != parentGridView) {
/* this is event of different grid caused by grids nesting */
return false;
} else {
return true;
}
},
processItemEvent: function(record, row, rowIndex, e) {
if (e.target && !this.checkThatContextIsParentGridView(e)) {
return false;
} else {
return this.callParent([record, row, rowIndex, e]);
}
}
});