Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / examples / multiselect / multiselect-demo.js
index e41f746..0560bdc 100644 (file)
-/*\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.onReady(function(){\r
-\r
-    Ext.QuickTips.init();\r
-    Ext.form.Field.prototype.msgTarget = 'side';\r
-    \r
-    /*\r
-     * Ext.ux.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
-            dataFields:["code", "desc"], \r
-            valueField:"code",\r
-            displayField:"desc",\r
-            width:250,\r
-            height:200,\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
-            tbar:[{\r
-                text:"clear",\r
-                handler:function(){\r
-                       msForm.getForm().findField("multiselect").reset();\r
-                   }\r
-            }]\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)m.disable();\r
-                       else m.enable();\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
-    /*\r
-     * Ext.ux.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
-            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
-            }]\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
-});
\ No newline at end of file
+/*!
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+Ext.onReady(function(){
+
+    Ext.QuickTips.init();
+    Ext.form.Field.prototype.msgTarget = 'side';
+
+    /*
+     * Ext.ux.form.MultiSelect Example Code
+     */
+    var msForm = new Ext.form.FormPanel({
+        title: 'MultiSelect Test',
+        width: 700,
+        bodyStyle: 'padding:10px;',
+        renderTo: 'multiselect',
+        items:[{
+            xtype: 'multiselect',
+            fieldLabel: 'Multiselect<br />(Required)',
+            name: 'multiselect',
+            width: 250,
+            height: 200,
+            allowBlank:false,
+            store: [[123,'One Hundred Twenty Three'],
+                    ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
+                    ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
+            tbar:[{
+                text: 'clear',
+                handler: function(){
+                       msForm.getForm().findField('multiselect').reset();
+                   }
+            }],
+            ddReorder: true
+        }],
+        tbar:[{
+            text: 'Options',
+            menu: [{
+                   text: 'Set Value (2,3)',
+                   handler: function(){
+                       msForm.getForm().findField('multiselect').setValue('2,3');
+                   }
+               },{
+                   text: 'Toggle Enabled',
+                   handler: function(){
+                       var m = msForm.getForm().findField('multiselect');
+                       if (!m.disabled) {
+                           m.disable();
+                       } else {
+                           m.enable();
+                       }
+                   }
+            }]
+        }],
+
+        buttons: [{
+            text: 'Save',
+            handler: function(){
+                if(msForm.getForm().isValid()){
+                       Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
+                           msForm.getForm().getValues(true));
+                }
+            }
+        }]
+    });
+
+
+    var ds = new Ext.data.ArrayStore({
+        data: [[123,'One Hundred Twenty Three'],
+            ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
+            ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
+        fields: ['value','text'],
+        sortInfo: {
+            field: 'value',
+            direction: 'ASC'
+        }
+    });
+
+    /*
+     * Ext.ux.form.ItemSelector Example Code
+     */
+    var isForm = new Ext.form.FormPanel({
+        title: 'ItemSelector Test',
+        width:700,
+        bodyStyle: 'padding:10px;',
+        renderTo: 'itemselector',
+        items:[{
+            xtype: 'itemselector',
+            name: 'itemselector',
+            fieldLabel: 'ItemSelector',
+               imagePath: '../ux/images/',
+            multiselects: [{
+                width: 250,
+                height: 200,
+                store: ds,
+                displayField: 'text',
+                valueField: 'value'
+            },{
+                width: 250,
+                height: 200,
+                store: [['10','Ten']],
+                tbar:[{
+                    text: 'clear',
+                    handler:function(){
+                           isForm.getForm().findField('itemselector').reset();
+                       }
+                }]
+            }]
+        }],
+
+        buttons: [{
+            text: 'Save',
+            handler: function(){
+                if(isForm.getForm().isValid()){
+                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
+                        isForm.getForm().getValues(true));
+                }
+            }
+        }]
+    });
+
+});