Extjs 6 responsiveConfig cannot find setters for layout config items
I have a basic layout script. I am trying to add responsive configurations to .
My goal is to use a border layout where the navigation can change between the west region and the north region depending on the size of the window, and the layout configuration can switch between vertical and horizontal so that when the area is in the west the buttons are grouped vertically and when the area is north , the buttons are grouped horizontally.
I know that by default the layout type cannot be changed at runtime, but I found this forum section where the user indicates that if you are using the layout type box
(parent vbox and hbox), you can update the config vertical
to change the grouping in lead time.
The violin I linked to above is my attempt at prototyping this concept.
The problem I am running into is that responseiveConfig cannot find setters for the specific properties I am trying to change, and this is not just for vertical configuration. Configurable elements, which I know have setters and I've seen work before, don't work in responsiveConfig either:
Ext.layout.container.Box definitely has a setPack method.
Am I configured incorrectly?
source to share
I posted a post in a thread on the sencha forums describing the technique I was trying to describe. The poster that answered the question answered my post with an updated fiddle showing the correct implementation.
I added a responsive block implementation as well as a scope switching to my script .
Sensitive sections are needed here:
plugins: 'responsive',
responsiveConfig:{
wide:{
layout:{
type: 'box',
vertical: true,
pack:'start'
},
region: 'west'
},
tall:{
layout:{
type: 'box',
vertical: false,
pack: 'center'
},
region: 'north'
}
I think the important part that you know here (and that disables me) is that you have to include type: 'box'
in the config layout
for the property responsiveConfig
, because responsiveConfig doesn't fire every single setter for layout ( type
, vertical
and pack
), it fires the generic method layout
setter . If you do not include configuration type
in the object that you set the layout configuration, it uses the default type , which is "auto".
This is why in the screenshot I have included in the original error messages in the javascript console where stated Ext.layout.container.Auto
and not Ext.layout.container.Box
. The error message was correct, Ext.layout.container.Auto has no method setPack
.
source to share
Changing layouts at runtime is not currently supported. There is a feature request for this: https://www.sencha.com/forum/showthread.php?294082
Workaround script: https://fiddle.sencha.com/#fiddle/dqj
source to share
The error is that the layout auto
has no setting for pack
. This indicates that the layout is indeed set at runtime, according to the value specified in the responsive layout configuration. Since there is no specific, only vertical
, and pack
, the config, the layout type is interpreted as auto
. Small changes to your fiddle defining the layout type as shown below:
responsiveConfig:{
wide:{
layout:{
type : 'vbox',
pack:'start'
},
bodyStyle:{'background-color': 'orange'}
},
tall:{
layout:{
type : 'hbox',
pack: 'center'
},
bodyStyle:{'background-color': 'purple'}
}
},
And your mistake is gone.
source to share