Skip to content
Browse files

Adding simple example and updating readme

  • Loading branch information...
1 parent fdb45c9 commit ef01ae3b7bb5d3a926516e2f92fe40cbf50e202a @GeekTantra GeekTantra committed Apr 2, 2012
View
2 .gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+
View
12 LICENSE
@@ -0,0 +1,12 @@
+/*
+ Author : Devadatta Sahoo (For NetTantra Technologies)
+ Site : http://www,nettantra.com / http://www.geektantra.com
+ Contact Info : devadatta@nettantra.com
+ Purpose : Extended Slider Field for Sencha Touch v2
+
+ License : MIT (http://www.opensource.org/licenses/mit-license.php)
+ Warranty : none
+ Price : free
+ Version : 0.1
+ Date : 01/04/2012
+*/
View
0 README
No changes.
View
30 README.md
@@ -0,0 +1,30 @@
+# Sencha Touch 2 Slider Field Extended
+
+This is an extended version of the Sencha Touch 2 Slider field with added helper input item.
+
+# Features
+
+- Dynamically changing input item beside the standard Sencha Touch 2 slider.
+- Slider position changes based on the value of the input item and changes are reflected immidiately.
+- Position of the input helper can be set as config
+- Accessible in code using `xtype`
+
+# Example Usage
+
+ {
+ xtype: 'sliderfieldextended',
+ name: 'slider_decimal',
+ labelText: 'Decimal',
+ label: 'Decimal',
+ value: 3,
+ minValue: 0,
+ maxValue: 100,
+ increment: 0.25
+ },
+
+# Screenshots
+
+![ios-screenshot](https://raw.github.com/nettantra/Sencha-Touch-2-SliderExtended/master/Screenshots/iOS-Screenshot.png)
+
+![android-screenshot](https://raw.github.com/nettantra/Sencha-Touch-2-SliderExtended/master/Screenshots/Android-Screenshot.png)
+
View
BIN Screenshots/Android-Screenshot.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN Screenshots/iOS-Screenshot.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
1 SliderFieldExtended.css
@@ -3,7 +3,6 @@
}
.x-slider-field-extended .x-slider-helper {
- float: right;
width: 30%;
}
View
275 SliderFieldExtended.js
@@ -1,139 +1,142 @@
+
Ext.define('Ext.field.SliderExtended', {
- extend : 'Ext.field.Field',
- xtype : 'sliderfieldextended',
- requires: [
- 'Ext.slider.Slider'
- ],
- alternateClassName: 'Ext.form.SliderExtended',
-
- config: {
- cls: Ext.baseCSSPrefix + 'slider-field-extended',
- tabIndex: -1
- },
-
- 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: 'input',
- type: 'number',
- cls: Ext.baseCSSPrefix + 'slider-helper-input'
- }
- ]
- }];
-
- return originalConfig;
- },
-
- setHelperValue: function(value) {
- var value = value;
- this.helperInput.dom.value = value;
- },
-
- // @private
- applyComponent: function(config) {
- var self = this;
- var changeValue = function(e) {
- var keycode = e.which || window.event.keyCode;
- if( [8, 9, 13, 37, 38, 39, 40, 46].indexOf(Number(keycode)) !== -1 ) return true;
- var helperInputValue = Number(self.helperInput.getValue());
- if(helperInputValue < self.config.minValue || isNaN(helperInputValue))
- helperInputValue = self.config.minValue;
- else if(helperInputValue > self.config.maxValue)
- helperInputValue = self.config.maxValue;
- this.value = helperInputValue;
- self.setValue(helperInputValue);
- };
- self.helperInput.dom.onkeydown = function(e) {
- var keycode = e.which || window.event.keyCode;
- if( [8, 9, 13, 37, 38, 39, 40, 46, 190].indexOf(Number(keycode)) !== -1 ) return true;
- if( keycode > 57 || keycode < 48 ) return false;
- };
- self.helperInput.dom.onchange = changeValue;
- self.helperInput.dom.onclick = changeValue;
- self.helperInput.dom.onkeyup = changeValue;
- 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);
+ extend : 'Ext.field.Field',
+ xtype : 'sliderfieldextended',
+ requires: [
+ 'Ext.slider.Slider'
+ ],
+ alternateClassName: 'Ext.form.SliderExtended',
+
+ config: {
+ cls: Ext.baseCSSPrefix + 'slider-field-extended',
+ 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: 'input',
+ type: 'number',
+ cls: Ext.baseCSSPrefix + 'slider-helper-input'
+ }
+ ]
+ }];
+
+ return originalConfig;
+ },
+
+ setHelperValue: function(value) {
+ var value = value;
+ this.helperInput.dom.value = value;
+ },
+
+ // @private
+ applyComponent: function(config) {
+ var self = this;
+ self.helper.setStyle('float', self.config.helperPosition);
+ var changeValue = function(e) {
+ var keycode = e.which || window.event.keyCode;
+ if( [8, 9, 13, 37, 38, 39, 40, 46].indexOf(Number(keycode)) !== -1 ) return true;
+ var helperInputValue = Number(self.helperInput.getValue());
+ if(helperInputValue < self.config.minValue || isNaN(helperInputValue))
+ helperInputValue = self.config.minValue;
+ else if(helperInputValue > self.config.maxValue)
+ helperInputValue = self.config.maxValue;
+ this.value = helperInputValue;
+ self.setValue(helperInputValue);
+ };
+ self.helperInput.dom.onkeydown = function(e) {
+ var keycode = e.which || window.event.keyCode;
+ if( [8, 9, 13, 37, 38, 39, 40, 46, 190].indexOf(Number(keycode)) !== -1 ) return true;
+ if( keycode > 57 || keycode < 48 ) return false;
+ };
+ self.helperInput.dom.onchange = changeValue;
+ self.helperInput.dom.onclick = changeValue;
+ self.helperInput.dom.onkeyup = changeValue;
+ 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
80 examples/simple/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE HTML>
+<html manifest="" lang="en-US">
+<head>
+ <meta charset="UTF-8">
+ <title>Sencha Touch 2 - SliderExtended Example (Simple)</title>
+ <link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css" />
+ <link rel="stylesheet" href="../../SliderFieldExtended.css" type="text/css" />
+ <style type="text/css">
+ /**
+ * Example of an initial loading indicator.
+ * It is recommended to keep this as minimal as possible to provide instant feedback
+ * while other resources are still being loaded for the first time
+ */
+ html, body {
+ height: 100%;
+ }
+
+ #appLoadingIndicator {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -10px;
+ margin-left: -50px;
+ width: 100px;
+ height: 20px;
+ }
+
+ #appLoadingIndicator > * {
+ background-color: #FFFFFF;
+ float: left;
+ height: 20px;
+ margin-left: 11px;
+ width: 20px;
+ -webkit-animation-name: appLoadingIndicator;
+ -webkit-border-radius: 13px;
+ -webkit-animation-duration: 0.8s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-direction: linear;
+ opacity: 0.3
+ }
+
+ #appLoadingIndicator > :nth-child(1) {
+ -webkit-animation-delay: 0.18s;
+ }
+
+ #appLoadingIndicator > :nth-child(2) {
+ -webkit-animation-delay: 0.42s;
+ }
+
+ #appLoadingIndicator > :nth-child(3) {
+ -webkit-animation-delay: 0.54s;
+ }
+
+ @-webkit-keyframes appLoadingIndicator{
+ 0% {
+ opacity: 0.3
+ }
+
+ 50% {
+ opacity: 1;
+ background-color:#1985D0
+ }
+
+ 100% {
+ opacity:0.3
+ }
+ }
+ </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="index.js"></script>
+</head>
+<body>
+ <div id="appLoadingIndicator">
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
+</body>
+</html>
View
96 examples/simple/index.js
@@ -0,0 +1,96 @@
+Ext.setup({
+ onReady: function(options) {
+ Ext.create('Ext.form.Panel', {
+ fullscreen : true,
+ items: [
+ {
+ docked: 'top',
+ xtype: 'titlebar',
+ title: 'SliderExtended'
+ },
+ {
+ xtype : 'fieldset',
+ title: 'Standard Slider Input',
+ items : [
+ {
+ xtype: 'sliderfieldextended',
+ name: 'slider_decimal',
+ labelText: 'Decimal',
+ label: 'Decimal',
+ value: 3,
+ minValue: 0,
+ maxValue: 100,
+ increment: 0.25
+ },
+ {
+ xtype: 'sliderfieldextended',
+ name: 'slider_integer',
+ labelText: 'Integer',
+ label: 'Integer',
+ value: 9,
+ minValue: 0,
+ maxValue: 100
+ }
+ ]
+ },
+ {
+ xtype : 'fieldset',
+ title: 'Top Aligned Labels',
+ items : [
+ {
+ xtype: 'sliderfieldextended',
+ name: 'slider_decimal',
+ labelAlign: 'top',
+ labelText: 'Slider (Decimal)',
+ label: 'Slider (Decimal)',
+ value: 3,
+ minValue: 0,
+ maxValue: 100,
+ increment: 0.25
+ },
+ {
+ xtype: 'sliderfieldextended',
+ name: 'slider_integer',
+ labelAlign: 'top',
+ labelText: 'Slider (Integer)',
+ label: 'Slider (Integer)',
+ value: 9,
+ minValue: 0,
+ maxValue: 100
+ }
+ ]
+ },
+ {
+ xtype : 'fieldset',
+ title: 'Left Aligned Helpers',
+ defaults: {
+ helperPosition: 'left'
+ },
+ items : [
+ {
+ xtype: 'sliderfieldextended',
+ name: 'slider_decimal',
+ labelAlign: 'top',
+ labelText: 'Slider (Decimal)',
+ label: 'Slider (Decimal)',
+ value: 3,
+ minValue: 0,
+ maxValue: 100,
+ increment: 0.25
+ },
+ {
+ xtype: 'sliderfieldextended',
+ name: 'slider_integer',
+ labelAlign: 'top',
+ labelText: 'Slider (Integer)',
+ label: 'Slider (Integer)',
+ value: 9,
+ minValue: 0,
+ maxValue: 100
+ }
+ ]
+ }
+ ]
+ });
+ }
+});

0 comments on commit ef01ae3

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