/source/Plug-in/ext/colorpicker/test.html
HTML | 93 lines | 89 code | 4 blank | 0 comment | 0 complexity | 707764bae777069bc8047ddf743c2a52 MD5 | raw file
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2<html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 5 <title>ColorPickerField Test</title> 6 <link rel='stylesheet' type='text/css' href='../ext/resources/css/ext-all.css' /> 7 <link rel="stylesheet" type="text/css" href="colorpicker.css" /> 8 9 <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script> 10 <script type="text/javascript" src="../ext/ext-all-debug.js"></script> 11 12 <script type="text/javascript" src="../fieldpanel/fieldpanel.js"></script> 13 <script type="text/javascript" src="colorpicker.js"></script> 14 <script type="text/javascript" src="colorpickerfield.js"></script> 15 16 <script type="text/javascript"> 17 Ext.QuickTips.init(); 18 Ext.form.Field.prototype.msgTarget = 'side'; 19 20 Ext.onReady(function(){ 21 var valid=true; 22 var enable=true; 23 var win = new Ext.Window({ 24 renderTo: document.body, 25 title: "ColorPicker Test", 26 width: 600, 27 height: 400, 28 items: [{ 29 xtype: 'form', 30 border: false, 31 bodyStyle: 'background-color:#DFE8F6; padding-top:10px', 32 labelAlign: 'right', 33 labelWidth: 50, 34 items: [{ 35 xtype: 'textfield', 36 fieldLabel: 'Name', 37 name: 'name' 38 }, { 39 xtype: 'colorpickerfield', 40 fieldLabel: 'Color', 41 name: 'color', 42 value: '123456' 43 }] 44 }], 45 buttons:[{ 46 text:"Invalid", 47 handler:function(){ 48 var form=win.getComponent(0).getForm(); 49 var n=form.findField('name'); 50 var c=form.findField('color'); 51 if (valid) { 52 n.markInvalid(); 53 c.markInvalid(); 54 valid = false; 55 } else { 56 n.clearInvalid(); 57 c.clearInvalid(); 58 valid = true; 59 } 60 } 61 }, { 62 text:"Disable", 63 handler: function(){ 64 var form=win.getComponent(0).getForm(); 65 var n=form.findField('name'); 66 var c=form.findField('color'); 67 if (enable) { 68 n.disable(); 69 c.disable(); 70 enable = false; 71 } else { 72 n.enable(); 73 c.enable(); 74 enable = true; 75 } 76 } 77 }, { 78 text:"Values", 79 handler: function(){ 80 var form=win.getComponent(0).getForm(); 81 var n=form.findField('name'); 82 var c=form.findField('color'); 83 Ext.Msg.alert("Value", "Name: "+n.getValue()+"<br />Color: "+c.getValue()); 84 } 85 }] 86 }); 87 win.show(); 88 }); 89 </script> 90 </head> 91 <body> 92 </body> 93</html>