Ext.js5小鲱鱼域（表单域）(39)

最新推荐文章于 2022-10-27 20:45:58 发布

翻译最新推荐文章于 2022-10-27 20:45:58 发布 · 503 阅读

Ext.js项目专栏收录该内容

65 篇文章

订阅专栏

本文介绍如何在表单中使用滑块控件作为表单字段，并展示了配置滑块的基本方法，包括设置默认值、调整范围以及响应用户操作等。

/**
 * Shows how the Slider control can be used in a form and participate like a form field.
 * 展示在一个表单里如何添加使用滑块控制，就像一个表单字段一样
 */
Ext.define('KitchenSink.view.form.SliderField', {
    extend: 'Ext.form.Panel',

    requires: [
        'Ext.slider.Single'
    ],
    xtype: 'slider-field',

    width: 400,
    title: 'Sound Settings',
    bodyPadding: 10,

    initComponent: function(){
        this.msgTpl = new Ext.Template(
            'Sounds Effects: <b>{fx}%</b><br />',
            'Ambient Sounds: <b>{ambient}%</b><br />',
            'Interface Sounds: <b>{iface}%</b>'
        );
        Ext.apply(this, {
            defaults: {
                labelWidth: 125,
                anchor: '95%',
                tipText: function(thumb){
                    return String(thumb.value) + '%';
                } 
            },
            defaultType: 'slider',
            items: [{
                fieldLabel: 'Sound Effects',
                value: 50,
                name: 'fx'
            },{
                fieldLabel: 'Ambient Sounds',
                value: 80,
                name: 'ambient'
            },{
                fieldLabel: 'Interface Sounds',
                value: 25,
                name: 'iface'
            }],
            bbar: [{
                text: 'Max All',
                scope: this,
                handler: this.onMaxAllClick
            }, '->', {
                text: 'Save',
                scope: this,
                handler: this.onSaveClick
            }, {
                text: 'Reset',
                scope: this,
                handler: this.onResetClick
            }]
        });
        this.callParent();
    },

    onMaxAllClick: function(){
        Ext.suspendLayouts();
        this.items.each(function(c){
            c.setValue(100);
        });
        Ext.resumeLayouts(true);
    },

    onSaveClick: function(){
        Ext.Msg.alert({
            title: 'Settings Saved',
            msg: this.msgTpl.apply(this.getForm().getValues()),
            icon: Ext.Msg.INFO,
            buttons: Ext.Msg.OK
        }); 
    },

    onResetClick: function(){
        this.getForm().reset();
    }
});