Extjs 6 responsiveConfig cannot find setters for layout config items

Question

I've got a fiddle of a base layout I'm trying to add responsive configurations to.

My goal is to use a border layout where the navigation can change between the western region and the northern region depending on the window size and the layout config can switch between vertical and horizontal so that when the region is west the buttons are grouped vertically and when the region 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 thread where a user points out that if you use the box layout type (the parent of vbox and hbox) you can update the vertical config to change the grouping at runtime.

The fiddle I linked above is my attempt at prototyping that concept out.

The problem I'm running into is that the responsiveConfig cannot find the setters for the particular properties that I'm trying to change, and it's not just for the vertical config. Config items that I know have setters and I have seen work before in the responsiveConfig are not working as well:

Ext.layout.container.Box definitely has a setPack method.

Am I mis-configured somehow?

score 4 · Accepted Answer · answered Jul 23 '15 at 00:10

I posted to the thread in sencha's forums where the technique I was trying was described. The poster who answered the question originally answered my post with an updated fiddle showing the correct implementation.

I've added the responsive box implementation as well as the region switching into my fiddle.

Here's the responsive sections needed:

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 to know here (and what was tripping me up) is that you have to include the type: 'box' in the layout config for the responsiveConfig property because responsiveConfig is not firing each individual setter for the layout (type, vertical, and pack), it's firing the overall layout setter method. If you don't include the type config in the object you give the layout config, it uses the default type which is 'auto'.

This is why in the screenshot I included in the original post the error messages in the javascript console where referring to Ext.layout.container.Auto and not Ext.layout.container.Box. The error message was right, Ext.layout.container.Auto doesn't have a setPack method.

No problem. That was such a pain in the ass to weed out and grok that it would be a crime to not explain it as best I could! — Chris Schmitz, Jul 23 '15 at 11:31
Can you unaccept the other answer and accept your own? The proper solution must me highlighted :) — Elias Medeiros, Jul 23 '15 at 16:26
I can but I have to wait two days since I submitted the answer — Chris Schmitz, Jul 23 '15 at 16:41

score 1 · Answer 2 · answered Jul 22 '15 at 19:41

1

Changing layouts at runtime is not currently supported. There is a feature request for it here: https://www.sencha.com/forum/showthread.php?294082

Fiddle with a workaround: https://fiddle.sencha.com/#fiddle/dqj

answered Jul 22 '15 at 19:41

Tarabass

3,132
2
17
35

Cool, thanks for the head's up re: the feature request and the workaround fiddle. It's not going to work in my case because a number of the nav buttons are going to be non-tab items and the look has to be consistent so a tabpanel isn't an option :/ – Chris Schmitz Jul 22 '15 at 20:46

score 0 · Answer 3 · answered Jul 22 '15 at 19:30

The error is complaining about auto layout having no setter for pack. This tells me the layout is indeed being set during runtime, according to the value specified in the responsive layout config. Since there is none defined, just the vertical and pack, config, the layout type is interpreted as auto. Small changes in your fiddle, defining the layout type as below:

responsiveConfig:{
    wide:{
        layout:{
            type : 'vbox',
            pack:'start'
        },
        bodyStyle:{'background-color': 'orange'}
    },
    tall:{
        layout:{
            type : 'hbox',
            pack: 'center'
        },
        bodyStyle:{'background-color': 'purple'}
    }
},

And your error was gone.

It does suppress the error, but it doesn't achieve the functionality; the buttons do no switch their grouping type. The [sencha documentation on Ext.Panel](http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.panel.Panel-method-setLayout) points out that the layout type cannot be changed at runtime. That's why I was attempting this approach with changing the vertical property since it can be set at runtime. — Chris Schmitz, Jul 22 '15 at 19:40

Extjs 6 responsiveConfig cannot find setters for layout config items

3 Answers3