2

我已经在 ExtJs 中使用和不使用 Web 服务器执行了滑块。

不使用 Web 服务器（直接打开 index.html 文件）

在此处输入图像描述

使用 Web 服务器（Apache、XAMPP）

在此处输入图像描述

当我使用 Web 服务器运行应用程序时，我观察到了意外的输出。

  • 滑块边缘看起来不太好。
  • 工具提示文本不完全可见。

我的 index.html 文件代码如下。

<!DOCTYPE HTML>
<html>
    <head>
        <title> Slider Tooltip </title>
        <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all-debug.css" />

        <script type="text/javascript" src="../extjs/ext-all.js"></script>

        <script type="text/javascript" src="app.js"></script>
    </head>
    <body style="padding: 30px">

    </body>
</html>

这是我的app.js代码：

Ext.require('Ext.slider.*');

Ext.onReady(function() {
    Ext.create('Ext.slider.Single', {
        renderTo: Ext.getBody(),
        width: 214,
        height: 50,
        minValue: 0,
        hideLabel: true,
        useTips: false,
        maxValue: 100
    });

    Ext.create('Ext.slider.Single', {
        renderTo: Ext.getBody(),
        hideLabel: true,
        width: 214,
        height: 50,
        minValue: 0,
        maxValue: 100
    });

    Ext.create('Ext.slider.Single', {
        renderTo: Ext.getBody(),
        hideLabel: true,
        width: 214,
        increment: 10,
        height:60,
        minValue: 0,
        maxValue: 100,
        tipText: function(thumb){
            return Ext.String.format('<b>{0}% complete</b>', thumb.value);
        }
    });
});
4

1 回答 1

0

尝试添加这个 css

.x-tip {
    width: auto !important;
}
.x-tip-body {
    width: auto !important;
}
.x-tip-body span {
    width: auto !important;
}
于 2014-06-25T11:34:29.720 回答