Skip to content
Browse files

split into input and text version

  • Loading branch information...
1 parent 31421bd commit 44a21b97233fc8f48b0737ec63cab99aee0e5cbd @kristianmandrup committed Jun 25, 2012
View
6 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',
@@ -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',
@@ -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']
}
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
8 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'
},
View
122 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);
+ }
+});
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)',

0 comments on commit 44a21b9

Please sign in to comment.
Something went wrong with that request. Please try again.