PDA

View Full Version : How to add increment & decremented buttons to slider



DineshGudikandula
22 Jan 2013, 3:11 AM
Hi All.....
I want add increment & decremented buttons to slider....

Sample code:


xtype: 'splitbutton',
menu:[{
xtype:'slider',
vertical : true,
height : 214,
minValue : 0,
scope : this,
maxValue : 100
}]
CSS code:
.x-css-shadow{
box-shadow:none !important;
}
.x-panel.x-layer.x-panel-default.x-menu {
position: relative !important;
float: right;
}
.x-menu .x-menu-body{
width: 26px !important;
}

Plz help me...
Thanks in advance...

DineshGudikandula
22 Jan 2013, 9:44 PM
Any one there......to help..:-?

DineshGudikandula
23 Jan 2013, 5:45 AM
I got ....



fbar:[{
xtype: 'splitbutton',
iconCls:'zoomicon',
id:'dennu',
width:35,
height:22,
menu:[{
xtype:'image',
src:'./increment.png',
width:20,
listeners: {
el: {
click: function(img) {
var slider = Ext.ComponentQuery.query('slider')[0];
slider.setValue( slider.getValue()+1,true );
}
}
}},{
xtype:'slider',
vertical : true,
height : 150,
minValue : 0,
scope : this,
increment:1,
maxValue :10,
listeners:{
change:function( slider, newValue, thumb, eOpts ){
var chart = Ext.ComponentQuery.query('chart')[0];
if( newValue == '0'){
chart.setHeight( chart.defaultHeight ) ;
chart.setWidth( chart.defaultWidth );
}
if( chart.selectConfig != undefined ){
chart.setZoom( chart.selectConfig );
chart.selectConfig = undefined ;

}
var chartheight= chart.defaultHeight * newValue*10/100 + chart.defaultHeight;
var chartwidth = chart.defaultWidth *newValue*10/100 + chart.defaultWidth ;
chart.setHeight( chartheight ) ;
chart.setWidth( chartwidth );
this.oldValue = newValue;
},
}
},
{
xtype:'image',
src:'./dicrement.png',
width:20,
listeners: {
el: {
click: function(img) {
var slider = Ext.ComponentQuery.query('slider')[0];
slider.setValue( slider.getValue()-1,true );
}
}
}
}],
listeners:{
afterrender: function (tb) {

var clockCmp = Ext.ComponentQuery.query('tbtext[name=clock]')[0];
task = Ext.TaskManager.start({
run: function () {
clockCmp.setText(Ext.Date.format(new Date(), 'D:M:Y g:i:s A'));
},
interval: 1000
});

},
click:function( dtn, e, eOpts ){
this.showMenu();
}
}]


long time work....:))