Skip to content

Commit

Permalink
split into input and text version
Browse files Browse the repository at this point in the history
  • Loading branch information
kristianmandrup committed Jun 25, 2012
1 parent 31421bd commit 44a21b9
Show file tree
Hide file tree
Showing 6 changed files with 156 additions and 17 deletions.
6 changes: 3 additions & 3 deletions README.md
Expand Up @@ -12,7 +12,7 @@ This is an extended version of the Sencha Touch 2 Slider field with added helper
# Example Usage

{
xtype: 'sliderfieldextended',
xtype: 'sliderfieldinput',
name: 'slider_decimal',
labelText: 'Decimal',
label: 'Decimal',
Expand All @@ -25,7 +25,7 @@ This is an extended version of the Sencha Touch 2 Slider field with added helper
## Using a custom valueMapper

{
xtype: 'sliderfieldextended',
xtype: 'sliderfieldtext',
name: 'slider_decimal',
labelText: 'Decimal',
label: 'Decimal',
Expand All @@ -35,7 +35,7 @@ This is an extended version of the Sencha Touch 2 Slider field with added helper
increment: 1,
valueMapper: function(value) {
self.config.valueMap[value];
}
},
valueMap: ['A', 'B', 'C']
}

Expand Down
22 changes: 19 additions & 3 deletions SliderFieldExtended.css
@@ -1,12 +1,28 @@
.x-slider-field-extended .x-component-outer {
.x-slider-field-input .x-component-outer {
padding: 0.5em;
}

.x-slider-field-extended .x-slider-helper {
.x-slider-field-input .x-slider-helper {
width: 30%;
}

.x-slider-field-extended .x-slider-helper .x-slider-helper-input {
.x-slider-field-input .x-slider-helper .x-slider-helper-input {
width: 100%;
margin: 0;
padding: 0.1em 0.3em;
height: 2.2em;
border: 1px solid #CCC;
}

.x-slider-field-text .x-component-outer {
padding: 0.5em;
}

.x-slider-field-text .x-slider-helper {
width: 30%;
}

.x-slider-field-text .x-slider-helper .x-slider-helper-input {
width: 100%;
margin: 0;
padding: 0.1em 0.3em;
Expand Down
8 changes: 4 additions & 4 deletions SliderFieldExtended.js → SliderFieldInput.js
@@ -1,14 +1,14 @@

Ext.define('Ext.field.SliderExtended', {
Ext.define('Ext.field.SliderInput', {
extend : 'Ext.field.Field',
xtype : 'sliderfieldextended',
xtype : 'sliderfieldinput',
requires: [
'Ext.slider.Slider'
],
alternateClassName: 'Ext.form.SliderExtended',
alternateClassName: 'Ext.form.SliderInput',

config: {
cls: Ext.baseCSSPrefix + 'slider-field-extended',
cls: Ext.baseCSSPrefix + 'slider-field-input',
tabIndex: -1,
helperPosition: 'right'
},
Expand Down
122 changes: 122 additions & 0 deletions SliderFieldText.js
@@ -0,0 +1,122 @@
Ext.define('Ext.field.SliderText', {
extend : 'Ext.field.Field',
xtype : 'sliderfieldtext',
requires: [
'Ext.slider.Slider'
],
alternateClassName: 'Ext.form.SliderText',

config: {
cls: Ext.baseCSSPrefix + 'slider-field-text',
tabIndex: -1,
helperPosition: 'right'
},

proxyConfig: {
value: 0,
minValue: 0,
maxValue: 100,
increment: 1
},

constructor: function(config) {
config = config || {};

if (config.hasOwnProperty('values')) {
config.value = config.values;
}

this.callParent([config]);
},

initialize: function() {
this.callParent();

this.getComponent().on({
scope: this,
change: 'onSliderChange',
dragstart: 'onSliderDragStart',
drag: 'onSliderDrag',
dragend: 'onSliderDragEnd'
});
},

getElementConfig: function() {
var self = this;
var originalConfig = self.callParent();

originalConfig.children[1].children = [{
reference: 'helper',
tag: 'div',
cls: Ext.baseCSSPrefix + 'slider-helper',
children: [
{
reference: 'helperInput',
tag: 'div',
cls: Ext.baseCSSPrefix + 'slider-helper-input'
}
]
}];

return originalConfig;
},

setHelperValue: function(value) {
var valueMapper = self.config.valueMapper;
var value = valueMapper ? valueMapper(value) : value;
this.helperInput.dom.text = value;
},

// @private
applyComponent: function(config) {
var self = this;
self.helper.setStyle('float', self.config.helperPosition);
self.setHelperValue(self.config.value);
return Ext.factory(config, Ext.slider.Slider);
},

onSliderChange: function(me, thumb, newValue, oldValue) {
this.setHelperValue(newValue);
this.fireEvent('change', this, thumb, newValue, oldValue);
},

onSliderDragStart: function(me, thumb, newValue, oldValue) {
this.fireEvent('dragstart', this, thumb, newValue, oldValue);
},

onSliderDrag: function(me, thumb, newValue, oldValue) {
this.setHelperValue(newValue);
this.fireEvent('drag', this, thumb, newValue, oldValue);
},

onSliderDragEnd: function(me, thumb, newValue, oldValue) {
this.fireEvent('dragend', this, thumb, newValue, oldValue);
},

/**
* Convience method. Calls {@link #setValue}
*/
setValues: function(value) {
this.setValue(value);
},

/**
* Convience method. Calls {@link #getValue}
*/
getValues: function() {
return this.getValue();
},

reset: function() {
var config = this.config,
initialValue = (this.config.hasOwnProperty('values')) ? config.values : config.value;

this.setValue(initialValue);
},

doSetDisabled: function(disabled) {
this.callParent(arguments);

this.getComponent().setDisabled(disabled);
}
});
3 changes: 2 additions & 1 deletion examples/simple/index.html
Expand Up @@ -67,7 +67,8 @@
}
</style>
<script type="text/javascript" src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="../../SliderFieldExtended.js"></script>
<script type="text/javascript" src="../../SliderFieldInput.js"></script>
<script type="text/javascript" src="../../SliderFieldText.js"></script>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
Expand Down
12 changes: 6 additions & 6 deletions examples/simple/index.js
Expand Up @@ -13,7 +13,7 @@ Ext.setup({
title: 'Standard Slider Input',
items : [
{
xtype: 'sliderfieldextended',
xtype: 'sliderfieldinput',
name: 'slider_decimal',
labelText: 'Decimal',
label: 'Decimal',
Expand All @@ -23,7 +23,7 @@ Ext.setup({
increment: 0.25
},
{
xtype: 'sliderfieldextended',
xtype: 'sliderfieldinput',
name: 'slider_integer',
labelText: 'Integer',
label: 'Integer',
Expand All @@ -38,7 +38,7 @@ Ext.setup({
title: 'Top Aligned Labels',
items : [
{
xtype: 'sliderfieldextended',
xtype: 'sliderfieldinput',
name: 'slider_decimal',
labelAlign: 'top',
labelText: 'Slider (Decimal)',
Expand All @@ -49,7 +49,7 @@ Ext.setup({
increment: 0.25
},
{
xtype: 'sliderfieldextended',
xtype: 'sliderfieldinput',
name: 'slider_integer',
labelAlign: 'top',
labelText: 'Slider (Integer)',
Expand All @@ -68,7 +68,7 @@ Ext.setup({
},
items : [
{
xtype: 'sliderfieldextended',
xtype: 'sliderfieldinput',
name: 'slider_decimal',
labelAlign: 'top',
labelText: 'Slider (Decimal)',
Expand All @@ -79,7 +79,7 @@ Ext.setup({
increment: 0.25
},
{
xtype: 'sliderfieldextended',
xtype: 'sliderfieldinput',
name: 'slider_integer',
labelAlign: 'top',
labelText: 'Slider (Integer)',
Expand Down

0 comments on commit 44a21b9

Please sign in to comment.