Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / multiselect-demo.html
diff --git a/docs/source/multiselect-demo.html b/docs/source/multiselect-demo.html
new file mode 100644 (file)
index 0000000..d602d9e
--- /dev/null
@@ -0,0 +1,128 @@
+<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