PDA

View Full Version : Viewport Regions Vanish - Breaks Resizing



BillQuesnel
12 Jun 2011, 10:10 AM
ExtJS: v4.0.2 (same behaviour in ExtJS 4.0.0, 4.0.1, and 4.0.2 PR)
Tested in Browsers: IE 7, 8, 9, Firefox 3.6.17

I have a complex Viewport that has collapsing East and West panels. When you select a button on a grid object (show all samples) in the Central panel it programmatically collapses the West panel and displays the East panel. When this happens in IE, the West panel title bar disappears altogether, and further auto-resizing of the viewport is broken. In Firefox, the West panel does collapse and the East expands, however, the re-expand button on the West panel is not present, and you can only use the hover and expand functionality of the panel.

Tried implementing a series of delayed tasks when the "Show all Samples" button is clicked, that would wait for one panel to collapse and then expand the other panel (wait for on statesave). Seemed like this approach had promise, however, the second you get an error you lose all expand/collapse behaviour.

In IE you get the following error:

SCRIPT5007: Unable to get value of the property 'style': object is null or undefined
ext-all-debug.js, line 8256 character 21

In Firefox you get the following error:

el is null
out = (v = el.style[prop]) ? v : (in ext-all-debug.js - line 8216)

I thought perhaps it was related to this reported bug which was fixed in 4.0.2, but alas no;

http://www.sencha.com/forum/showthread.php?133780-Double-Click-Close-Button-on-Desktop-Example-Window-(getStyle-of-undefined-element) (http://www.sencha.com/forum/showthread.php?133780-Double-Click-Close-Button-on-Desktop-Example-Window-%28getStyle-of-undefined-element%29)

Here is the button causing all the grief;



var viewSamplesButton = [{
xtype: 'button',
text: 'View all Samples',
iconCls: 'icon-table_multiple',
scope: this,
handler: function(btn) {
var grid = btn.up('gridpanel');
var record = grid.getSelectionModel().lastSelected;
if (record) {
var equipmentId = record.get('EQUIPMENT_ID');
var sampleGrid = Ext.getCmp('sampleGrid');
var machineSearchPanel = Ext.getCmp('machineSearchPanel');
var sampleViewPanel = Ext.getCmp('sampleViewPanel');

sampleGrid.setTitle('Samples for Machine ' + record.get('MACHINE_ID'));
if ( machineSearchPanel.isVisible() ) {
machineSearchPanel.collapse(); //'DIRECTION_LEFT',true,null);
}
if ( !sampleViewPanel.isVisible() ) {
sampleViewPanel.expand();
}
sampleGrid.store.load({ params: { search_string: equipmentId, view_mode: 'MACHINE_ID' }});
} else {
Ext.Msg.show({ title: 'Information', msg: 'You must select a machine first', buttons: Ext.Msg.OK, icon: Ext.MessageBox.INFO });
}
}
}];


Here is the button with all the added delay tasks to the handler, that did not fix the problem;



var viewSamplesButton = [{
xtype: 'button',
text: 'View all Samples',
iconCls: 'icon-table_multiple',
scope: this,
handler: function(btn) {
var grid = btn.up('gridpanel');
var record = grid.getSelectionModel().lastSelected;
if (record) {
var equipmentId = record.get('EQUIPMENT_ID');
var sampleGrid = Ext.getCmp('sampleGrid');
var machineSearchPanel = Ext.getCmp('machineSearchPanel');
var sampleViewPanel = Ext.getCmp('sampleViewPanel');

sampleGrid.setTitle('Samples for Machine ' + record.get('MACHINE_ID'));
if ( machineSearchPanel.isVisible() ) {
machineSearchPanel.collapse(); //'DIRECTION_LEFT',true,null);
if ( !sampleViewPanel.isVisible() ) {
var expandTask = new Ext.util.DelayedTask(function(){
sampleViewPanel.expand();
});
machineSearchPanel.on('statesave',function() {
expandTask.delay(500);
});
}
}
if ( sampleViewPanel.isVisible() === false ) {
var task = new Ext.util.DelayedTask(function(){
sampleGrid.store.load({ params: { search_string: equipmentId, view_mode: 'MACHINE_ID' }});
});

Ext.getCmp('sampleViewPanel').on('statesave', function(){
task.delay(2000);
});
} else {
sampleGrid.store.load({ params: { search_string: equipmentId, view_mode: 'MACHINE_ID' }});
}

} else {
Ext.Msg.show({ title: 'Information', msg: 'You must select a machine first', buttons: Ext.Msg.OK, icon: Ext.MessageBox.INFO });
}
}
}];


