add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / kitchensink / classic / samples / view / form / SliderField.js

/**\r
 * Shows how the Slider control can be used in a form and participate like a form field.\r
 */\r
Ext.define('KitchenSink.view.form.SliderField', {\r
    extend: 'Ext.form.Panel',\r
    \r
    requires: [\r
        'Ext.slider.Single'\r
    ],\r
    xtype: 'slider-field',\r
    //<example>\r
    exampleTitle: 'Slider field example',\r
    profiles: {\r
        classic: {\r
            labelWidth: 125\r
        },\r
        neptune: {\r
            labelWidth: 125\r
        },\r
        'neptune-touch': {\r
            labelWidth: 150\r
        }\r
    },\r
    //</example>\r
    \r
    width: 400,\r
    title: 'Sound Settings',\r
    bodyPadding: 10,\r
   \r
    initComponent: function(){\r
        this.msgTpl = new Ext.Template(\r
            'Sounds Effects: <b>{fx}%</b><br />',\r
            'Ambient Sounds: <b>{ambient}%</b><br />',\r
            'Interface Sounds: <b>{iface}%</b>'\r
        );\r
        Ext.apply(this, {\r
            defaults: {\r
                labelWidth: this.profileInfo.labelWidth,\r
                anchor: '95%',\r
                tipText: function(thumb){\r
                    return String(thumb.value) + '%';\r
                } \r
            },\r
            defaultType: 'slider',\r
            items: [{\r
                fieldLabel: 'Sound Effects',\r
                value: 50,\r
                name: 'fx'\r
            },{\r
                fieldLabel: 'Ambient Sounds',\r
                value: 80,\r
                name: 'ambient'\r
            },{\r
                fieldLabel: 'Interface Sounds',\r
                value: 25,\r
                name: 'iface'\r
            }],\r
            bbar: [{\r
                text: 'Max All',\r
                scope: this,\r
                handler: this.onMaxAllClick\r
            }, '->', {\r
                text: 'Save',\r
                scope: this,\r
                handler: this.onSaveClick\r
            }, {\r
                text: 'Reset',\r
                scope: this,\r
                handler: this.onResetClick\r
            }]\r
        });\r
        this.callParent();\r
    },\r
    \r
    onMaxAllClick: function(){\r
        Ext.suspendLayouts();\r
        this.items.each(function(c){\r
            c.setValue(100);\r
        });\r
        Ext.resumeLayouts(true);\r
    },\r
    \r
    onSaveClick: function(){\r
        Ext.Msg.alert({\r
            title: 'Settings Saved',\r
            msg: this.msgTpl.apply(this.getForm().getValues()),\r
            icon: Ext.Msg.INFO,\r
            buttons: Ext.Msg.OK\r
        }); \r
    },\r
    \r
    onResetClick: function(){\r
        this.getForm().reset();\r
    }\r
});\r