ExtJS 滑块在视图中不可见

Posted 2023-02-26

【中文标题】ExtJS 滑块在视图中不可见

【英文标题】：ExtJS slider not visible on view

【发布时间】：2014-09-04 14:17:15

【问题描述】：

我有一个视图，其中包含一些控件。所有控件都是可见的，而滑块根本不可见。我看过示例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'
]
);

【问题讨论】：

让它正常工作。问题是我正在使用自定义主题。使用该主题是不可见的。使用默认主题，它工作正常。我应该早点检查的。

【参考方案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';

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

【讨论】：

您的 sencha 应用程序构建提示解决了我的问题！谢谢。