Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
Checking mergeability… Don't worry, you can still create the pull request.
  • 4 commits
  • 6 files changed
  • 0 commit comments
  • 1 contributor
View
35 README.md
@@ -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',
@@ -20,7 +20,38 @@ This is an extended version of the Sencha Touch 2 Slider field with added helper
minValue: 0,
maxValue: 100,
increment: 0.25
- },
+ }
+
+## Using a custom valueMapper
+
+ {
+ xtype: 'sliderfieldtext',
+ name: 'slider_decimal',
+ labelText: 'Decimal',
+ label: 'Decimal',
+ value: 0,
+ minValue: 0,
+ maxValue: 2,
+ increment: 1,
+ valueMapper: function(value) {
+ self.config.valueMap[value];
+ },
+ valueMap: ['A', 'B', 'C']
+ }
+
+## Using auto-values
+
+This will use values matching the valueMap passed in, in this example from 0 to 2, with initial value of 0 (override using defaultValue).
+
+ {
+ xtype: 'sliderfieldtext',
+ name: 'slider_decimal',
+ labelText: 'Decimal',
+ label: 'Decimal',
+ autoValues: true,
+ valueMap: ['Any', 'Apartment', 'House']
+ }
+
# Screenshots
View
22 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;
View
29 SliderFieldExtended.js → SliderFieldInput.js
@@ -1,16 +1,23 @@
-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'
+ helperPosition: 'right',
+ valueMapper: function(value) {
+ if (self.config.valueMap) {
+ self.config.valueMap[value];
+ } else {
+ value;
+ }
+ }
},
proxyConfig: {
@@ -27,6 +34,15 @@ Ext.define('Ext.field.SliderExtended', {
config.value = config.values;
}
+ if (config.hasOwnProperty('valueMap')) {
+ if (config.autoValues == true) {
+ config.value = config.defaultValue || 0;
+ config.minValue = 0;
+ config.maxValue = config.valueMap.size -1;
+ config.increment = 1;
+ }
+ }
+
this.callParent([config]);
},
@@ -64,7 +80,8 @@ Ext.define('Ext.field.SliderExtended', {
},
setHelperValue: function(value) {
- var value = value;
+ var valueMapper = self.config.valueMapper;
+ var value = valueMapper ? valueMapper(value) : value;
this.helperInput.dom.value = value;
},
View
138 SliderFieldText.js
@@ -0,0 +1,138 @@
+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',
+ valueMapper: function(value) {
+ if (self.config.valueMap) {
+ self.config.valueMap[value];
+ } else {
+ value;
+ }
+ }
+ },
+
+ proxyConfig: {
+ value: 0,
+ minValue: 0,
+ maxValue: 100,
+ increment: 1
+ },
+
+ constructor: function(config) {
+ config = config || {};
+
+ if (config.hasOwnProperty('values')) {
+ config.value = config.values;
+ }
+
+ if (config.hasOwnProperty('valueMap')) {
+ if (config.autoValues == true) {
+ config.value = config.defaultValue || 0;
+ config.minValue = 0;
+ config.maxValue = config.valueMap.size -1;
+ config.increment = 1;
+ }
+ }
+
+ 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);
+ }
+});
View
3  examples/simple/index.html
@@ -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>
View
12 examples/simple/index.js
@@ -13,7 +13,7 @@ Ext.setup({
title: 'Standard Slider Input',
items : [
{
- xtype: 'sliderfieldextended',
+ xtype: 'sliderfieldinput',
name: 'slider_decimal',
labelText: 'Decimal',
label: 'Decimal',
@@ -23,7 +23,7 @@ Ext.setup({
increment: 0.25
},
{
- xtype: 'sliderfieldextended',
+ xtype: 'sliderfieldinput',
name: 'slider_integer',
labelText: 'Integer',
label: 'Integer',
@@ -38,7 +38,7 @@ Ext.setup({
title: 'Top Aligned Labels',
items : [
{
- xtype: 'sliderfieldextended',
+ xtype: 'sliderfieldinput',
name: 'slider_decimal',
labelAlign: 'top',
labelText: 'Slider (Decimal)',
@@ -49,7 +49,7 @@ Ext.setup({
increment: 0.25
},
{
- xtype: 'sliderfieldextended',
+ xtype: 'sliderfieldinput',
name: 'slider_integer',
labelAlign: 'top',
labelText: 'Slider (Integer)',
@@ -68,7 +68,7 @@ Ext.setup({
},
items : [
{
- xtype: 'sliderfieldextended',
+ xtype: 'sliderfieldinput',
name: 'slider_decimal',
labelAlign: 'top',
labelText: 'Slider (Decimal)',
@@ -79,7 +79,7 @@ Ext.setup({
increment: 0.25
},
{
- xtype: 'sliderfieldextended',
+ xtype: 'sliderfieldinput',
name: 'slider_integer',
labelAlign: 'top',
labelText: 'Slider (Integer)',

No commit comments for this range

Something went wrong with that request. Please try again.