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