/**
* 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();
}
});
Ext.js5小鲱鱼域(表单域)(39)
最新推荐文章于 2022-10-27 20:45:58 发布