examples/multiselect/multiselect-demo.js

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