パレットで色を選択してOKボタンをクリックすると、もとの画面に反映します。
以下はサンプル画像です。
初期状態:
colorボタンをクリックしてカラーパレットウィンドウをポップアップ。
カラーボタンをクリックするとウィンドウ下部に選択した色のコードを表示します。
OKボタンクリックでもとの画面に選択した色を表示します。
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />
<script type="text/javascript" src="./jslib/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="./jslib/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="./jslib/ext-all.js"></script>
<script type="text/javascript" src="./sample.js"></script>
</head>
<body>
<div id="btn" style="margin: 10px"></div>
<div style="margin: 10px">selected color: <span id="selected">□</span></div>
</body>
</html>
javascript
Ext.onReady(function(){
var btn = new Ext.Button({
text: 'color',
renderTo: 'btn',
listeners: {
click: function(){
var win = new Ext.Window({
height: '180',
width: '160',
xtype: 'panel',
title: 'color select',
items: [{
xtype: 'colorpalette',
listeners: {
select: function(plt, color){
Ext.getCmp('sel-color').setValue(color);
}
}
}, {
xtype: 'form',
border: false,
bodyStyle: 'background-color: transparent; padding-left: 5px;',
labelWidth: 60,
items: [{
xtype: 'displayfield',
id: 'sel-color',
style: 'margin-top: 2px',
fieldLabel: 'selected'
}]
}],
buttons: [{
text: 'OK',
listeners: {
click: function(){
var clrtext = Ext.getCmp('sel-color').getValue();
var ele = Ext.get('selected');
if((clrtext == 'ffffff') || (clrtext == 'FFFFFF')){
ele.update('□');
ele.applyStyles('color: #000000');
}else{
ele.update('■');
ele.applyStyles('color: #'+ clrtext);
}
win.destroy();
}
}
}]
});
win.show();
}
}
});
});
ポイントはpanelのitemsにcolorpaletteを指定するところです。
この例ではさらにdisplayfieldに選択した色のコードを表示しています。
0 件のコメント:
コメントを投稿