PDA

View Full Version : Responsive Config for Layout Type



chrisminniti
18 Jul 2015, 8:16 PM
Admins, feel free to delete. This question was previously answered: https://www.sencha.com/forum/showthread.php?299719-Responsive-config-issue

This seems like it would be a pretty common scenario. I have 2 containers. They are side by side. When the page gets under a certain width, i would like them stacked. They both have a flex of 1.


responsiveConfig: { 'width > 768': {
layout: {
type: 'hbox',
align: 'stretch',
pack: 'start'
}
},
'width <= 768': {
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
}
}
},

The following error gets thrown when shrinking the browser


Uncaught TypeError: Cannot read property 'dom' of undefined


/** * Moves Component to the provided target instead.
* @private
*/
moveItem: function(item, target, position) {
target = target.dom || target; <<<== the offending line
if (typeof position === 'number') {
position = target.childNodes[position];
}
target.insertBefore(item.el.dom, position || null);
item.container = Ext.get(target);
this.configureItem(item);
},

enrico.p89
4 Mar 2016, 4:01 AM
I have the same problem. Any idea to resolve error?Thanks, Enrico

bressi
27 Sep 2016, 5:04 AM
I have the same issue too.
Can anyone let us know how to resolve ?

Regards,
Claudia

gstcyr
30 Sep 2016, 9:21 AM
The solution here seems to be to use layout 'box' with the vertical config:



responsiveConfig: {
'width < 1024': {
layout: {
type: 'box',
vertical: true,
align: 'stretch'
}
},
'width >= 1024': {
layout: {
type: 'box',
align: 'stretch',
vertical: false
}
}
}

bressi
2 Oct 2016, 10:41 PM
Hi,

The solution seems ok but I am working on SA 3.5.1 and here I am not able to use layout 'box'.

Yacine BRITAH
3 May 2017, 11:34 PM
Set it dynamically