PDA

View Full Version : layout crashes on panel collapse/expand responsiveConfig



Thinker Bug
25 Feb 2015, 5:00 AM
Hi,

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.


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

});

following is the code that adds a chart to the view:


campReportComboSelect : function(field, value, options) { if(!Ext.platformTags.desktop){
var collapsePanel = field.up('panel[name=collapsepanel]');
collapsePanel.setCollapsed(true);
}
var panel = field.up('panel').up('panel');
var campaignCombo = panel.down('toolbar > combobox[name=campaigncombo]');
var chart = panel.down('panel[name=reportpanel]');
if (chart) {
panel.remove(chart);
}
var accountCombo = panel.down('toolbar > combobox[name=accountscombo]');
var accountId = accountCombo.getValue();
var campaignId = campaignCombo.getValue();
if (!campaignId) {
return;
}
var adTypecombo = panel.down('toolbar >combobox[name=channelCombo]');
var channelId = adTypecombo.getValue();
var metricVal = panel.down('button[pressed=true]').name;
var fromDate = panel.down('toolbar >datefield[name=fromdate]').getValue();
var formattedFromDate = Ext.util.Format.date(fromDate, 'Y-m-d');
var toDate = panel.down('toolbar >datefield[name=todate]').getValue();
var formattedToDate = Ext.util.Format.date(toDate, 'Y-m-d');
if (fromDate > toDate || !Ext.isDate(fromDate) || !Ext.isDate(toDate)) {
Ext.Msg.alert({
title : Ext.getStore('MessageResources').getMessage('REPORT_INVALID_INPUT'),
msg : Ext.getStore('MessageResources').getMessage('REPORT_FROMDATE_VALIDATION'),
buttons : Ext.Msg.OK
});
return;
}
var condition1 = (channelId === 5 || channelId === 6 || channelId === 8 || channelId === 9 || channelId === 10);
var condition2 = (channelId === 7);
var condition3 = (channelId === 1 || channelId === 4);
if (accountId === -1 && campaignId === -1) {
if (Qreda.User.partnerId === 2) {
metricVal = condition1 ? metricVal + 39 : (condition2 ? metricVal + 42 : (condition3 ? metricVal + 45 : metricVal + 48));
} else {
metricVal = condition1 ? metricVal + 27 : (condition2 ? metricVal + 30 : (condition3 ? metricVal + 33 : metricVal + 36));
}
} else if (campaignId === -1) {
metricVal = condition1 ? metricVal + 15 : (condition2 ? metricVal + 18 : (condition3 ? metricVal + 21 : metricVal + 24));
} else {
metricVal = condition1 ? metricVal + 3 : (condition2 ? metricVal + 6 : (condition3 ? metricVal + 12 : metricVal));
}
var reportArgs = [];
reportArgs.push({
name : 'fromDate',
value : formattedFromDate
});
reportArgs.push({
name : 'toDate',
value : formattedToDate
});
reportArgs.push({
name : 'creativeGroupTypeId',
value : channelId
});
reportArgs.push({
name : 'campaignId',
value : campaignId
});
reportArgs.push({
name : 'accountId',
value : accountId
});
reportArgs.push({
name : 'partnerId',
value : Qreda.User.partnerId
});
reportArgs.push({
name : 'userId',
value : Qreda.User.id
});
var reportUrl = Qreda.getReportURL('campaignReport', metricVal, reportArgs);
Ext.ux.ReportCSVReader.createReport({
reportUrl : reportUrl,
reportRenderTo : panel,
title : 'MENU_REPORT_CAMPAIGN'
});


},

I've tried giving layout to the campaignreportpanel
No clue on why the layout fails.

Please help.

guilherme.lopes
23 Mar 2015, 8:29 AM
Hi,

The center panel is not supported as collapsible as there isn't any logic added to handle the the new available empty room. You should try a combination of hbox and vbox there to achieve the same result.

Thanks,