2

Web サーバーの有無にかかわらず、ExtJs でスラ​​イダーを実行しました。

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 に答える