/source/Plug-in/ext/colorpicker/test.html

http://prosporous.googlecode.com/ · 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. 

  2. <html>

    3. 

  3. 	<head>

    4. 

  4. 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    5. 

  5. 		<title>ColorPickerField Test</title>

    6. 

  6. 		<link rel='stylesheet' type='text/css' href='../ext/resources/css/ext-all.css' />

    7. 

  7. 		<link rel="stylesheet" type="text/css" href="colorpicker.css" />

    8. 

  8. 

    9. 

  9. 		<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>

    10. 

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

    11. 

  11. 

    12. 

  12. 		<script type="text/javascript" src="../fieldpanel/fieldpanel.js"></script>

    13. 

  13. 		<script type="text/javascript" src="colorpicker.js"></script>

    14. 

  14. 		<script type="text/javascript" src="colorpickerfield.js"></script>

    15. 

  15. 				

    16. 

  16. 		<script type="text/javascript">

    17. 

  17. 			Ext.QuickTips.init();

    18. 

  18. 			Ext.form.Field.prototype.msgTarget = 'side';

    19. 

  19. 			

    20. 

  20. 			Ext.onReady(function(){

    21. 

  21. 				var valid=true;

    22. 

  22. 				var enable=true;

    23. 

  23. 				var win = new Ext.Window({

    24. 

  24. 					renderTo: document.body,

    25. 

  25. 					title: "ColorPicker Test",

    26. 

  26. 					width: 600,

    27. 

  27. 					height: 400,

    28. 

  28. 					items: [{

    29. 

  29. 						xtype: 'form',

    30. 

  30. 						border: false,

    31. 

  31. 						bodyStyle: 'background-color:#DFE8F6; padding-top:10px',

    32. 

  32. 						labelAlign: 'right',

    33. 

  33. 						labelWidth: 50,

    34. 

  34. 						items: [{

    35. 

  35. 							xtype: 'textfield',

    36. 

  36. 							fieldLabel: 'Name',

    37. 

  37. 							name: 'name'

    38. 

  38. 						}, {

    39. 

  39. 							xtype: 'colorpickerfield',

    40. 

  40. 							fieldLabel: 'Color',

    41. 

  41. 							name: 'color',

    42. 

  42. 							value: '123456'

    43. 

  43. 						}]

    44. 

  44. 					}],

    45. 

  45. 					buttons:[{

    46. 

  46. 						text:"Invalid",

    47. 

  47. 						handler:function(){

    48. 

  48. 							var form=win.getComponent(0).getForm();

    49. 

  49. 							var n=form.findField('name');

    50. 

  50. 							var c=form.findField('color');

    51. 

  51. 							if (valid) {

    52. 

  52. 								n.markInvalid();

    53. 

  53. 								c.markInvalid();

    54. 

  54. 								valid = false;

    55. 

  55. 							} else {

    56. 

  56. 								n.clearInvalid();

    57. 

  57. 								c.clearInvalid();

    58. 

  58. 								valid = true;

    59. 

  59. 							}

    60. 

  60. 						}

    61. 

  61. 					}, {

    62. 

  62. 						text:"Disable",

    63. 

  63. 						handler: function(){

    64. 

  64. 							var form=win.getComponent(0).getForm();

    65. 

  65. 							var n=form.findField('name');

    66. 

  66. 							var c=form.findField('color');

    67. 

  67. 							if (enable) {

    68. 

  68. 								n.disable();

    69. 

  69. 								c.disable();

    70. 

  70. 								enable = false;

    71. 

  71. 							} else {

    72. 

  72. 								n.enable();

    73. 

  73. 								c.enable();

    74. 

  74. 								enable = true;

    75. 

  75. 							}

    76. 

  76. 						}

    77. 

  77. 					}, {

    78. 

  78. 						text:"Values",

    79. 

  79. 						handler: function(){

    80. 

  80. 							var form=win.getComponent(0).getForm();

    81. 

  81. 							var n=form.findField('name');

    82. 

  82. 							var c=form.findField('color');

    83. 

  83. 							Ext.Msg.alert("Value", "Name: "+n.getValue()+"<br />Color: "+c.getValue());

    84. 

  84. 						}

    85. 

  85. 					}]

    86. 

  86. 				});

    87. 

  87. 				win.show();

    88. 

  88. 			});

    89. 

  89. 		</script>

    90. 

  90. 	</head>

    91. 

  91. 	<body>

    92. 

  92. 	</body>

    93. 

  93. </html>
    94.