examples/multiselect/multiselect-demo.js

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