Why does the ExtJS style not match the official web demo?

Question

This is the official demo

This is my demo

The splitter element style is different, I don't know why this happened.

And my code is here, and I put my demo to https://fiddle.sencha.com/#view/editor&fiddle/3jb8

Thanks.

Answer 1

Thanks for all the code!

Indeed, this is a nice question: initially I thought the problem was that you were playing with different version of the framework (Kitchen Sink from the screenshot is version 7.0.0 meanwhile you are using ExtJs 7.5.1 in the Fiddle).

But using the same framework version didn't solve the problem of the truncated splitters'size.

A workaround tested in your fiddle could be to set manually the height (for the horizontal splitters) and the width (for the vertical ones) while rendering the container panel like this:

    listeners: {
        afterrender: function(panel){
            Ext.ComponentQuery.query(panel.xtype + " splitter").forEach(splitter => {
                splitter.vertical ? splitter.setWidth(15) : splitter.setHeight(15);
            });
        }
    }

Answer 2

Its just the splitter. Try this and find out your personal value instead of 30.

        defaults: {
            collapsible: true,
            split: {width: 30, height: 30},
            bodyPadding: 10
        },