extjs-gpl
Version:
GPL licensed version of Sencha Ext JS
73 lines (60 loc) • 2.16 kB
JavaScript
/**
* Parent view for the 4 sliders seen on the color picker window.
* @private
*/
Ext.define('Ext.ux.colorpick.Slider', {
extend : 'Ext.container.Container',
xtype : 'colorpickerslider',
controller : 'colorpick-slidercontroller',
afterRender: function() {
this.callParent(arguments);
var width = this.width,
dragCt = this.lookupReference('dragHandleContainer'),
dragWidth = dragCt.getWidth();
dragCt.el.setStyle('left', ((width - dragWidth) / 2) + 'px');
},
baseCls : Ext.baseCSSPrefix + 'colorpicker-slider',
requires: [
'Ext.ux.colorpick.SliderController'
],
referenceHolder: true,
listeners : {
element: 'el',
mousedown: 'onMouseDown',
mouseup: 'onMouseUp',
dragstart: 'onDragStart'
},
// Container for the drag handle; needed since the slider
// is of static size, while the parent container positions
// it in the center; this is what receives the beautiful
// color gradients for the visual
items: {
xtype : 'container',
cls : Ext.baseCSSPrefix + 'colorpicker-draghandle-container',
reference : 'dragHandleContainer',
height : '100%',
// This is the drag handle; note it's 100%x1 in size to allow full
// vertical drag travel; the inner div has the bigger image
items: {
xtype : 'component',
cls : Ext.baseCSSPrefix + 'colorpicker-draghandle-outer',
reference : 'dragHandle',
width : '100%',
height : 1,
draggable : true,
html : '<div class="' + Ext.baseCSSPrefix + 'colorpicker-draghandle"></div>'
}
},
// <debug>
// Called via data binding whenever selectedColor.h changes;
setHue: function () {
Ext.raise('Must implement setHue() in a child class!');
},
// </debug>
getDragHandle: function () {
return this.lookupReference('dragHandle');
},
getDragContainer: function () {
return this.lookupReference('dragHandleContainer');
}
});