PDA

View Full Version : Creating a sliderfield linked to a numberfield



willeastcott
21 May 2013, 5:33 AM
I'd like to create a slider that is linked to a numberfield. So the numberfield displays the current value of the slider, and you can edit the numberfield and the slider will auto-update. So to start, I wrote the following:


Ext.define('PCD.view.NumberFieldSlider', {
extend: 'Ext.form.FieldContainer',
alias: 'widget.labelledslider',
layout: 'hbox',
items: [
{
xtype: 'sliderfield',
flex: 1,
value: 0,
minValue: 0,
maxValue: 100,
listeners: {
change: function(slider, newValue, thumb, eOpts){
this.up('fieldcontainer').down('numberfield').setValue(newValue);
}
}
},
{
xtype: 'numberfield',
hideTrigger: true,
value: 0,
style: 'margin-left:10px',
width: 40,
listeners: {
change: function(numberField, newValue, oldValue, eOpts){
this.up('fieldcontainer').down('sliderfield').setValue(newValue);
}
}
}
]
});

This works, but now I want to actually create one of these controls in my app using Ext.create. Essentially, I just want to be able to pass in a slider config and for that to be passed to the slider in my class. Am I going about this the right way? If yes, how do I apply the config passed to Ext.create('PCD.view.NumberFieldSlider', ... to the sliderfield item in my class?

(Note, I'm still a bit of a noob when it comes to ExtJS... :) )

friend
21 May 2013, 6:01 AM
This worked for me:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Slider Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-theme-gray/ext-theme-gray-all.css">
<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

Ext.define('PCD.view.NumberFieldSlider', {
extend: 'Ext.form.FieldContainer',
alias: 'widget.labelledslider',
layout: 'hbox',
items: [
{
xtype: 'sliderfield',
flex: 1,
value: 0,
minValue: 0,
maxValue: 100,
listeners: {
change: function(slider, newValue, thumb, eOpts){
this.up('fieldcontainer').down('numberfield').setValue(newValue);
}
}
},
{
xtype: 'numberfield',
hideTrigger: true,
value: 0,
style: 'margin-left:10px',
width: 40,
listeners: {
change: function(numberField, newValue, oldValue, eOpts){
this.up('fieldcontainer').down('sliderfield').setValue(newValue);
}
}
}
]
});

Ext.create('Ext.window.Window', {
height: 200,
title: 'Slider Test',
width: 500,
items: [{
xtype: 'labelledslider',
height: 100,
width: 200
}]
}).show();

});

</script>
</head>
<body></body>
</html>

Farish
21 May 2013, 6:03 AM
you can apply config while creating the object. Here is an example:


Ext.create('Ext.form.TextField', {
fieldLabel: this.titleLabelText,
anchor: '70%'
});

willeastcott
21 May 2013, 6:20 AM
@friend: Yes, I know I can instantiate my NumberFieldSlider like that. What I wanted to know is, how do I create it and override properties like minValue/maxValue/etc on the actual slider.

friend
22 May 2013, 8:36 AM
Oops, sorry, I misunderstood your question.

Try this:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Slider Test</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-theme-gray/ext-theme-gray-all.css">
<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

Ext.define('PCD.view.NumberFieldSlider', {
extend: 'Ext.form.FieldContainer',
alias: 'widget.labelledslider',

// do as you like with the layout, I was just playing around...
layout: {
type: 'hbox',
align: 'stretch',
pack: 'start'
},

minSliderValue: 0,

initComponent: function() {

this.items = [{
xtype: 'sliderfield',
flex: 1,
minValue: this.minSliderValue,
maxValue: 100,
listeners: {
change: function(slider, newValue, thumb, eOpts){
this.up('fieldcontainer').down('numberfield').setValue(newValue);
}
}
},{
xtype: 'numberfield',
hideTrigger: true,
value: this.minSliderValue,
style: 'margin-left:10px',
width: 40,
listeners: {
change: function(numberField, newValue, oldValue, eOpts){
this.up('fieldcontainer').down('sliderfield').setValue(newValue);
}
}
}];

this.callParent(arguments);
}
});


Ext.create('Ext.window.Window', {
height: 200,
title: 'Slider Test',
width: 500,
items: [{
xtype: 'labelledslider',
height: 50,
minSliderValue: 15,
value: 15,
width: 150
}]
}).show();

});

</script>
</head>
<body>
<div id="SJPageMenu"></div>
</body>
</html>