PDA

View Full Version : [SOLVED] Sliders: how to maximize total count



ctp
9 Aug 2010, 4:43 AM
Hi all,

I need a field of 3 sliders. Each of them has a range from 0 to 10 (total 30). Now I need a way to limit the total to 20 so the user can e.g. choose 10 for slider1, 7 for slider2 and 3 for slider3 but the sum should be limited to 20. I'm working on a slider field which will be used to review some characteristics like 'quality', 'speed' and 'price' with the limit of max. 20 of the 30 'stars'. Is there any way to disable incrementing slider values?

This is the code snippet for the 3 sliders I'm using now:


Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';
Ext.ns('App');

var total = 0;

App.SpeedSlider = new Ext.extend(Ext.Slider, {
id: 'speed-slider',
constructor: function (config) {
var config = Ext.apply(config || {}, {
fieldLabel: 'Geschwindigkeit',
minValue: 0,
maxValue: 10,
plugins: new Ext.slider.Tip(),
listeners: {
change: {
fn:function() {
Ext.getCmp('total-count').body.update(Ext.getCmp('speed-slider').getValue() + Ext.getCmp('usability-slider').getValue() + Ext.getCmp('quality-slider').getValue());
}
}
}
});
App.SpeedSlider.superclass.constructor.call(this, config);
}
});
Ext.reg('speed_slider', App.SpeedSlider);

App.UsabilitySlider = new Ext.extend(Ext.Slider, {
id: 'usability-slider',
constructor: function (config) {
var config = Ext.apply(config || {}, {
fieldLabel: 'Usability',
minValue: 0,
maxValue: 10,
plugins: new Ext.slider.Tip(),
listeners: {
change: {
fn:function() {
Ext.getCmp('total-count').body.update(Ext.getCmp('speed-slider').getValue() + Ext.getCmp('usability-slider').getValue() + Ext.getCmp('quality-slider').getValue());
}
}
}
});
App.UsabilitySlider.superclass.constructor.call(this, config);
}
});
Ext.reg('usability_slider', App.UsabilitySlider);

App.QualitySlider = new Ext.extend(Ext.Slider, {
id: 'quality-slider',
constructor: function (config) {
var config = Ext.apply(config || {}, {
fieldLabel: 'Qualität',
minValue: 0,
maxValue: 10,
plugins: new Ext.slider.Tip(),
listeners: {
change: {
fn:function() {
Ext.getCmp('total-count').body.update(Ext.getCmp('speed-slider').getValue() + Ext.getCmp('usability-slider').getValue() + Ext.getCmp('quality-slider').getValue());
}
}
}
});
App.QualitySlider.superclass.constructor.call(this, config);
}
});
Ext.reg('quality_slider', App.QualitySlider);

/*App.TotalCount = new Ext.extend(Ext.Panel, {
id: 'total-count',
constructor: function (config) {
var config = Ext.apply(config || {}, {
labelField: 'Summe: '
});
App.TotalCount.superclass.constructor.call(this, config);
}
});
Ext.reg('total_count_panel', App.TotalCount);*/

App.WebsiteReviewFormPanel = Ext.extend(Ext.FormPanel, {
constructor: function (config) {
var config = Ext.apply(config || {}, {
frame: true,
title: 'Website review',
bodyStyle: 'padding: 10px;',
items: [{
xtype: 'speed_slider'
},{
xtype: 'usability_slider'
},{
xtype: 'quality_slider'
},{
xtype: 'panel',
id: 'total-count',
fieldLabel: 'Summe'
}]
});
App.WebsiteReviewFormPanel.superclass.constructor.call(this, config);
}
});
Ext.reg('website_review_form_panel', App.WebsiteReviewFormPanel);

Ext.onReady(function () {
var window;
if(!window){
window = new Ext.Window({
layout: 'fit',
width: 400,
height: 200,
closeAction: 'hide',
plain: true,
items: [{
xtype: 'website_review_form_panel'
}]
});
}
window.show(this);
});

Condor
9 Aug 2010, 4:53 AM
You could return false from the beforechange event.

ctp
9 Aug 2010, 4:59 AM
Doesn't it disable the whole slider? I mean I'm looking for something to disable incrementation when total >= 20.

Some example:

slider1: 10
slider2: 7
slider3: 3

Now the user decrements slider1 to 8 so he can now increment slider2 and slider3 eg. to

slider1: 8
slider2: 8
slider3: 4

Always up to total of 20.

Condor
9 Aug 2010, 5:11 AM
As I said, write beforechange handlers that calculates what the new sum of the 3 sliders would be and return false if it would be > 20.

ctp
9 Aug 2010, 5:27 AM
Hi Condor,

many thanks for your help. Now I added the beforechange handler to the 3 sliders, but as I mentioned before, they're now disabled completely when the sum is > 20. No way to decrement anymore :-(



beforechange: {
fn:function() {
if ((Ext.getCmp('speed-slider').getValue() + Ext.getCmp('usability-slider').getValue() + Ext.getCmp('quality-slider').getValue()) >= 20) {
return false;
}
}
}

Condor
9 Aug 2010, 5:34 AM
No, the beforechange handler passes the NEW VALUE as one of the parameters. You need to use that value to calculate the total.

ctp
9 Aug 2010, 5:51 AM
Cool, works fine now. Many, many thanks ;-)



beforechange: {
fn:function(slider, newval, oldval) {
if ((newval + Ext.getCmp('usability-slider').getValue() + Ext.getCmp('quality-slider').getValue()) > 20) {
return false;
}
}
}

...

beforechange: {
fn:function(slider, newval, oldval) {
if ((Ext.getCmp('speed-slider').getValue() + newval + Ext.getCmp('quality-slider').getValue()) > 20) {
return false;
}
}
}

...

beforechange: {
fn:function(slider, newval, oldval) {
if ((Ext.getCmp('speed-slider').getValue() + Ext.getCmp('usability-slider').getValue() + newval > 20)) {
return false;
}
}
}


P.S. Marked as [SOLVED]