PDA

View Full Version : TimeField Slider Editor in Window/Floating Panel



ramon.alvarez
29 Aug 2012, 5:40 AM
Hello everyone,
I've been working on a Panel with the RowEditing plugin and discovered that I need time measurement input on certain fields. Everything regarding the Panel works as needed, but my attempts to add time slider functionality have all failed. I've taken three different approaches.

Approach #1
I tried to assign a class to the necessary input boxes in order to use a jQuery timepicker that I use elsewhere. The end result is that the JavaScript doesn't get triggered when I click the input box. I even tried including an HTML block with the JavaScript in the HTML option of the editor and that didn't work either.

The editor on the column row...


editor : new Ext.form.TextField({ focusCls:'time_input x-form-field', fieldCls:'time_input x-form-field'}),


The JavaScipt that looks for the time_input class...
http://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js


<script type="text/javascript">
$(document).ready(function(){
$('.time_input').timepicker({
ampm: false,
hourMin: 0,
hourMax: 24,
showSecond: true,
timeFormat: 'hh:mm:ss'
});
});
</script>


Approach #2
I tried to use the ExtJS TimeField. This input method doesn't allow a user to quickly and easily enter the hours, minutes, and seconds. If I could get their input using sliders this method would be preferred.



editor : { xtype : 'timefield', format : 'H:i:s', increment:1 },


Approach #3
I figured I could use a floating panel or a window for an editor. Below is two unfinished approaches I've taken. The problem with this method is that I cannot seem to get these items to float. I believe this is because the editor cannot determine its parent even when I attempt to tell it how to find the parent.

This is the error that a floating panel and a window trigger...


TypeError: me.floatParent.getTargetEl() is undefined
pos = me.floatParent.getTargetEl().getViewRegion();


The floating panel editor approach...


var timeEditor = {
xtype:'panel',
width: 300,
height: 200,
floating: true,
layout: {
type: 'vbox',
align: 'stretch',
padding: 5
},
items: [
{ xtype: 'sliderfield', name: 'hours', fieldLabel: 'Hours', minValue: 0, maxValue: 24 },
{ xtype: 'sliderfield', name: 'minutes', fieldLabel: 'Minutes', minValue: 0, maxValue: 60 },
{ xtype: 'sliderfield', name: 'seconds', fieldLabel: 'Seconds', minValue: 0, maxValue: 60 }
]
};


The window editor approach...


var timeWindowEditor = {
xtype:'window',
contrain: true,
width: 300,
height: 200,
layout: {
type: 'vbox',
align: 'stretch',
padding: 5
},
items: [
{ xtype: 'sliderfield', name: 'hours', fieldLabel: 'Hours', minValue: 0, maxValue: 24 },
{ xtype: 'sliderfield', name: 'minutes', fieldLabel: 'Minutes', minValue: 0, maxValue: 60 },
{ xtype: 'sliderfield', name: 'seconds', fieldLabel: 'Seconds', minValue: 0, maxValue: 60 }
]
};


I'm not very concerned with how I get a three slider time input method implemented into the editor, but I certainly need to find at least one way to get it working. Any help is greatly appreciated.

Thank you :)