docs/source/multiselect-demo.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">Ext.onReady(function(){\r
   9 \r
  10     Ext.QuickTips.init();\r
  11     Ext.form.Field.prototype.msgTarget = 'side';\r
  12 \r
  13     /*\r
  14      * Ext.ux.form.MultiSelect Example Code\r
  15      */\r
  16     var msForm = new Ext.form.FormPanel({\r
  17         title: 'MultiSelect Test',\r
  18         width: 700,\r
  19         bodyStyle: 'padding:10px;',\r
  20         renderTo: 'multiselect',\r
  21         items:[{\r
  22             xtype: 'multiselect',\r
  23             fieldLabel: 'Multiselect<br />(Required)',\r
  24             name: 'multiselect',\r
  25             width: 250,\r
  26             height: 200,\r
  27             allowBlank:false,\r
  28             store: [[123,'One Hundred Twenty Three'],\r
  29                     ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],\r
  30                     ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],\r
  31             tbar:[{\r
  32                 text: 'clear',\r
  33                 handler: function(){\r
  34                         msForm.getForm().findField('multiselect').reset();\r
  35                     }\r
  36             }],\r
  37             ddReorder: true\r
  38         }],\r
  39         tbar:[{\r
  40             text: 'Options',\r
  41             menu: [{\r
  42                     text: 'Set Value (2,3)',\r
  43                     handler: function(){\r
  44                         msForm.getForm().findField('multiselect').setValue('2,3');\r
  45                     }\r
  46                 },{\r
  47                     text: 'Toggle Enabled',\r
  48                     handler: function(){\r
  49                         var m = msForm.getForm().findField('multiselect');\r
  50                         if (!m.disabled) {\r
  51                             m.disable();\r
  52                         } else {\r
  53                             m.enable();\r
  54                         }\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     var ds = new Ext.data.ArrayStore({\r
  72         data: [[123,'One Hundred Twenty Three'],\r
  73             ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],\r
  74             ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],\r
  75         fields: ['value','text'],\r
  76         sortInfo: {\r
  77             field: 'value',\r
  78             direction: 'ASC'\r
  79         }\r
  80     });\r
  81 \r
  82     /*\r
  83      * Ext.ux.form.ItemSelector Example Code\r
  84      */\r
  85     var isForm = new Ext.form.FormPanel({\r
  86         title: 'ItemSelector Test',\r
  87         width:700,\r
  88         bodyStyle: 'padding:10px;',\r
  89         renderTo: 'itemselector',\r
  90         items:[{\r
  91             xtype: 'itemselector',\r
  92             name: 'itemselector',\r
  93             fieldLabel: 'ItemSelector',\r
  94                 imagePath: '../ux/images/',\r
  95             multiselects: [{\r
  96                 width: 250,\r
  97                 height: 200,\r
  98                 store: ds,\r
  99                 displayField: 'text',\r
 100                 valueField: 'value'\r
 101             },{\r
 102                 width: 250,\r
 103                 height: 200,\r
 104                 store: [['10','Ten']],\r
 105                 tbar:[{\r
 106                     text: 'clear',\r
 107                     handler:function(){\r
 108                             isForm.getForm().findField('itemselector').reset();\r
 109                         }\r
 110                 }]\r
 111             }]\r
 112         }],\r
 113 \r
 114         buttons: [{\r
 115             text: 'Save',\r
 116             handler: function(){\r
 117                 if(isForm.getForm().isValid()){\r
 118                     Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+\r
 119                         isForm.getForm().getValues(true));\r
 120                 }\r
 121             }\r
 122         }]\r
 123     });\r
 124 \r
 125 });\r
 126 </pre>    \r
 127 </body>\r
 128 </html>