examples/multiselect/multiselect-demo.js

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