ExtJS slider not visible on view

Question

I have a view on which I am including few controls. All the controls are visible whereas the slider is not visible at all. I have seen the example here but its not working. Can someone point out any config that I am missing?

Ext.define('KPS.view.LaunchPageMain', {
    extend: 'Ext.window.Window',
    requires: ['Ext.slider.Single'],
    alias: 'widget.launchpagemain',
    layout: 'fit',
    maximized: true,
    height: 500,
    width: 500,
    title: 'KPS',
    modal: true, 
    draggable: false,
    tools: [{
        xtype: 'sliderfield',//slider is also not working.
        width: 200,
        value: 3,
        increment: 1,
        minValue: 1,
        maxValue: 5
    }, {
        xtype: 'button',
        itemId: 'btnUserType',
        text: 'User Roles',
        menu: {
            xtype: 'menu',
            showSeparator: false,
            items: [{
                xtype: 'checkboxgroup',
                columns: 1,
                itemId: 'selectionUserTypes',
                vertical: true,
                items: [{
                    boxLabel: 'User',
                    name: 'userSelection',
                    inputValue: 'U'
                }, {
                    boxLabel: 'Admin',
                    name: 'userSelection',
                    inputValue: 'A'
                }, {
                    boxLabel: 'Super Admin',
                    name: 'userSelection',
                    inputValue: 'S'
                }]
            }]
        }
    }, {
        xtype: 'button',
        itemId: 'btnLogout',
        text: 'Logout'
    }],
    items: [{
    xtype: 'contentView'
}]
});

Leave it folks it is working. The problem is I am using custom theme. With that theme it is not visible. With the default themes it is just working fine. I should have checked that earlier. — user1640256

jgrocha jgrocha · Accepted Answer · 2015-05-03T00:19:08

Since this problem also happened with me, I'll add some details.

In a brand new ExtJS 4 app with a slider, the slider does not show (it is not visible). It will only appear after building the application (sencha app build). It is related to the CSS.

After building of the application, bootstrap.css changes the source of the CSS, and afterwards, the slider is rendered correctely.

Before the first build (bootstrap.css): @import 'ext/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css';

After the first build (bootstrap.css): @import 'build/production/Slider/resources/Slider-all.css';

The solution is to build the application.

ExtJS slider not visible on view

1 Answers