Set selected list items in a list box
<!-- /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ --> <html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/MultiSelect.css"/> <link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/shared/examples.css" /> <script type="text/javascript" src="ext-3.0.0/examples/ux/MultiSelect.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/ux/ItemSelector.js"></script> </head> <!-- Revised from demo code in ext3.0.0 --> <body> <script type="text/javascript"> /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ Ext.onReady(function(){ Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; /* * Ext.ux.form.MultiSelect Example Code */ var msForm = new Ext.form.FormPanel({ title: 'MultiSelect Test', width: 700, bodyStyle: 'padding:10px;', renderTo: 'multiselect', items:[{ xtype: 'multiselect', fieldLabel: 'Multiselect<br />(Required)', name: 'multiselect', width: 250, height: 200, allowBlank:false, store: [[123,'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']], tbar:[{ text: 'clear', handler: function(){ msForm.getForm().findField('multiselect').reset(); } }], ddReorder: true }], tbar:[{ text: 'Options', menu: [{ text: 'Set Value (2,3)', handler: function(){ msForm.getForm().findField('multiselect').setValue('2,3'); } },{ text: 'Toggle Enabled', handler: function(){ var m = msForm.getForm().findField('multiselect'); if (!m.disabled) { m.disable(); } else { m.enable(); } } }] }], buttons: [{ text: 'Save', handler: function(){ if(msForm.getForm().isValid()){ Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ msForm.getForm().getValues(true)); } } }] }); var ds = new Ext.data.ArrayStore({ data: [[123,'One Hundred Twenty Three'], ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']], fields: ['value','text'], sortInfo: { field: 'value', direction: 'ASC' } }); /* * Ext.ux.form.ItemSelector Example Code */ var isForm = new Ext.form.FormPanel({ title: 'ItemSelector Test', width:700, bodyStyle: 'padding:10px;', renderTo: 'itemselector', items:[{ xtype: 'itemselector', name: 'itemselector', fieldLabel: 'ItemSelector', imagePath: 'ext-3.0.0/examples/ux/images/', multiselects: [{ width: 250, height: 200, store: ds, displayField: 'text', valueField: 'value' },{ width: 250, height: 200, store: [['10','Ten']], tbar:[{ text: 'clear', handler:function(){ isForm.getForm().findField('itemselector').reset(); } }] }] }], buttons: [{ text: 'Save', handler: function(){ if(isForm.getForm().isValid()){ Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ isForm.getForm().getValues(true)); } } }] }); }); </script> <h1>MultiSelect and ItemSelector</h1> <b>MultiSelect</b><br /> <p>Press Save with no items selected to see an example of validation applied.</p> <div id="multiselect"class="demo-ct" style="margin-bottom:15px;"></div> <b>ItemSelector</b><br /> <p>Supports drag and drop, double-click, button move/reorder, etc. <div id="itemselector"class="demo-ct"></div> </body> </html> Related examples in the same category
