Question

我有一个视图，其中包含很少的控件。所有控件都可见，而滑块根本看不到。我见过示例here，但它不起作用。有人能指出我错过的任何配置吗？

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'
}]
});

Answer 1

由于这个问题也发生在我身上，我会添加一些细节。

在带滑块的全新ExtJS 4应用程序中，滑块不显示（不可见）。它只会在构建应用程序（sencha app build）后出现。它与CSS有关。

构建应用程序后，bootstrap.css会更改CSS的来源，之后会正确呈现滑块。

在第一次构建之前（bootstrap.css）： @import 'ext/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css';

第一次构建（bootstrap.css）后： @import 'build/production/Slider/resources/Slider-all.css';

解决方案是构建应用程序。

ExtJS滑块在视图中不可见

1 个答案: