CODEWITHSUNDEEP
javascriptextjs
Jacobian
Jacobian

Reputation: 10812

Two bugs in scrollable accordion in ExtJS 6

I hit what seems to be two bugs. Here is a fiddle which demonstrates these bugs. First of all, if you click on the first panel or any other ones, you will see there appear some new panel with a missing title:

enter image description here

And the second bug, is that it is impossible to see the contents of the panel (one textfield, which I put to every panel). The code is as simple as:

    Ext.create("Ext.window.Window", {
        width: 300,
        height: 400,
        layout: "fit",
        items:[{
            xtype: "panel",
            layout: {
                type: "accordion"
            },
            scrollable: true,
            listeners: {
                beforerender: function () {
                    var i;
                    for (i = 0; i < 30; i += 1) {
                        this.add({
                            title: i,
                            items:[{
                                xtype: "textfield",
                                value: i
                            }]
                        });
                    }
                }
            }
        }]
    }).show();

So, the question is how to fix it all?

Upvotes: 0

Views: 222

Answers (1)

chrisuae
chrisuae

Reputation: 1112

The outer window should not have a fit layout as this will interfere with the way the accordion layout works as it uses more or less vertical space depending on the user's actions. Also, the accordion should not have scrollable set to true as it is the parent window that should scroll.

The title you are using for the items in the accordion are seen as integer values in JS and so the 0 is not being interpreted as you would like when used in a title (which expects a string). Explicitly converting i to a string will ensure the 0 shows correctly.

In summary, the following changes will enable your code to work better:

  1. On the outer window: remove the layout:fit and add scrollable:true.
  2. On the accordion: remove the scrollable:true.
  3. On the items in the accordion: ensure the title is consistently converted to a string.

See updated fiddle here.

Ext.create("Ext.window.Window", {
    width: 300,
    height: 400,
    scrollable: true,
    items: [{
        xtype: "panel",
        layout: {
        type: "accordion"
        },

        listeners: {
        beforerender: function () {
            var i;
            for (i = 0; i < 30; i += 1) {
            this.add({
                title: 'box ' + i,
                items: [{
                xtype: "textfield",
                value: i
                }]
            });
            }
        }
        }
    }]
    }).show();

Upvotes: 2

Related Questions