And just for fun, here is the Viewport ;



Ext.define('OEMWC.view.Viewport', {
extend: 'Ext.container.Viewport',
id: 'appViewport',

requires: [
'Ext.layout.container.Border'
],

layout: 'border',

items: [{
region: 'north',
layout: 'absolute',
height: 88,
minSize: 88,
maxSize: 88,
style: {
paddingTop: '10px',
paddingRight: '10px',
paddingLeft: '10px',
paddingBottom: '0px'
},
cmargins: '5 0 0 0',
html: '<table class="volvo-hdr"><tr><td rowspan="2" class="volvo-hdr-logo">&nbsp;</td><td class="volvo-hdr-top">&nbsp;</td></tr><tr><td class="volvo-hdr-btm">&nbsp;</td></tr></table>',
items: [{
xtype: 'livechat'
},{
xtype: 'userinfo'
}],
listeners: {
'resize': function(panel, adjWidth, adjHeight) {
var infoPanel = Ext.getCmp('userInfoPanel');
infoPanel.setPagePosition(adjWidth - (infoPanel.width + 20), adjHeight - (infoPanel.height + 4));
var liveChatPanel = Ext.getCmp('liveChatPanel');
liveChatPanel.setPagePosition(adjWidth - (liveChatPanel.width + 8 + infoPanel.width + 20), 54);
}
}
}, {
xtype: 'tabpanel',
region: 'center',
defaults: {
autoScroll: true
},
activeTab: 0,
id: 'appTabPanel',
border: true,
plain: true,
style: {
paddingTop: '0px',
paddingRight: '0px',
paddingBottom: '0px',
paddingLeft: '0px'
},
items: [{
title: 'start',
id: 'tabStart',
tooltip: 'Volvo Oil Analysis Home Page',
tooltipType: 'title',
border: false,
padding: 10,
bodyBorder: false,
layout: 'fit',
items: [{
xtype: 'dashboardhome'
}]
}, {
title: 'active',
id: 'tabActive',
layout: 'fit',
tooltip: 'View Machines with active oil samples',
style: 'padding: 10px;',
items: [{
xtype: 'machineview',
gridViewMode: 'Active',
id: 'machineViewActive',
itemId: 'machineViewActive'
}]
}, {
title: 'critical',
id: 'tabCritical',
tooltip: 'View Machines with critical oil samples',
style: 'padding: 10px;',
layout: 'fit',
items: [{
xtype: 'machineview',
gridViewMode: 'Critical',
id: 'machineViewCritical',
itemId: 'machineViewCritical'
}]
}, {
title: 'search',
id: 'tabSearch',
layout: 'fit',
tooltip: 'Search (<- using the tabs to the left) to locate machines by customer, serial number, or model',
style: 'padding: 10px;',
items: [{
xtype: 'machineview',
gridViewMode: 'Search',
id: 'machineViewSearch',
itemId: 'machineViewSearch'
}]
}, {
title: 'transit',
id: 'tabTransit',
layout: 'fit',
tooltip: 'Machines where samples have been submitted using Volvo On-line Sample Submission',
style: 'padding: 10px;',
items: [{
xtype: 'machineview',
gridViewMode: 'Transit',
id: 'machineViewTransit',
itemId: 'machineViewTransit'
}]
}, {
title: 'validations',
id: 'tabValidations',
layout: 'fit',
tooltip: 'Machines the require CAP Warranty Validation',
style: 'padding: 10px;',
items: [{
xtype: 'machineview',
gridViewMode: 'Validations',
id: 'machineViewValidations',
itemId: 'machineViewValidations'
}]
}, {
title: 'out-of-warranty',
id: 'tabOutOfWarranty',
layout: 'fit',
tooltip: 'Machines that have recently gone out of CAP warranty',
style: 'padding: 10px;',
items: [{
xtype: 'machineview',
gridViewMode: 'Out_of_Warranty',
id: 'machineViewOutofWarranty',
itemId: 'machineViewOutofWarranty'
}]
}, {
title: 'training',
id: 'tabTraining',
tooltip: 'The Volvo Oil Analysis training center',
style: 'padding: 0px;',
border: true,
bodyBorder: false,
padding: 10,
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch' // Don't use 'stretchmax' see http://www.sencha.com/forum/showthread.php?92806-SOLVED-3.1.1-vbox-layout-resizing-issue/page2&highlight=vbox+resize+browser
},
items: [{
xtype: 'panel',
itemId: 'idTrainingHomeTopSplash',
id: 'trainingHomeTopSplash',
height: 119,
border: false,
html: '<table width="100%"><tr><td class="oa-hdr oa-training-hdr">' +
'<img src="/Content/images/volvo/volvo_train_group_title.png" align="left" width="260" height="21"></img><br clear=all>' +
'<p class="oa-home-text">Find Volvo bulletins pertaining to oil and fluid<br>' +
'analysis, oil analysis training courses, and videos to help you<br>' +
'better utilize the Volvo WebCheck VDN system.<br>' +
'</p>' +
'</td></tr></table>'
}, {
xtype: 'traininglist'
}]
}]
}, {
xtype: 'machinesearch',
region: 'west',
appViewMode: this.appViewMode,
collapsible: true,
collapsedTitle: true
}, {
xtype: 'sampleview',
region: 'east',
appViewMode: this.appViewMode,
collapsible: true,
collapsedTitle: true,
collapsed: true,
resizable: true
}]

});

