Upgrade to ExtJS 4.0.7 - Released 10/19/2011

[extjs.git] / examples / multiselect / multiselect-demo.js

diff --git a/examples/multiselect/multiselect-demo.js b/examples/multiselect/multiselect-demo.js
index 9da9578..03da8b9 100644 (file)
--- a/examples/multiselect/multiselect-demo.js
+++ b/examples/multiselect/multiselect-demo.js
@@ -21,6 +21,73 @@ Ext.require([
 ]);
 
 Ext.onReady(function(){
+    
+    function createDockedItems(fieldId) {
+        return [{
+            xtype: 'toolbar',
+            dock: 'top',
+            items: {
+                text: 'Options',
+                menu: [{
+                    text: 'Set value (2,3)',
+                    handler: function(){
+                        Ext.getCmp(fieldId).setValue(['2', '3']);
+                    }
+                },{
+                    text: 'Toggle enabled',
+                    checked: true,
+                    checkHandler: function(item, checked){
+                        Ext.getCmp(fieldId).setDisabled(!checked);
+                    }
+                },{
+                    text: 'Toggle delimiter',
+                    checked: true,
+                    checkHandler: function(item, checked) {
+                        var field = Ext.getCmp(fieldId);
+                        if (checked) {
+                            field.delimiter = ',';
+                            Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
+                                          'see that values are now submitted as a single parameter separated by the delimiter.');
+                        } else {
+                            field.delimiter = null;
+                            Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
+                                          'see that values are now submitted as separate parameters.');
+                        }
+                    }
+                }]
+            }
+        }, {
+            xtype: 'toolbar',
+            dock: 'bottom',
+            ui: 'footer',
+            defaults: {
+                minWidth: 75
+            },
+            items: ['->', {
+                text: 'Clear',
+                handler: function(){
+                    var field = Ext.getCmp(fieldId);
+                    if (!field.readOnly && !field.disabled) {
+                        field.clearValue();
+                    }
+                }
+            }, {
+                text: 'Reset',
+                handler: function() {
+                    Ext.getCmp(fieldId).up('form').getForm().reset();
+                }
+            }, {
+                text: 'Save',
+                handler: function(){
+                    var form = Ext.getCmp(fieldId).up('form').getForm();
+                    if (form.isValid()){
+                        Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
+                            form.getValues(true));
+                    }
+                }
+            }]
+        }];
+    }
 
     /*
      * Ext.ux.form.MultiSelect Example Code
@@ -36,76 +103,15 @@ Ext.onReady(function(){
             msgTarget: 'side',
             fieldLabel: 'Multiselect',
             name: 'multiselect',
-
+            id: 'multiselect-field',
             allowBlank: false,
-            // minSelections: 2,
-            // maxSelections: 3,
-
             store: [[123,'One Hundred Twenty Three'],
                     ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
                     ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
-
             value: ['3', '4', '6'],
-
             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();
-                    }
-                }
-            },{
-                text: 'Toggle delimiter',
-                handler: function() {
-                    var m = msForm.getForm().findField('multiselect');
-                    if (m.delimiter) {
-                        m.delimiter = null;
-                        Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
-                                      'see that values are now submitted as separate parameters.');
-                    } else {
-                        m.delimiter = ',';
-                        Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
-                                      'see that values are now submitted as a single parameter separated by the delimiter.');
-                    }
-                }
-            }]
-        }],
-
-        buttons: [{
-            text: 'Clear',
-            handler: function(){
-                var field = msForm.getForm().findField('multiselect');
-                if (!field.readOnly && !field.disabled) {
-                    field.clearValue();
-                }
-            }
-        }, {
-            text: 'Reset',
-            handler: function() {
-                msForm.getForm().reset();
-            }
-        }, {
-            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));
-                }
-            }
-        }]
+        dockedItems: createDockedItems('multiselect-field')
     });
 
 
@@ -128,81 +134,21 @@ Ext.onReady(function(){
         width: 700,
         bodyPadding: 10,
         renderTo: 'itemselector',
-
-        tbar:[{
-            text: 'Options',
-            menu: [{
-                text: 'Set value (2,3)',
-                handler: function(){
-                    isForm.getForm().findField('itemselector').setValue(['2', '3']);
-                }
-            },{
-                text: 'Toggle enabled',
-                handler: function(){
-                    var m = isForm.getForm().findField('itemselector');
-                    if (!m.disabled) {
-                        m.disable();
-                    } else {
-                        m.enable();
-                    }
-                }
-            },{
-                text: 'Toggle delimiter',
-                handler: function() {
-                    var m = isForm.getForm().findField('itemselector');
-                    if (m.delimiter) {
-                        m.delimiter = null;
-                        Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
-                                      'see that values are now submitted as separate parameters.');
-                    } else {
-                        m.delimiter = ',';
-                        Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
-                                      'see that values are now submitted as a single parameter separated by the delimiter.');
-                    }
-                }
-            }]
-        }],
-
         items:[{
             xtype: 'itemselector',
             name: 'itemselector',
+            id: 'itemselector-field',
             anchor: '100%',
             fieldLabel: 'ItemSelector',
             imagePath: '../ux/images/',
-
             store: ds,
             displayField: 'text',
             valueField: 'value',
             value: ['3', '4', '6'],
-
             allowBlank: false,
-            // minSelections: 2,
-            // maxSelections: 3,
             msgTarget: 'side'
         }],
-
-        buttons: [{
-            text: 'Clear',
-            handler: function(){
-                var field = isForm.getForm().findField('itemselector');
-                if (!field.readOnly && !field.disabled) {
-                    field.clearValue();
-                }
-            }
-        }, {
-            text: 'Reset',
-            handler: function() {
-                isForm.getForm().reset();
-            }
-        }, {
-            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));
-                }
-            }
-        }]
+        dockedItems: createDockedItems('itemselector-field')
     });
 
 });