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     function createDockedItems(fieldId) {
  26         return [{
  27             xtype: 'toolbar',
  28             dock: 'top',
  29             items: {
  30                 text: 'Options',
  31                 menu: [{
  32                     text: 'Set value (2,3)',
  33                     handler: function(){
  34                         Ext.getCmp(fieldId).setValue(['2', '3']);
  35                     }
  36                 },{
  37                     text: 'Toggle enabled',
  38                     checked: true,
  39                     checkHandler: function(item, checked){
  40                         Ext.getCmp(fieldId).setDisabled(!checked);
  41                     }
  42                 },{
  43                     text: 'Toggle delimiter',
  44                     checked: true,
  45                     checkHandler: function(item, checked) {
  46                         var field = Ext.getCmp(fieldId);
  47                         if (checked) {
  48                             field.delimiter = ',';
  49                             Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
  50                                           'see that values are now submitted as a single parameter separated by the delimiter.');
  51                         } else {
  52                             field.delimiter = null;
  53                             Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
  54                                           'see that values are now submitted as separate parameters.');
  55                         }
  56                     }
  57                 }]
  58             }
  59         }, {
  60             xtype: 'toolbar',
  61             dock: 'bottom',
  62             ui: 'footer',
  63             defaults: {
  64                 minWidth: 75
  65             },
  66             items: ['->', {
  67                 text: 'Clear',
  68                 handler: function(){
  69                     var field = Ext.getCmp(fieldId);
  70                     if (!field.readOnly && !field.disabled) {
  71                         field.clearValue();
  72                     }
  73                 }
  74             }, {
  75                 text: 'Reset',
  76                 handler: function() {
  77                     Ext.getCmp(fieldId).up('form').getForm().reset();
  78                 }
  79             }, {
  80                 text: 'Save',
  81                 handler: function(){
  82                     var form = Ext.getCmp(fieldId).up('form').getForm();
  83                     if (form.isValid()){
  84                         Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
  85                             form.getValues(true));
  86                     }
  87                 }
  88             }]
  89         }];
  90     }
  91
  92     /*
  93      * Ext.ux.form.MultiSelect Example Code
  94      */
  95     var msForm = Ext.widget('form', {
  96         title: 'MultiSelect Test',
  97         width: 400,
  98         bodyPadding: 10,
  99         renderTo: 'multiselect',
 100         items:[{
 101             anchor: '100%',
 102             xtype: 'multiselect',
 103             msgTarget: 'side',
 104             fieldLabel: 'Multiselect',
 105             name: 'multiselect',
 106             id: 'multiselect-field',
 107             allowBlank: false,
 108             store: [[123,'One Hundred Twenty Three'],
 109                     ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
 110                     ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
 111             value: ['3', '4', '6'],
 112             ddReorder: true
 113         }],
 114         dockedItems: createDockedItems('multiselect-field')
 115     });
 116
 117
 118     var ds = Ext.create('Ext.data.ArrayStore', {
 119         data: [[123,'One Hundred Twenty Three'],
 120             ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
 121             ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
 122         fields: ['value','text'],
 123         sortInfo: {
 124             field: 'value',
 125             direction: 'ASC'
 126         }
 127     });
 128
 129     /*
 130      * Ext.ux.form.ItemSelector Example Code
 131      */
 132     var isForm = Ext.widget('form', {
 133         title: 'ItemSelector Test',
 134         width: 700,
 135         bodyPadding: 10,
 136         renderTo: 'itemselector',
 137         items:[{
 138             xtype: 'itemselector',
 139             name: 'itemselector',
 140             id: 'itemselector-field',
 141             anchor: '100%',
 142             fieldLabel: 'ItemSelector',
 143             imagePath: '../ux/images/',
 144             store: ds,
 145             displayField: 'text',
 146             valueField: 'value',
 147             value: ['3', '4', '6'],
 148             allowBlank: false,
 149             msgTarget: 'side'
 150         }],
 151         dockedItems: createDockedItems('itemselector-field')
 152     });
 153
 154 });
 155