examples/multiselect/multiselect-demo.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 Ext.onReady(function(){\r
  10 \r
  11     Ext.QuickTips.init();\r
  12     Ext.form.Field.prototype.msgTarget = 'side';\r
  13     \r
  14     /*\r
  15      * Ext.ux.Multiselect Example Code\r
  16      */\r
  17     var msForm = new Ext.form.FormPanel({\r
  18         title: 'MultiSelect Test',\r
  19         width:700,\r
  20         bodyStyle: 'padding:10px;',\r
  21         renderTo: 'multiselect',\r
  22         items:[{\r
  23             xtype:"multiselect",\r
  24             fieldLabel:"Multiselect<br />(Required)",\r
  25             name:"multiselect",\r
  26             dataFields:["code", "desc"], \r
  27             valueField:"code",\r
  28             displayField:"desc",\r
  29             width:250,\r
  30             height:200,\r
  31             allowBlank:false,\r
  32             data:[[123,"One Hundred Twenty Three"],\r
  33                 ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],\r
  34                 ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],\r
  35             tbar:[{\r
  36                 text:"clear",\r
  37                 handler:function(){\r
  38                         msForm.getForm().findField("multiselect").reset();\r
  39                     }\r
  40             }]\r
  41         }],\r
  42         tbar:[{\r
  43             text: 'Options',\r
  44             menu: [{\r
  45                     text:"Set Value (2,3)",\r
  46                     handler: function(){\r
  47                         msForm.getForm().findField("multiselect").setValue("2,3");\r
  48                     }\r
  49                 },{\r
  50                     text:"Toggle Enabled",\r
  51                     handler: function(){\r
  52                         var m=msForm.getForm().findField("multiselect");\r
  53                         if (!m.disabled)m.disable();\r
  54                         else m.enable();\r
  55                     }\r
  56             }]\r
  57         }],\r
  58         \r
  59         buttons: [{\r
  60             text: 'Save',\r
  61             handler: function(){\r
  62                 if(msForm.getForm().isValid()){\r
  63                         Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ \r
  64                             msForm.getForm().getValues(true));\r
  65                 }\r
  66             }\r
  67         }]\r
  68     });\r
  69     \r
  70     \r
  71     /*\r
  72      * Ext.ux.ItemSelector Example Code\r
  73      */\r
  74     var isForm = new Ext.form.FormPanel({\r
  75         title: 'ItemSelector Test',\r
  76         width:700,\r
  77         bodyStyle: 'padding:10px;',\r
  78         renderTo: 'itemselector',\r
  79         items:[{\r
  80             xtype:"itemselector",\r
  81             name:"itemselector",\r
  82             fieldLabel:"ItemSelector",\r
  83             dataFields:["code", "desc"],\r
  84             toData:[["10", "Ten"]],\r
  85             msWidth:250,\r
  86             msHeight:200,\r
  87             valueField:"code",\r
  88             displayField:"desc",\r
  89             imagePath:"images/",\r
  90             toLegend:"Selected",\r
  91             fromLegend:"Available",\r
  92             fromData:[[123,"One Hundred Twenty Three"],\r
  93                 ["1", "One"], ["2", "Two"], ["3", "Three"], ["4", "Four"], ["5", "Five"],\r
  94                 ["6", "Six"], ["7", "Seven"], ["8", "Eight"], ["9", "Nine"]],\r
  95             toTBar:[{\r
  96                 text:"Clear",\r
  97                 handler:function(){\r
  98                     var i=isForm.getForm().findField("itemselector");\r
  99                     i.reset.call(i);\r
 100                 }\r
 101             }]\r
 102         }],\r
 103         \r
 104         buttons: [{\r
 105             text: 'Save',\r
 106             handler: function(){\r
 107                 if(isForm.getForm().isValid()){\r
 108                     Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ \r
 109                         isForm.getForm().getValues(true));\r
 110                 }\r
 111             }\r
 112         }]\r
 113     });\r
 114     \r
 115 });