Alter layout using responsiveConfig within an ExtJS 6 app

0
votes

I'm using ExtJS 6 to render a responsive layout where two panels are aligned horizontally. What I want to achieve is the following:

  • if the window size is >= 1200px, both panels should be rendered using "hbox" layout, i.e. panel "A" should be rendered on the left hand side of panel "B". Each panel should have a width of approx. 50%
  • if the window size is < 1200px, both panels should be rendered using "vbox", i.e. panel "A" should be above panel "B". Each panel should have a width of 100%

This fiddle shows my current implementation. The problem here is that if the window size < 1200px, the width of each panel sticks to 50% but should be 100%.

Any help appreciated!

1
extjsresponsive-designextjs6

1 Answers

1
votes

You have forgotten to add the plugin to the child items like so:

items: [
    {
        title: 'A',
        width: '50%',
        html: '<p>lorem ipsum</p>',
        plugins: 'responsive',
        responsiveConfig: {
          ...

You have to add the plugin to each and every component that gets a responsiveConfig.