Upgrade to ExtJS 3.0.0 - Released 07/06/2009

[extjs.git] / examples / multiselect / multiselect-demo.js

diff --git a/examples/multiselect/multiselect-demo.js b/examples/multiselect/multiselect-demo.js
index e41f746..56be16e 100644 (file)
--- a/examples/multiselect/multiselect-demo.js
+++ b/examples/multiselect/multiselect-demo.js
@@ -1,75 +1,85 @@
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */

 Ext.onReady(function(){\r
 \r
     Ext.QuickTips.init();\r
     Ext.form.Field.prototype.msgTarget = 'side';\r
 Ext.onReady(function(){\r
 \r
     Ext.QuickTips.init();\r
     Ext.form.Field.prototype.msgTarget = 'side';\r

-    \r
+\r

     /*\r
     /*\r

-     * Ext.ux.Multiselect Example Code\r
+     * Ext.ux.form.MultiSelect Example Code\r

      */\r
     var msForm = new Ext.form.FormPanel({\r
         title: 'MultiSelect Test',\r
      */\r
     var msForm = new Ext.form.FormPanel({\r
         title: 'MultiSelect Test',\r

-        width:700,\r
+        width: 700,\r

         bodyStyle: 'padding:10px;',\r
         renderTo: 'multiselect',\r
         items:[{\r
         bodyStyle: 'padding:10px;',\r
         renderTo: 'multiselect',\r
         items:[{\r

-            xtype:"multiselect",\r
-            fieldLabel:"Multiselect<br />(Required)",\r
-            name:"multiselect",\r
-            dataFields:["code", "desc"], \r
-            valueField:"code",\r
-            displayField:"desc",\r
-            width:250,\r
-            height:200,\r
+            xtype: 'multiselect',\r
+            fieldLabel: 'Multiselect<br />(Required)',\r
+            name: 'multiselect',\r
+            width: 250,\r
+            height: 200,\r

             allowBlank:false,\r
             allowBlank:false,\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
+            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
             tbar:[{\r

-                text:"clear",\r
-                handler:function(){\r
-                       msForm.getForm().findField("multiselect").reset();\r
+                text: 'clear',\r
+                handler: function(){\r
+                       msForm.getForm().findField('multiselect').reset();\r

                    }\r
                    }\r

-            }]\r
+            }],\r
+            ddReorder: true\r

         }],\r
         tbar:[{\r
             text: 'Options',\r
             menu: [{\r
         }],\r
         tbar:[{\r
             text: 'Options',\r
             menu: [{\r

-                   text:"Set Value (2,3)",\r
+                   text: 'Set Value (2,3)',\r

                    handler: function(){\r
                    handler: function(){\r

-                       msForm.getForm().findField("multiselect").setValue("2,3");\r
+                       msForm.getForm().findField('multiselect').setValue('2,3');\r

                    }\r
                },{\r
                    }\r
                },{\r

-                   text:"Toggle Enabled",\r
+                   text: 'Toggle Enabled',\r

                    handler: function(){\r
                    handler: function(){\r

-                       var m=msForm.getForm().findField("multiselect");\r
-                       if (!m.disabled)m.disable();\r
-                       else m.enable();\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
             }]\r
         }],\r

-        \r
+\r

         buttons: [{\r
             text: 'Save',\r
             handler: function(){\r
                 if(msForm.getForm().isValid()){\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
+                       Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+\r

                            msForm.getForm().getValues(true));\r
                 }\r
             }\r
         }]\r
     });\r
                            msForm.getForm().getValues(true));\r
                 }\r
             }\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
     /*\r

-     * Ext.ux.ItemSelector Example Code\r
+     * Ext.ux.form.ItemSelector Example Code\r

      */\r
     var isForm = new Ext.form.FormPanel({\r
         title: 'ItemSelector Test',\r
      */\r
     var isForm = new Ext.form.FormPanel({\r
         title: 'ItemSelector Test',\r


@@ -77,39 +87,38 @@ Ext.onReady(function(){
         bodyStyle: 'padding:10px;',\r
         renderTo: 'itemselector',\r
         items:[{\r
         bodyStyle: 'padding:10px;',\r
         renderTo: 'itemselector',\r
         items:[{\r

-            xtype:"itemselector",\r
-            name:"itemselector",\r
-            fieldLabel:"ItemSelector",\r
-            dataFields:["code", "desc"],\r
-            toData:[["10", "Ten"]],\r
-            msWidth:250,\r
-            msHeight:200,\r
-            valueField:"code",\r
-            displayField:"desc",\r
-            imagePath:"images/",\r
-            toLegend:"Selected",\r
-            fromLegend:"Available",\r
-            fromData:[[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
-            toTBar:[{\r
-                text:"Clear",\r
-                handler:function(){\r
-                    var i=isForm.getForm().findField("itemselector");\r
-                    i.reset.call(i);\r
-                }\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
         }],\r

-        \r
+\r

         buttons: [{\r
             text: 'Save',\r
             handler: function(){\r
                 if(isForm.getForm().isValid()){\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
+                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+\r

                         isForm.getForm().getValues(true));\r
                 }\r
             }\r
         }]\r
     });\r
                         isForm.getForm().getValues(true));\r
                 }\r
             }\r
         }]\r
     });\r

-    \r
-});
\ No newline at end of file
+\r
+});\r