My application which was recently migrated to Ext JS 5.1.0 from 4.1.1 is showing a random issue,
on panel collapse/expand the layout fails. the issue ia random. might appear on the second expand /collapse. or the following ones.
It shows the following error in console:
Uncaught TypeError: Cannot read property 'getStyle' of null
Attaching screen shot of the error in console.
Attaching screenshots of the UI.
I have used border layout for viewport.
The problem panel is in the center region panel. This panel has a 'responsive' plugin which changes it to a collapsible panel in devices other than desktop.
Following is the code for the view.
Code:
Ext.define('XX.view.report.agency.CampaignReportPanel', { extend : 'Ext.panel.Panel',
border : false,
xtype : 'campaignreportpanel',
initComponent : function() {
var prevMonthDate = new Date();
prevMonthDate.setMonth(prevMonthDate.getMonth() - 1);
var accountStore = Ext.create('Ext.data.Store', {
model : 'XX.model.Account',
proxy : this.accountStoreProxy,
listeners : {
load : function() {
accountStore.insert(0, {
id : -1,
title : Ext.getStore('MessageResources').getMessage('CAMPAIGN_REPORT_ALL')
});
}
}
});
var cgTypes = XX.controller.CreativeGroup.prototype.getSupportedTypesObjectArray(false);
var channelTypeStore = Ext.create('Ext.data.Store', {
fields : ['id', 'displayField'],
data : cgTypes
});
var campaignStore = Ext.create('Ext.data.Store', {
model : 'XX.model.Campaign',
remoteFilter : true,
filters : [{
property : 'accountId',
type : 'numeric',
operator : 'eq',
value : 0
}, {
property : 'stateId',
type : 'numeric',
operator : 'ne',
value : 0
}],
proxy : this.campaignStoreProxy,
listeners : {
load : function() {
campaignStore.insert(0, {
id : -1,
name : Ext.getStore('MessageResources').getMessage('CAMPAIGN_REPORT_ALL')
});
}
}
});
var campReportView = function(field, value, options) {
var goButton = this.down('button[itemId=goButton]');
goButton.fireEvent('click', goButton);
};
this.items = [{
xtype : 'panel',
title : Ext.getStore('MessageResources').getMessage('REPORT_CAMPAIGN_REPORT'),
frame : true,
name : 'collapsepanel',
plugins : 'responsive',
responsiveConfig : {
'desktop' : {
collapsible : false,
collapsed : false
},
'!desktop' : {
collapsible : true,
collapsed : true
}
},
items : [{
xtype : 'toolbar',
dock : 'top',
flex : 1,
plugins : 'responsive',
responsiveConfig : {
'!desktop' : {
layout : {
type : 'vbox',
align : 'left'
}
}
},
defaults : {
padding: 3
},
items : [{
xtype : 'combobox',
store : accountStore,
fieldLabel : Ext.getStore('MessageResources').getMessage('CAMPAIGN_ACCOUNT'),
forceSelection : true,
labelAlign : 'right',
name : 'accountscombo',
displayField : 'title',
valueField : 'id',
queryMode : 'remote',
triggerAction : 'all',
listeners : {
select : function(field, value, options) {
var container = field.up('toolbar');
container.down('combobox[name=campaigncombo]').reset();
var accountFilterIndex = -1;
Ext.Array.forEach(campaignStore.getFilters().items,function(filter,i){
if(filter.getProperty() === 'accountId'){
accountFilterIndex = i;
}
});
if (accountFilterIndex === -1) {
campaignStore.filters.add({
property : 'accountId',
type : 'numeric',
operator : 'eq',
value : field.getValue()
});
} else {
/*jslint nomen: true*/
campaignStore.filters.getAt(accountFilterIndex)._value = field.getValue();
/*jslint nomen: false*/
}
var campaignCombo = container.down('combobox[name=campaigncombo]');
campaignCombo.lastQuery = null;
var localCampaignStore = Ext.create('Ext.data.Store', {
model : 'XX.model.Campaign',
remoteFilter : true,
filters : [{
property : 'accountId',
type : 'numeric',
operator : 'eq',
value : field.getValue()
}, {
property : 'stateId',
type : 'numeric',
operator : 'ne',
value : 0
}],
proxy : this.campaignStoreProxy,
listeners : {
load : function() {
localCampaignStore.insert(0, {
id : -1,
name : Ext.getStore('MessageResources').getMessage('CAMPAIGN_REPORT_ALL')
});
campaignCombo.select(localCampaignStore.getById(-1));
}
}
});
localCampaignStore.on('load', function() {
if (localCampaignStore.getAt(0)) {
var campaign = localCampaignStore.getAt(0);
campaignCombo.store.loadData([campaign]);
campaignCombo.setValue(campaign.get('id'));
campaignCombo.fireEvent('select', campaignCombo, campaign, null);
}
});
localCampaignStore.load({
limit : 1
});
if (this.eventFiredOnce) {
campaignCombo.un('select', campReportView, this, {
single : true
});
}
this.eventFiredOnce = true;
},
scope : this
}
}, {
xtype : 'tbspacer',
width : 5
}, {
xtype : 'combobox',
store : campaignStore,
forceSelection : true,
name : 'campaigncombo',
fieldLabel : Ext.getStore('MessageResources').getMessage('CREATIVE_GROUP_CAMPAIGN'),
labelAlign : 'right',
displayField : 'name',
valueField : 'id',
queryMode : 'remote',
triggerAction : 'all'
}, {
xtype : 'combobox',
name : 'channelCombo',
forceSelection : true,
store : channelTypeStore,
fieldLabel : Ext.getStore('MessageResources').getMessage('CREATIVE_GROUP_TYPE'),
labelAlign : 'right',
queryMode : 'local',
valueField : 'id',
displayField : 'displayField'
}]
}, {
xtype : 'toolbar',
layout : 'hbox',
dock : 'top',
flex : 1,
plugins : 'responsive',
responsiveConfig : {
'!desktop' : {
layout : {
type : 'vbox',
align : 'left'
}
}
},
defaults : {
padding: 3
},
items : [{
xtype : 'datefield',
value : Ext.Date.add(new Date(), Ext.Date.DAY, -(30)),
fieldLabel : Ext.getStore('MessageResources').getMessage('REPORT_FROMDATE'),
labelAlign : 'right',
format : 'd/m/Y',
name : 'fromdate'
}, {
xtype : 'tbspacer',
width : 10
}, {
xtype : 'datefield',
fieldLabel : Ext.getStore('MessageResources').getMessage('REPORT_TODATE'),
labelAlign : 'right',
value : Ext.Date.add(new Date(), Ext.Date.DAY, -(1)),
format : 'd/m/Y',
name : 'todate',
maxValue : Ext.Date.add(new Date(), Ext.Date.DAY, -(1))
}]
}, {
xtype : 'toolbar',
layout : 'hbox',
dock : 'top',
flex : 1,
items : [{
xtype : 'button',
text : Ext.getStore('MessageResources').getMessage('REPORT_DAILY'),
toggleGroup : 'metricbutton',
pressed : true,
enableToggle : true,
allowDepress : false,
name : 1
}, {
xtype : 'button',
text : Ext.getStore('MessageResources').getMessage('REPORT_WEEKLY'),
toggleGroup : 'metricbutton',
enableToggle : true,
allowDepress : false,
name : 2
}, {
xtype : 'button',
text : Ext.getStore('MessageResources').getMessage('REPORT_MONTHLY'),
toggleGroup : 'metricbutton',
enableToggle : true,
allowDepress : false,
name : 3
}, {
xtype : 'tbspacer',
width : 10
}, {
xtype : 'button',
itemId : 'goButton',
autoHeight : true,
text : Ext.getStore('MessageResources').getMessage('REPORT_GO_BUTTON')
}]
}]
}];
this.callParent();
this.on('afterrender', function(component) {
var channelCombo = component.down('combobox[name=channelCombo]');
var firstRec = channelCombo.store.getAt(0);
if (firstRec) {
channelCombo.setValue(firstRec);
}
});
var campaignCombo = this.down('combobox[name=campaigncombo]');
campaignCombo.on('select', campReportView, this, {
single : true,
delay : 100
});
}
});
Please help.
Combo bug when displayFields == valueField
We're look forward to listen it