[FIXED-108] Carousel with Ext.form.FormPanel and Ext.form.Select on 2+ page behaviour

[Benjamin Ansbach]

Hi there,

I experience a bad behaviour with using a select box on the second page in a Carousel. It will always try to reswitch to "the first" / another page.

Short Example:

Ext.setup({
    onReady: function() {
        var panelFrm = new Ext.form.FormPanel({
            layout: 'card',
            html: '<h1>page 2</h1>',
            items: [{
                        xtype: 'select',
                        name : 'itm',
                        label: 'select itm',
                        options: [
                            {text: 'item 1',  value: '1'},
                            {text: 'item 2', value: '2'}
                        ]
                    }]
        });

        var carousel = new Ext.Carousel({
           defaults: { cls: 'card' },
           items: [{
              html: '<h1>page 1</h1>'
          }, panelFrm]
        });
        
        new Ext.Panel({
          fullscreen: true,
          layout: {
              type: 'vbox',
              align: 'stretch'
          },
          defaults: {
              flex: 1
          },
          items: [carousel]
        });
    }
});

[Benjamin Ansbach]

I'm testing on an iPad device if this helps

[xantus]

Thanks for the report

[TommyMaintz]

This issue will be fixed in the next release.

I would like to give you some quick suggestions.

In your fullscreen panel you seem to try and achieve the carousel to be full with and height of the panel. You can easily achieve this by using a layout: 'fit' instead of using a vbox and setting flex. In the next release Carousel will extend Panel meaning that you could even skip the whole wrapping panel and just make the carousel fullscreen: true.

Also you seem to be using html and items at the same time on your FormPanel. Although this does work, you have to manage the positioning of the html yourself. A better option would be to add an xtype: 'component' as a child of the FormPanel and use the html configuration option on that component. That way you can let the framework lay out the component with html and your form items.

I see you are using layout 'card' on your FormPanel. A CardLayout will make it so that only one item is visible at a time in the container. In your example you will probably want to use something like 'vbox' or even no layout at all.

Finally I think it would be useful to put the form items inside a FieldSet so that they get better styling.