multiselect-demo.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:4k
源码类别:

JavaScript

开发平台:

JavaScript

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