mankz
12 Jun 2011, 10:50 PM
Not sure exactly what's going on but you have cleaning to do below (overnesting quite a bit which will add unnecessary DOM elements).



items: [{
title: 'start',
id: 'tabStart',
tooltip: 'Volvo Oil Analysis Home Page',
tooltipType: 'title',
border: false,
padding: 10,
bodyBorder: false,
layout: 'fit',
items: [{
xtype: 'dashboardhome'
}]
}, {
title: 'active',
id: 'tabActive',
layout: 'fit',
tooltip: 'View Machines with active oil samples',
style: 'padding: 10px;',
items: [{
xtype: 'machineview',
gridViewMode: 'Active',
id: 'machineViewActive',
itemId: 'machineViewActive'
}]
}, {
title: 'critical',
id: 'tabCritical',
tooltip: 'View Machines with critical oil samples',
style: 'padding: 10px;',
layout: 'fit',
items: [{
xtype: 'machineview',
gridViewMode: 'Critical',
id: 'machineViewCritical',
itemId: 'machineViewCritical'
}]
}, {
title: 'search',
id: 'tabSearch',
layout: 'fit',
tooltip: 'Search (<- using the tabs to the left) to locate machines by customer, serial number, or model',
style: 'padding: 10px;',
items: [{
xtype: 'machineview',
gridViewMode: 'Search',
id: 'machineViewSearch',
itemId: 'machineViewSearch'
}]
}, {
title: 'transit',
id: 'tabTransit',
layout: 'fit',
tooltip: 'Machines where samples have been submitted using Volvo On-line Sample Submission',
style: 'padding: 10px;',
items: [{
xtype: 'machineview',
gridViewMode: 'Transit',
id: 'machineViewTransit',
itemId: 'machineViewTransit'
}]
}, {
title: 'validations',
id: 'tabValidations',
layout: 'fit',
tooltip: 'Machines the require CAP Warranty Validation',
style: 'padding: 10px;',
items: [{
xtype: 'machineview',
gridViewMode: 'Validations',
id: 'machineViewValidations',
itemId: 'machineViewValidations'
}]
}, {
title: 'out-of-warranty',
id: 'tabOutOfWarranty',
layout: 'fit',
tooltip: 'Machines that have recently gone out of CAP warranty',
style: 'padding: 10px;',
items: [{
xtype: 'machineview',
gridViewMode: 'Out_of_Warranty',
id: 'machineViewOutofWarranty',
itemId: 'machineViewOutofWarranty'
}]
}, {
title: 'training',
id: 'tabTraining',
tooltip: 'The Volvo Oil Analysis training center',
style: 'padding: 0px;',
border: true,
bodyBorder: false,
padding: 10,
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch' // Don't use 'stretchmax' see http://www.sencha.com/forum/showthread.php?92806-SOLVED-3.1.1-vbox-layout-resizing-issue/page2&highlight=vbox+resize+browser
},
items: [{
xtype: 'panel',
itemId: 'idTrainingHomeTopSplash',
id: 'trainingHomeTopSplash',
height: 119,
border: false,
html: '<table width="100%"><tr><td class="oa-hdr oa-training-hdr">' +
'<img src="/Content/images/volvo/volvo_train_group_title.png" align="left" width="260" height="21"></img><br clear=all>' +
'<p class="oa-home-text">Find Volvo bulletins pertaining to oil and fluid<br>' +
'analysis, oil analysis training courses, and videos to help you<br>' +
'better utilize the Volvo WebCheck VDN system.<br>' +
'</p>' +
'</td></tr></table>'
}, {
xtype: 'traininglist'
}]
}]


should be more like:



