examples/multiselect/multiselect-demo.js

   1 Ext.Loader.setConfig({enabled: true});
   2 Ext.Loader.setPath('Ext.ux', '../ux');
   3 Ext.require([
   4     'Ext.form.Panel',
   5     'Ext.ux.form.MultiSelect',
   6     'Ext.ux.form.ItemSelector'
   7 ]);
   8
   9 Ext.onReady(function(){
  10
  11     /*
  12      * Ext.ux.form.MultiSelect Example Code
  13      */
  14     var msForm = Ext.widget('form', {
  15         title: 'MultiSelect Test',
  16         width: 400,
  17         bodyPadding: 10,
  18         renderTo: 'multiselect',
  19         items:[{
  20             anchor: '100%',
  21             xtype: 'multiselect',
  22             msgTarget: 'side',
  23             fieldLabel: 'Multiselect',
  24             name: 'multiselect',
  25
  26             allowBlank: false,
  27             // minSelections: 2,
  28             // maxSelections: 3,
  29
  30             store: [[123,'One Hundred Twenty Three'],
  31                     ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
  32                     ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
  33
  34             value: ['3', '4', '6'],
  35
  36             ddReorder: true
  37         }],
  38
  39         tbar:[{
  40             text: 'Options',
  41             menu: [{
  42                 text: 'Set value (2,3)',
  43                 handler: function(){
  44                     msForm.getForm().findField('multiselect').setValue(['2', '3']);
  45                 }
  46             },{
  47                 text: 'Toggle enabled',
  48                 handler: function(){
  49                     var m = msForm.getForm().findField('multiselect');
  50                     if (!m.disabled) {
  51                         m.disable();
  52                     } else {
  53                         m.enable();
  54                     }
  55                 }
  56             },{
  57                 text: 'Toggle delimiter',
  58                 handler: function() {
  59                     var m = msForm.getForm().findField('multiselect');
  60                     if (m.delimiter) {
  61                         m.delimiter = null;
  62                         Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
  63                                       'see that values are now submitted as separate parameters.');
  64                     } else {
  65                         m.delimiter = ',';
  66                         Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
  67                                       'see that values are now submitted as a single parameter separated by the delimiter.');
  68                     }
  69                 }
  70             }]
  71         }],
  72
  73         buttons: [{
  74             text: 'Clear',
  75             handler: function(){
  76                 var field = msForm.getForm().findField('multiselect');
  77                 if (!field.readOnly && !field.disabled) {
  78                     field.clearValue();
  79                 }
  80             }
  81         }, {
  82             text: 'Reset',
  83             handler: function() {
  84                 msForm.getForm().reset();
  85             }
  86         }, {
  87             text: 'Save',
  88             handler: function(){
  89                 if(msForm.getForm().isValid()){
  90                     Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
  91                         msForm.getForm().getValues(true));
  92                 }
  93             }
  94         }]
  95     });
  96
  97
  98     var ds = Ext.create('Ext.data.ArrayStore', {
  99         data: [[123,'One Hundred Twenty Three'],
 100             ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
 101             ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
 102         fields: ['value','text'],
 103         sortInfo: {
 104             field: 'value',
 105             direction: 'ASC'
 106         }
 107     });
 108
 109     /*
 110      * Ext.ux.form.ItemSelector Example Code
 111      */
 112     var isForm = Ext.widget('form', {
 113         title: 'ItemSelector Test',
 114         width: 700,
 115         bodyPadding: 10,
 116         renderTo: 'itemselector',
 117
 118         tbar:[{
 119             text: 'Options',
 120             menu: [{
 121                 text: 'Set value (2,3)',
 122                 handler: function(){
 123                     isForm.getForm().findField('itemselector').setValue(['2', '3']);
 124                 }
 125             },{
 126                 text: 'Toggle enabled',
 127                 handler: function(){
 128                     var m = isForm.getForm().findField('itemselector');
 129                     if (!m.disabled) {
 130                         m.disable();
 131                     } else {
 132                         m.enable();
 133                     }
 134                 }
 135             },{
 136                 text: 'Toggle delimiter',
 137                 handler: function() {
 138                     var m = isForm.getForm().findField('itemselector');
 139                     if (m.delimiter) {
 140                         m.delimiter = null;
 141                         Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
 142                                       'see that values are now submitted as separate parameters.');
 143                     } else {
 144                         m.delimiter = ',';
 145                         Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
 146                                       'see that values are now submitted as a single parameter separated by the delimiter.');
 147                     }
 148                 }
 149             }]
 150         }],
 151
 152         items:[{
 153             xtype: 'itemselector',
 154             name: 'itemselector',
 155             anchor: '100%',
 156             fieldLabel: 'ItemSelector',
 157             imagePath: '../ux/images/',
 158
 159             store: ds,
 160             displayField: 'text',
 161             valueField: 'value',
 162             value: ['3', '4', '6'],
 163
 164             allowBlank: false,
 165             // minSelections: 2,
 166             // maxSelections: 3,
 167             msgTarget: 'side'
 168         }],
 169
 170         buttons: [{
 171             text: 'Clear',
 172             handler: function(){
 173                 var field = isForm.getForm().findField('itemselector');
 174                 if (!field.readOnly && !field.disabled) {
 175                     field.clearValue();
 176                 }
 177             }
 178         }, {
 179             text: 'Reset',
 180             handler: function() {
 181                 isForm.getForm().reset();
 182             }
 183         }, {
 184             text: 'Save',
 185             handler: function(){
 186                 if(isForm.getForm().isValid()){
 187                     Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
 188                         isForm.getForm().getValues(true));
 189                 }
 190             }
 191         }]
 192     });
 193
 194 });