So close, just a minor bug left to fix

Can't put a field container within a field container, need to flatten it out.

app/assets/javascripts/custom_netzke_helpers.js

@@ -3,6 +3,296 @@ Ext.Ajax.on('requestexception', function(conn, response, options) {
   if (response.status === 401) { window.location = '/users/sign_in'; }
 }, this);
 
+
+Ext.define('app.view.form.field.TimeField', {
+    extend:'Ext.form.FieldContainer',
+    mixins:{
+        field:'Ext.form.field.Field'
+    },
+    alias: 'widget.xampmtime',
+
+    layout: 'hbox',
+    format: 'H:i:s',
+    submitFormat: 'H:i:s',
+
+    hourField: null,
+    minuteField: null,
+    ampmField: null,
+
+    /* custom configs & callbacks */
+
+    getValue: function(v){
+        hour = this.hourField.getValue();
+        minute = this.minuteField.getValue();
+        ampm = this.ampmField.getValue();
+        value = Ext.Date.parse(hour + " " + minute + " " + ampm, 'g i A');
+        value = Ext.Date.format(value, this.submitFormat);
+        return value;
+    },
+
+    getSubmitValue: function(value){
+        /* override function getValue() */
+        return this.getValue(value);
+    },
+
+    setValue: function(value){
+      if (Ext.isString(value) || Ext.isDate(value) ){
+        var dt = null;
+
+        if( Ext.isString ) {
+          dt = new Date(value);
+        }else{
+          dt = value;
+        }
+
+        hour = Ext.Date.format(dt, 'g');
+        minute = Ext.Date.format(dt, 'i');
+        ampm = Ext.Date.format(dt, 'A');
+
+        this.hourField.setValue(hour);
+        this.minuteField.setRawValue(minute);
+        this.ampmField.setValue(ampm);
+      }
+
+        /* override function setValue() */
+    },
+
+    initComponent: function(){
+        /* further code on event initComponent */
+        var me = this
+        me.items = me.items || [];
+
+        me.hourField = Ext.create('Ext.form.field.Number', {
+     //           maxWidth: 20,
+                allowBlank: false,
+                allowOnlyWhitespace: false,
+                blankText: "Hour cannot be blank.",
+                allowDecimals: false,
+                maxValue: 12,
+                minValue: 1,
+                maxLength: 2,
+                enforceMaxLength: 2,
+                hideTrigger: true,
+                submitValue:false,
+                flex:1,
+                //fieldStyle:     "text-align:right;",
+                isFormField:false, //exclude from field query's
+            });
+        me.items.push(me.hourField);
+
+        me.colon = Ext.create('Ext.draw.Text', {
+                text: ':',
+                padding: '3 3 0 3'
+          });
+        me.items.push(me.colon);
+
+        me.minuteField = Ext.create('Ext.form.field.Number', {
+    //            maxWidth: 20,
+                allowBlank: false,
+                allowOnlyWhitespace: false,
+                blankText: "Minutes cannot be blank.",
+                allowDecimals: false,
+                maxValue: 59,
+                minValue: 0,
+                maxLength: 2,
+                enforceMaxLength: 2,
+                hideTrigger: true,
+                submitValue:false,
+                flex:1,
+                isFormField:false, //exclude from field query's
+            });
+        me.items.push(me.minuteField);
+
+
+        me.ampmField = Ext.create('Ext.form.ComboBox', {
+              //maxWidth: 25,
+              value: 'PM',
+              store: ['AM', 'PM'],
+              forceSelection: true,
+              flex:1,
+              editable: false
+          });
+
+        me.items.push(me.ampmField);
+
+        me.callParent();
+
+        // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
+        this.inputEl = {
+            dom: document.createElement('div'),
+            swallowEvent:function(){}
+        };
+
+        me.initField();
+    },
+
+    focus:function(){
+        this.callParent(arguments);
+        this.hourField.focus();
+    },
+});
+
+
+
+
+Ext.define('Ext.ux.form.field.DateTime', {
+    extend:'Ext.form.FieldContainer',
+    mixins:{
+        field:'Ext.form.field.Field'
+    },
+    alias: 'widget.xdateampmtime',
+
+    //configurables
+
+    combineErrors: true,
+    msgTarget: 'under',
+    layout: 'hbox',
+    readOnly: false,
+
+    dateFormat: 'Y-m-d',
+    dateSubmitFormat: 'Y-m-d',
+    timeFormat: 'H:i:s',
+    timeSubmitFormat: 'H:i:s',
+    dateConfig:{},
+    timeConfig:{},
+
+
+    // properties
+
+    dateValue: null, // Holds the actual date
+
+    dateField: null,
+
+    timeField: null,
+
+    initComponent: function(){
+        var me = this
+            ,i = 0
+            ,key
+            ,tab;
+
+        me.items = me.items || [];
+
+        me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
+            format:me.dateFormat,
+            flex:1,
+            isFormField:false, //exclude from field query's
+            submitValue:false,
+            submitFormat: me.dateSubmitFormat,
+            readOnly: me.readOnly
+        }, me.dateConfig));
+        me.items.push(me.dateField);
+        
+
+        //me.timeField = Ext.create('Ext.form.field.Text', {width: 20});
+        me.timeField = Ext.create('app.view.form.field.TimeField');
+        me.items.push(me.timeField);
+
+        for (; i < me.items.length; i++) {
+            me.items[i].on('focus', Ext.bind(me.onItemFocus, me));
+            me.items[i].on('blur', Ext.bind(me.onItemBlur, me));
+            me.items[i].on('specialkey', function(field, event){
+                key = event.getKey();
+                tab = key == event.TAB;
+
+                if (tab && me.focussedItem == me.dateField) {
+                    event.stopEvent();
+                    me.timeField.focus();
+                    return;
+                }
+
+                me.fireEvent('specialkey', field, event);
+            });
+        }
+
+        me.callParent();
+
+        // this dummy is necessary because Ext.Editor will not check whether an inputEl is present or not
+        this.inputEl = {
+            dom: document.createElement('div'),
+            swallowEvent:function(){}
+        };
+
+        me.initField();
+    },
+
+    focus:function(){
+        this.callParent(arguments);
+        this.dateField.focus();
+    },
+
+    onItemFocus:function(item){
+        if (this.blurTask){
+            this.blurTask.cancel();
+        }
+        this.focussedItem = item;
+    },
+
+    onItemBlur:function(item, e){
+        var me = this;
+        if (item != me.focussedItem){ return; }
+        // 100ms to focus a new item that belongs to us, otherwise we will assume the user left the field
+        me.blurTask = new Ext.util.DelayedTask(function(){
+            me.fireEvent('blur', me, e);
+        });
+        me.blurTask.delay(100);
+    },
+
+    getValue: function(){
+        var value = null
+            ,date = this.dateField.getSubmitValue()
+            ,time = this.timeField.getSubmitValue()
+            ,format;
+        if (date){
+            if (time){
+                format = this.getFormat();
+                value = Ext.Date.parse(date + ' ' + time, format);
+            } else {
+                value = this.dateField.getValue();
+            }
+        }
+        return value;
+    },
+
+    getSubmitValue: function(){
+//        var value = this.getValue();
+//        return value ? Ext.Date.format(value, this.dateTimeFormat) : null;
+
+        var me = this
+            ,format = me.getFormat()
+            ,value = me.getValue();
+
+        return value ? Ext.Date.format(value, format) : null;
+    },
+
+    setValue: function(value){
+        if (Ext.isString(value)){
+            value = Ext.Date.parse(value, this.getFormat()); //this.dateTimeFormat
+            this.dateField.setValue(value);
+            this.timeField.setValue(value);
+        }
+    },
+
+    getFormat: function(){
+        value = (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format);
+        return value;
+    },
+
+    // Bug? A field-mixin submits the data from getValue, not getSubmitValue
+    getSubmitData: function(){
+        var me = this
+            ,data = null;
+
+        if (!me.disabled && me.submitValue && !me.isFileUpload()) {
+            data = {};
+            data[me.getName()] = '' + me.getSubmitValue();
+        }
+        return data;
+    }
+});
+
+
+
 Ext.define('Ext.ux.form.field.ColorCombo', {
     extend:'Ext.form.FieldContainer',
     mixins:{

app/components/bike_logs.rb

@@ -45,7 +45,7 @@ class BikeLogs < Netzke::Basepack::Grid
 
   def default_fields_for_forms
     [
-      { :name => :start_date},
+      { :name => :start_date, :xtype => 'xdateampmtime'},
       { :name => :description},
       #had to hack acts_as_loggable/log.rb to get this to work
       { :name => :bike_action__action, :field_label => 'Action', :min_chars => 1 }