items: [{
title: 'start',
id: 'tabStart',
tooltip: 'Volvo Oil Analysis Home Page',
tooltipType: 'title',
border: false,
padding: 10,
bodyBorder: false,
xtype: 'dashboardhome'
}, {
title: 'active',
xtype: 'machineview',
id: 'machineViewActive',
itemId: 'machineViewActive'
gridViewMode: 'Active',
tooltip: 'View Machines with active oil samples',
style: 'padding: 10px;'
}, {
title: 'critical',
xtype: 'machineview',
gridViewMode: 'Critical',
itemId: 'machineViewCritical'
id: 'machineViewCritical',
tooltip: 'View Machines with critical oil samples',
style: 'padding: 10px;'
}, {
title: 'search',
xtype: 'machineview',
id: 'machineViewSearch',
itemId: 'machineViewSearch'
gridViewMode: 'Search',
tooltip: 'Search (<- using the tabs to the left) to locate machines by customer, serial number, or model',
style: 'padding: 10px;'
}, {
title: 'transit',
tooltip: 'Machines where samples have been submitted using Volvo On-line Sample Submission',
style: 'padding: 10px;',
xtype: 'machineview',
gridViewMode: 'Transit',
id: 'machineViewTransit',
itemId: 'machineViewTransit'
}, {
title: 'validations',
tooltip: 'Machines the require CAP Warranty Validation',
style: 'padding: 10px;',
xtype: 'machineview',
gridViewMode: 'Validations',
id: 'machineViewValidations',
itemId: 'machineViewValidations'
}, {
title: 'out-of-warranty',
tooltip: 'Machines that have recently gone out of CAP warranty',
style: 'padding: 10px;',
xtype: 'machineview',
gridViewMode: 'Out_of_Warranty',
id: 'machineViewOutofWarranty',
itemId: 'machineViewOutofWarranty'
}, {
title: 'training',
id: 'tabTraining',
tooltip: 'The Volvo Oil Analysis training center',
style: 'padding: 0px;',
border: true,
bodyBorder: false,
padding: 10,
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch' // Don't use 'stretchmax' see http://www.sencha.com/forum/showthread.php?92806-SOLVED-3.1.1-vbox-layout-resizing-issue/page2&highlight=vbox+resize+browser
},
items: [{
xtype: 'panel',
itemId: 'idTrainingHomeTopSplash',
id: 'trainingHomeTopSplash',
height: 119,
border: false,
html: '<table width="100%"><tr><td class="oa-hdr oa-training-hdr">' +
'<img src="/Content/images/volvo/volvo_train_group_title.png" align="left" width="260" height="21"></img><br clear=all>' +
'<p class="oa-home-text">Find Volvo bulletins pertaining to oil and fluid<br>' +
'analysis, oil analysis training courses, and videos to help you<br>' +
'better utilize the Volvo WebCheck VDN system.<br>' +
'</p>' +
'</td></tr></table>'
}, {
xtype: 'traininglist'
}]
}]

BillQuesnel
13 Jun 2011, 6:31 AM
Thanks, I took the extra-nesting out, however, the same situation. Appears that the resizing breaks the first time the panels expand/collapse. After that even changing the size of the browser window does not trigger any re-layout (in IE 8, and 9). In Firefox, the Search (West) tab collapses, but the Central tab slides underneath and it can only be used in quick slide out mode as the expand (>>) button never gets added to the collapsed title bar.

This is the code for the West panel;



Ext.define('OEMWC.view.machineSearch', {
extend: 'Ext.tab.Panel',
alias: 'widget.machinesearch',
id: 'machineSearchPanel',

initComponent: function() {
var me = this;

me.region = 'west';
me.title = 'Search';
me.activeTab = 0;
me.width = 240;
me.height = 600;
me.border = true;
me.plain = true;
me.layout = {
type: 'fit'
};
me.style = {
paddingTop: '0px',
paddingRight: '0px',
paddingBottom: '10px',
paddingLeft: '10px'
};
me.defaults = {
autoScroll: true
};

me.items = [{
xtype: 'machinetree',
id: 'customerTree',
rootDisplayText: 'Customers',
treeTitle: 'Customer',
treeViewType: 'CUSTOMER'
},{
xtype: 'machinetree',
id: 'machineTypeTree',
rootDisplayText: 'Machine Type',
treeTitle: 'Machines',
treeViewType: 'MACHINE_TYPE'
}, {
xtype: 'machinetree',
id: 'machineIdTree',
rootDisplayText: 'Machine Id',
treeTitle: 'Serial No',
treeViewType: 'MACHINE_ID'
}, {
xtype: 'machinetree',
id: 'dealerTree',
rootDisplayText: 'Dealers',
treeTitle: 'Dealer',
treeViewType: 'DEALER'
}];

me.callParent(arguments);
}

});
And here is the code for the East Panel;



