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