PDA

View Full Version : [OPEN-EXTJSIV-1780]Closing a panel of a border layout with large grid ERROR



jminnick
27 Apr 2011, 7:38 AM
I have a vp with a nested borderlayout center region. in the south region (of the nested borderlayout) I have a grid with approx 300 records. Upon collapsing the grid it triggers a "'style' is null or not an object error."

I have noticed, if I scroll the grid all the way to the last recordset it prevents this error from triggering.

mankz
27 Apr 2011, 12:18 PM
Could you post a test case?

jminnick
28 Apr 2011, 4:06 AM
Here is a test case. I made it as basic as i possibly could and I still see the error with just 125 records being returned.

something else to note and I read someone else had posted as well, If i default the bottom grid to render collapsed, it throws an "'el.down(...)' is null or not an object" error.

IE8 in both modes, Standard and Compatibility





Ext.onReady(function() {

Ext.regModel('cbrn_ac_chart', {
fields: [
{name:'pct', type:'auto' },
{name:'p_pct', type:'auto' },
{name:'yyyymm', type:'auto' },
{name:'jmar_dt', type:'string' }

]
});

Ext.regModel('cbrn_ac_grid', {
fields: [
{name:'allow_qty', type:'auto' },
{name:'assm_id', type:'auto' },
{name: 'assm_num', type:'auto' },
{name:'group_by', type:'auto' },
{name:'astd_qty', type:'auto' },
{name:'errors', type:'auto' },
{name:'fault', type:'auto' },
{name: 'faulttip', type:'auto' },
{name:'nsn', type:'auto' },
{name:'pct', type:'auto' },
{name:'sran', type:'auto' },

{name:'sub_assm', type:'auto' },
{name:'sub_org_id', type:'auto' },
{name:'total', type:'auto' }
]
});

var cbrn_ac_chart_store = new Ext.data.Store({
model: 'cbrn_ac_chart',
proxy: {
type: 'ajax',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
extraParams:{'dodaac':'FM2300'},
url: '/apps/cm/model/kpi-v-ii.cfm?remoteEvent=allow_curr_chart',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});

var cbrn_ac_grid_store = new Ext.data.Store({
model: 'cbrn_ac_grid',
groupField:'group_by',
pageSize: 50,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
// never purge any data, we prefetch all up front
purgePageCount: 0,
proxy: {
type: 'ajax',
actionMethods: {
create : 'POST',
read : 'POST',
update : 'POST',
destroy: 'POST'
},
extraParams:{'dodaac':'FM2300'},
url: '/apps/cm/model/kpi-v-ii.cfm?remoteEvent=allow_curr_grid',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});

var cbrn_ac_chart_panel = new Ext.chart.Chart({
hidden: false,
layout: 'fit',
animate:false,
id: 'cbrn_ac_chart_',
style: 'background:#fff',
store: cbrn_ac_chart_store,
axes: [{
type: 'Numeric',
position: 'left',
minorTickSteps: 1,
fields: ['p_pct','pct'],
title: 'Percentage',
grid:true
},{
type: 'Category',
position: 'bottom',
fields: ['yyyymm'],
title: 'Year / Month'
}],
series: [{
type: 'line',
xField:'yyyymm',
yField:'p_pct',
tips: {
trackMouse: true,
width: 450,
height: 55,
renderer: function(storeItem, item) {
this.setTitle('Overall Peer Group Percentage: ' + storeItem.get('p_pct') + ' Year / Month: ' + storeItem.get('yyyymm'));
}
},
style: {
fill: '#000CFC',
opacity: 0.75
}
},{
type: 'line',
yField:'pct',
xField:'jmar_dt',
tips: {
trackMouse: true,
width: 450,
height: 55,
renderer: function(storeItem, item) {
this.setTitle('Percentage: ' + storeItem.get('pct') + ' Year / Month: ' + storeItem.get('yyyymm'));
}
},
style: {
fill: '#000CFC',
opacity: 0.75
}
}]
});

var cbrn_ac_grid_panel = new Ext.grid.GridPanel({
id:'cbrn_ac_grid_panel',
height:300,
invalidateScrollerOnRefresh: false,
loadMask: true,
viewConfig: {
trackOver: true
},
title:'Allowance Currency Information',
store: cbrn_ac_grid_store,
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: 'Sub Org and Assemblage {name}',
enableGroupingMenu:false
}],
verticalScroller: {
xtype: 'paginggridscroller',
activePrefetch: false
},
columns: [{
header: '',
hidden:true,
dataIndex: 'group_by',
width:100
},{
text: 'Sub Org',
sortable: true,
dataIndex: 'sub_org_id',
hideable: false,
flex:1,
summaryType: 'count',
summaryRenderer: function(v, params, data) {
return ((v === 0 || v > 1) ? '(' + v + ') Error Records' : '(1) Error Record');
}
},{
header: 'Assemblage',
sortable: true,
summaryType: 'count',
summaryRenderer: function(v, params, data) {
return '  ';
},
dataIndex: 'assm_id',
width:100
},{
header: 'Assemblage #',
sortable: true,
summaryType: 'count',
summaryRenderer: function(v, params, data) {
return '  ';
},
dataIndex: 'assm_num',
width:100
},{
header: 'Sub Assemblage',
sortable: true,
dataIndex: 'sub_assm',
summaryType: 'count',
summaryRenderer: function(v, params, data) {
return '  ';
},
width:100
},{
header: 'Currency %',
sortable: true,
dataIndex: 'pct',

summaryType: 'average',
summaryRenderer: function(v, params, data) {
return v + '%';
},
width:100
},{
header: 'NSN',
sortable: true,
dataIndex: 'nsn',
summaryType: 'count',
summaryRenderer: function(v, params, data) {
return '  ';
},
align:'right',
width:100
},{
header: 'Error',
sortable: true,
align:'right',
summaryType: 'count',
summaryRenderer: function(v, params, data) {
return '  ';
},
dataIndex: 'fault',
width:100
}]
});

Ext.create('Ext.Viewport', {
id:'kpi-viewport',
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region:'center',
id:'vp-center-card',
margins: '5 0 0 0',
title: 'CBRN KPI',
layout: 'card',
activeItem:0,
border: true,
items:[cbrn_ac_chart_panel]
},{
region:'south',
id:'east-region',
margins:'5 2 0 0',
cmargins:'5 2 0 0',
collapsible: true,
collapsed:false,
title:'KPI Description',
layout:'fit',
split:true,
width:'20%',
items:[cbrn_ac_grid_panel]
}]
});
});