Ext.define('OEMWC.view.sampleView', {
extend: 'Ext.panel.Panel',
alias: 'widget.sampleview',
id: 'sampleViewPanel',

initComponent: function() {
var me = this;

me.searchMode = Ext.SEARCH_MODE; // "CORPORATE", "DEALER", "BRANCH", "CUSTOMER"
me.searchString = me.searchString || ''; // If specified will filter by searchString
me.startDate = me.startDate || Ext.START_DATE; // Default start date for filtering
me.start = me.start || 0; // Start at record number (for use with PagingToolBar)
me.limit = me.limit || 10; // Number of records to retrieve (for use with PagingToolBar)

me.title = 'Samples';
me.width = 425;
me.height = 600;

me.layout = {
type: 'vbox',
pack: 'start',
align: 'stretch' // Don't use 'stretchmax' see http://www.sencha.com/forum/showthread.php?92806-SOLVED-3.1.1-vbox-layout-resizing-issue/page2&highlight=vbox+resize+browser
};
me.style = {
padding: '10px'
};
me.border = false;

me.items = [{
xtype: 'samplelist'
}, {
xtype: 'sampletestresults',
itemId: 'sampleBottomView',
flex: 1,
border: false,
style: { paddingTop: '10px' },
layout: 'fit',
defaults: { autoScroll: true }
}];

this.callParent(arguments);
}

});
In Firefox I'm still getting;

el is null : ext-all-debug.js (8216)
out = ( v = el.style[prop] ) ? v : (cs = view.getComputedStyle(el, "")) ? cs[prop] : null;

In IE it doesn't cause an error on every first attempt. I was just able to click the button, and then reset the collapsed panels 3 times before getting this error;

SCRIPT5007: Unable to get value of the property 'style': object is null or undefined
ext-all-debug.js, line 8256 character 21

Any suggestions on how to debug this? Not sure if it's a bug or just too much complexity on my part.

Really appreciate the comments above...I'm looking thru all my code and removing any unnecessary nesting.

BillQuesnel
13 Jun 2011, 7:36 PM
It's definitely the West panel that is causing the error. When I take out the code to collapse the West panel and replace it with an animate to width:10 (or 0 or whatever), you can expand/collapse all day long;



//if ( machineSearchPanel.isVisible() ) {
// machineSearchPanel.collapse(); //'DIRECTION_LEFT',true,null);
//}
machineSearchPanel.animate({
to: {
width: 10
}
});


Bah. Frustrating. I may just get rid of the collapse-able West panel and do something with animations.

BillQuesnel
14 Jun 2011, 12:39 PM
OK, I've thoroughly read the API and I've come up with this partial solution;



}, {
xtype: 'machinesearch',
region: 'west',
appViewMode: this.appViewMode,
collapsible: true,
collapseFirst: true,
collapseMode: 'header', // Important, crashes layout manager if omitted.
padding: 8,
resizable: true
}, {
xtype: 'sampleview',
region: 'east',
appViewMode: this.appViewMode,
collapsible: true,
collapseFirst: true,
collapseMode: 'header', // Important, crashes layout manager if omitted.
padding: 8,
collapsed: true,
resizable: true
}]


Key is to use collapseMode: 'header', instead of the default (omitted/undefined). Resizing does not break, however, there is some weird behaviour in Firefox, that can be fixed with some appropriately placed doLayout()s.

I've inserted this in the East panel. It takes care of the expand, but not the collapse. In Firefox, when you click the collapse >> button on the header the vertical header does not show, up, but rather the horizontal header shows up at the bottom right of the window. So I'll dig a little deeper. None-the-less, this is beautiful, as my app is no longer crashing, and that's always good.



me.listeners = {
scope: this,
expand: function() {
Ext.getCmp('appViewport').doLayout();
},
collapse: function() {
Ext.getCmp('appViewport').doLayout();
}
};

keithoth
28 Jun 2011, 2:01 PM
Thanks for the work around. I have this same bug.

BillQuesnel
28 Jun 2011, 4:33 PM
It works well in MS IE, however, there is still a bug in Firefox, and the East panel eventually will not show the vertical title bar, regardless of how you call doLayout(). Hopefully this will be fixed in future versions of Ext JS 4.x.

Tigers
5 Oct 2011, 12:20 AM
I've the same issue. But the above fix doesn't work for me in IE :(. Any help ?

BillQuesnel
5 Oct 2011, 2:29 AM
Post your relevant code, and I'll have a look.