X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..05ce1c11e98b33f14ddee184493bd5a60dc947e2:/examples/multiselect/multiselect-demo.js

diff --git a/examples/multiselect/multiselect-demo.js b/examples/multiselect/multiselect-demo.js
index e41f746a..01b000db 100644
--- a/examples/multiselect/multiselect-demo.js
+++ b/examples/multiselect/multiselect-demo.js
@@ -1,75 +1,85 @@
-/*
- * Ext JS Library 2.2.1
- * Copyright(c) 2006-2009, Ext JS, LLC.
- * licensing@extjs.com
- * 
- * http://extjs.com/license
- */
-
+/*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
 Ext.onReady(function(){
 
     Ext.QuickTips.init();
     Ext.form.Field.prototype.msgTarget = 'side';
-    
+
     /*
-     * Ext.ux.Multiselect Example Code
+     * Ext.ux.form.MultiSelect Example Code
      */
     var msForm = new Ext.form.FormPanel({
         title: 'MultiSelect Test',
-        width:700,
+        width: 700,
         bodyStyle: 'padding:10px;',
         renderTo: 'multiselect',
         items:[{
-            xtype:"multiselect",
-            fieldLabel:"Multiselect<br />(Required)",
-            name:"multiselect",
-            dataFields:["code", "desc"], 
-            valueField:"code",
-            displayField:"desc",
-            width:250,
-            height:200,
+            xtype: 'multiselect',
+            fieldLabel: 'Multiselect<br />(Required)',
+            name: 'multiselect',
+            width: 250,
+            height: 200,
             allowBlank:false,
-            data:[[123,"One Hundred Twenty Three"],
-                ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
-                ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
+            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();
+                text: 'clear',
+                handler: function(){
+	                msForm.getForm().findField('multiselect').reset();
 	            }
-            }]
+            }],
+            ddReorder: true
         }],
         tbar:[{
             text: 'Options',
             menu: [{
-	            text:"Set Value (2,3)",
+	            text: 'Set Value (2,3)',
 	            handler: function(){
-	                msForm.getForm().findField("multiselect").setValue("2,3");
+	                msForm.getForm().findField('multiselect').setValue('2,3');
 	            }
 	        },{
-	            text:"Toggle Enabled",
+	            text: 'Toggle Enabled',
 	            handler: function(){
-	                var m=msForm.getForm().findField("multiselect");
-	                if (!m.disabled)m.disable();
-	                else m.enable();
+	                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 />'+ 
+	                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.ItemSelector Example Code
+     * Ext.ux.form.ItemSelector Example Code
      */
     var isForm = new Ext.form.FormPanel({
         title: 'ItemSelector Test',
@@ -77,39 +87,38 @@ Ext.onReady(function(){
         bodyStyle: 'padding:10px;',
         renderTo: 'itemselector',
         items:[{
-            xtype:"itemselector",
-            name:"itemselector",
-            fieldLabel:"ItemSelector",
-            dataFields:["code", "desc"],
-            toData:[["10", "Ten"]],
-            msWidth:250,
-            msHeight:200,
-            valueField:"code",
-            displayField:"desc",
-            imagePath:"images/",
-            toLegend:"Selected",
-            fromLegend:"Available",
-            fromData:[[123,"One Hundred Twenty Three"],
-                ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],
-                ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],
-            toTBar:[{
-                text:"Clear",
-                handler:function(){
-                    var i=isForm.getForm().findField("itemselector");
-                    i.reset.call(i);
-                }
+            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 />'+ 
+                    Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                         isForm.getForm().getValues(true));
                 }
             }
         }]
     });
-    
-});
\ No newline at end of file
+
+});