PDA

View Full Version : Binding multi slider to a model/store



acp
20 Apr 2012, 2:32 AM
I am quite new to Ext JS and am currenly creating my first MVC app. The app consists of a grid and a form for editing the contents of the grid. I would like to add a multi slider to adjust two integer fields in the model and have not managed to find out how to do this yet. Your help would be apprecited !

It is only possible to bind a single name to a slider so if the data is in separate fields in the model then it is only possible to have a single slide thumb.

I have tried creating a association so that multiple values can be bound using a single name but that has not worked.


Ext.define('NotamWatch.model.Config', {
extend: 'Ext.data.Model',

hasMany : {model: 'LevelLimits', name : 'LEVEL_LIMITS'},

fields: [{name: 'ID', type: 'int'},
{name: 'DESCRIPTION', type: 'string'},
{name: 'WATCH_ALERT_DESCRIPTION', type: 'string'},
....


Ext.define('NotamWatch.model.LevelLimits', {
extend: 'Ext.data.Model',
fields: [{name: 'LOWER', type: 'int'},
{name:'UPPER', type: 'int'}
],
belongsTo: 'Config'
});




Ext.define('NotamWatch.view.config.Edit', {
extend: 'Ext.form.Panel',
alias : 'widget.configedit',

requires: ['Ext.form.Panel'],

title: 'Configuration details',

items : [
{
xtype: 'textfield',
name : 'DESCRIPTION',
fieldLabel: 'Title'
},
{
xtype: 'textfield',
name : 'WATCH_ALERT_DESCRIPTION',
fieldLabel: 'Description'
},
{
xtype: 'multislider',
name : 'LEVEL_LIMITS',
fieldLabel: 'Level Limits',
width: 200,
minValue:0,
maxValue:400
},
....


The json data populating the store is formatted as follows


"data":[{"CONFIG_ID":"16","DESCRIPTION":"SUBJECT:GE","WATCH_ALERT_DESCRIPTION":null, ... ,"LEVEL_LIMITS":[{"LOWER":0,"UPPER":400}]},

The result is a single slider which does is not bound to the data.

What is the correct method for binding a multi slider to data in a store ?

Thank you for your help.