mankz
28 Apr 2011, 4:49 AM
You're overnesting your gridpanel.



{
region:'south',
id:'east-region',
margins:'5 2 0 0',
cmargins:'5 2 0 0',
collapsible: true,
collapsed:false,
title:'KPI Description',
layout:'fit',
split:true,
width:'20%',
items:[cbrn_ac_grid_panel]
}


should be just 'cbrn_ac_grid_panel' and then apply border layout properties directly on the gridpanel instance instead.

jminnick
28 Apr 2011, 5:26 AM
So I removed the extra panel and added the properties to the grid panel, still the same result. An extra panel shouldn't cause that issue anyhow.




Ext.create('Ext.Viewport', {
id:'kpi-viewport',
listeners:{
beforerender:function(){
this.add(cbrn_ac_grid_panel);
this.add(cbrn_ac_chart_panel);
}
},
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
}
});

evant
28 Apr 2011, 5:49 AM
Here's a simpler test case:



Ext.require('*');
Ext.define('Item', {
extend: 'Ext.data.Model',
fields: ['allow_qty', 'assm_id', 'assm_num', 'group_by', 'astd_qty', 'errors', 'fault', 'faulttip', 'nsn', 'pct', 'sran', 'sub_assm', 'sub_org_id', 'total']
});

Ext.onReady(function(){


var data = [],
i = 0;

for (; i < 500; ++i) {
data.push({
assm_id: 'assm_id' + i,
assm_num: 'assm_num' + i,
sub_org_id: 'sub_org_id' + i,
sub_assm: 'sub_assm' + i,
nsn: 'nsn' + i,
pct: 'pct' + i,
fault: 'fault' + i
});
}

var cbrn_ac_grid_panel = new Ext.grid.GridPanel({
invalidateScrollerOnRefresh: false,
title: 'Allowance Currency Information',
store: {
model: 'Item',
data: data
},
columns: [{
text: 'Sub Org',
dataIndex: 'sub_org_id',
flex: 1
}, {
header: 'Assemblage',
dataIndex: 'assm_id',
width: 100
}, {
header: 'Assemblage #',
dataIndex: 'assm_num',
width: 100
}, {
header: 'Sub Assemblage',
dataIndex: 'sub_assm',
width: 100
}, {
header: 'Currency %',
dataIndex: 'pct',
width: 100
}, {
header: 'NSN',
dataIndex: 'nsn',
align: 'right',
width: 100
}, {
header: 'Error',
align: 'right',
dataIndex: 'fault',
width: 100
}]
});

Ext.create('Ext.Viewport', {
id: 'kpi-viewport',
layout: 'border',
items: [{
region: 'center',
title: 'CBRN KPI',
html: 'center'
}, {
region: 'south',
collapsible: true,
collapsed: false,
height: 300,
title: 'KPI Description',
layout: 'fit',
split: true,
items: [cbrn_ac_grid_panel]
}]
});
});

jminnick
28 Apr 2011, 6:13 AM
Here's a simpler test case:



...



It does however look like over-nesting was causing the "'el.down(...)' is null or not an object" error triggered when defaulting the panel to collapsed. That still might be worth a look. Nesting panels is a pretty common practice.