--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.onReady(function(){\r
+\r
+ Ext.QuickTips.init();\r
+ Ext.form.Field.prototype.msgTarget = 'side';\r
+\r
+ /*\r
+ * Ext.ux.form.MultiSelect Example Code\r
+ */\r
+ var msForm = new Ext.form.FormPanel({\r
+ title: 'MultiSelect Test',\r
+ width: 700,\r
+ bodyStyle: 'padding:10px;',\r
+ renderTo: 'multiselect',\r
+ items:[{\r
+ xtype: 'multiselect',\r
+ fieldLabel: 'Multiselect<br />(Required)',\r
+ name: 'multiselect',\r
+ width: 250,\r
+ height: 200,\r
+ allowBlank:false,\r
+ store: [[123,'One Hundred Twenty Three'],\r
+ ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],\r
+ ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],\r
+ tbar:[{\r
+ text: 'clear',\r
+ handler: function(){\r
+ msForm.getForm().findField('multiselect').reset();\r
+ }\r
+ }],\r
+ ddReorder: true\r
+ }],\r
+ tbar:[{\r
+ text: 'Options',\r
+ menu: [{\r
+ text: 'Set Value (2,3)',\r
+ handler: function(){\r
+ msForm.getForm().findField('multiselect').setValue('2,3');\r
+ }\r
+ },{\r
+ text: 'Toggle Enabled',\r
+ handler: function(){\r
+ var m = msForm.getForm().findField('multiselect');\r
+ if (!m.disabled) {\r
+ m.disable();\r
+ } else {\r
+ m.enable();\r
+ }\r
+ }\r
+ }]\r
+ }],\r
+\r
+ buttons: [{\r
+ text: 'Save',\r
+ handler: function(){\r
+ if(msForm.getForm().isValid()){\r
+ Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+\r
+ msForm.getForm().getValues(true));\r
+ }\r
+ }\r
+ }]\r
+ });\r
+\r
+\r
+ var ds = new Ext.data.ArrayStore({\r
+ data: [[123,'One Hundred Twenty Three'],\r
+ ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],\r
+ ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],\r
+ fields: ['value','text'],\r
+ sortInfo: {\r
+ field: 'value',\r
+ direction: 'ASC'\r
+ }\r
+ });\r
+\r
+ /*\r
+ * Ext.ux.form.ItemSelector Example Code\r
+ */\r
+ var isForm = new Ext.form.FormPanel({\r
+ title: 'ItemSelector Test',\r
+ width:700,\r
+ bodyStyle: 'padding:10px;',\r
+ renderTo: 'itemselector',\r
+ items:[{\r
+ xtype: 'itemselector',\r
+ name: 'itemselector',\r
+ fieldLabel: 'ItemSelector',\r
+ imagePath: '../ux/images/',\r
+ multiselects: [{\r
+ width: 250,\r
+ height: 200,\r
+ store: ds,\r
+ displayField: 'text',\r
+ valueField: 'value'\r
+ },{\r
+ width: 250,\r
+ height: 200,\r
+ store: [['10','Ten']],\r
+ tbar:[{\r
+ text: 'clear',\r
+ handler:function(){\r
+ isForm.getForm().findField('itemselector').reset();\r
+ }\r
+ }]\r
+ }]\r
+ }],\r
+\r
+ buttons: [{\r
+ text: 'Save',\r
+ handler: function(){\r
+ if(isForm.getForm().isValid()){\r
+ Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+\r
+ isForm.getForm().getValues(true));\r
+ }\r
+ }\r
+ }]\r
+ });\r
+\r
+});\r
+</pre> \r
+</body>\r
+</html>
\ No newline at end of file