netzke-basepack 0.3.10 → 0.4.0

data/CHANGELOG

@@ -1,3 +1,13 @@
+v0.4.0
+Rework: got rid of NetzkeFormPanelField and NetzkeGridPanelColumn classes along with their tables. The layout is now stored in netzke_preferences.
+New: dynamic hiding of columns from column menu in GridPanel.
+New: FormPanel now supports combo boxes.
+Fix: config[:bbar] set to 'false' now works in grids with pagination
+New: you can specify :preloaded => true in a tab config in TabPanel to preload the widget in that tab along with the TabPanel itself
+New: hideBusy added to Ext.StatusBar
+Fix: assigning association (a Boss to a Clerk) by virtual column (like boss__name) works now
+Fix: an old bug that made GridPanel misbehave after reordering the columns
+
 v0.3.10
 BasicApp-based widgets can now introduce arbitrary layout, following the convention of defining "main-panel" and "main-toolbar" panels with layout 'fit'.
 

data/Manifest

@@ -1,15 +1,10 @@
+autotest/discover.rb
 CHANGELOG
-generators/netzke_basepack/netzke_basepack_generator.rb
-generators/netzke_basepack/USAGE
-generators/netzke_form_panel/netzke_form_panel_generator.rb
-generators/netzke_form_panel/templates/create_netzke_form_panel_fields.rb
-generators/netzke_grid_panel/netzke_grid_panel_generator.rb
-generators/netzke_grid_panel/templates/create_netzke_grid_panel_columns.rb
 init.rb
 install.rb
 javascripts/basepack.js
-lib/app/models/netzke_form_panel_field.rb
-lib/app/models/netzke_grid_panel_column.rb
+lib/app/models/netzke_hash_record.rb
+lib/app/models/netzke_layout_item.rb
 lib/netzke/accordion_panel.rb
 lib/netzke/ar_ext.rb
 lib/netzke/basic_app.rb
@@ -17,11 +12,12 @@ lib/netzke/border_layout_panel.rb
 lib/netzke/configuration_tool.rb
 lib/netzke/container.rb
 lib/netzke/db_fields.rb
+lib/netzke/field_model.rb
 lib/netzke/fields_configurator.rb
+lib/netzke/fields_configurator_old.rb
 lib/netzke/form_panel.rb
 lib/netzke/form_panel_extras/interface.rb
 lib/netzke/form_panel_extras/javascripts/xcheckbox.js
-lib/netzke/form_panel_extras/javascripts/xdatetime.js
 lib/netzke/form_panel_extras/js_builder.rb
 lib/netzke/grid_panel.rb
 lib/netzke/grid_panel_extras/interface.rb
@@ -42,7 +38,6 @@ Rakefile
 README.rdoc
 stylesheets/basepack.css
 tasks/netzke_basepack_tasks.rake
-test/accordion_panel_test.rb
 test/app_root/app/controllers/application.rb
 test/app_root/app/models/book.rb
 test/app_root/app/models/category.rb
@@ -67,13 +62,10 @@ test/app_root/db/migrate/20081223025635_create_countries.rb
 test/app_root/db/migrate/20081223025653_create_continents.rb
 test/app_root/db/migrate/20081223025732_create_cities.rb
 test/app_root/db/migrate/20090102223630_create_netzke_layouts.rb
-test/app_root/db/migrate/20090102223811_create_netzke_grid_panel_columns.rb
 test/app_root/script/console
 test/app_root/vendor/plugins/acts_as_list/init.rb
 test/app_root/vendor/plugins/acts_as_list/lib/active_record/acts/list.rb
 test/app_root/vendor/plugins/acts_as_list/README
-test/ar_ext_test.rb
-test/border_layout_panel_test.rb
 test/console_with_fixtures.rb
 test/fixtures/books.yml
 test/fixtures/categories.yml
@@ -81,10 +73,14 @@ test/fixtures/cities.yml
 test/fixtures/continents.yml
 test/fixtures/countries.yml
 test/fixtures/genres.yml
-test/grid_panel_test.rb
-test/netzke_basepack_test.rb
 test/schema.rb
-test/tab_panel_test.rb
 test/test_helper.rb
+test/unit/accordion_panel_test.rb
+test/unit/ar_ext_test.rb
+test/unit/grid_panel_test.rb
+test/unit/netzke_basepack_test.rb
+test/unit/netzke_hash_record_test.rb
+test/unit/netzke_layout_item_test.rb
+test/unit/tab_panel_test.rb
 TODO
 uninstall.rb

data/Rakefile

@@ -5,7 +5,7 @@ Echoe.new("netzke-basepack") do |p|
   p.email = "sergei@writelesscode.com"
   p.summary = "Base Netzke widgets - grid, form, tree, and more"
   p.url = "http://writelesscode.com"
-  p.runtime_dependencies = ["searchlogic >=1.6.2", "netzke-core >= 0.2.11"]
+  p.runtime_dependencies = ["searchlogic >=1.6.2", "netzke-core >= 0.3.0"]
   p.development_dependencies = []
   p.test_pattern = 'test/**/*_test.rb'
 

data/TODO

@@ -1 +1,3 @@
-* GridPanel. Reordering of grid columns may lead to unpredictable results when data from an "outdated" table (e.g. open in another browser) gets submitted. A mechanism is needed to submit updated data along with the field names - as hash (as done is FormPanel), *not* as array.
+* GridPanel. Reordering of grid columns may lead to unpredictable results when data from an "outdated" table (e.g. open in another browser) gets submitted. A mechanism is needed to submit updated data along with the field names - as hash (as done is FormPanel), *not* as array.
+
+* Add status bar to BasicApp

data/autotest/discover.rb

@@ -0,0 +1,3 @@
+Autotest.add_discovery do
+  "rails"
+end

data/javascripts/basepack.js

@@ -1,61 +1,46 @@
 Ext.apply(Ext.History, new Ext.util.Observable());
 
-// Editors for grid cells and form fields
-Ext.netzke.editors = {
-  combo_box: function(c, config){
-    var row = Ext.data.Record.create([{name:'id'}])
+// A convenient passfield
+Ext.netzke.PassField = Ext.extend(Ext.form.TextField, {
+  inputType: 'password'
+});
+Ext.reg('passfield', Ext.netzke.PassField);
+
+// Combobox that knows to talk to the server side (used in both grids and panels)
+Ext.netzke.ComboBox = Ext.extend(Ext.form.ComboBox, {
+  mode          : 'remote',
+  displayField  : 'id',
+  valueField    : 'id',
+  triggerAction : 'all',
+  typeAhead     : true,
+  selectOnFocus : true,
+  
+  initComponent : function(){
+    var row = Ext.data.Record.create([{name:'id'}]);
+    // console.info(this.parentWidget);
     var store = new Ext.data.Store({
-      proxy         : new Ext.data.HttpProxy({url:config.interface.getCbChoices, jsonData:{column:c.name}}),
+      proxy         : new Ext.data.HttpProxy({url:this.parentConfig.interface.getCbChoices, jsonData:{column:this.fieldConfig.name}}),
       reader        : new Ext.data.ArrayReader({root:'data', id:0}, row)
-    })
+    });
     
-    var comboBox = new Ext.form.ComboBox({
-      mode          : 'remote',
-      displayField  : 'id',
-      valueField    : 'id',
-      triggerAction : 'all',
-      typeAhead     : true,
-      selectOnFocus : true,
-      store         : store
-    })
+    Ext.apply(this, {
+      store : store
+    });
+    
+    Ext.netzke.ComboBox.superclass.initComponent.apply(this, arguments);
     
-    // let user enter values that are not in the store
-    comboBox.on('blur', function(cb){
+    this.on('blur', function(cb){
       cb.setValue(cb.getRawValue());
     });
-    comboBox.on('specialkey', function(cb, event){
+
+    this.on('specialkey', function(cb, event){
       if (event.getKey() == 9 || event.getKey() == 13) {cb.setValue(cb.getRawValue());}
     });
-    
-    return comboBox;
-  },
-
-  text_field: function(c, config){
-    return new Ext.form.TextField({
-      selectOnFocus:true
-    })
-  },
-  
-  checkbox: function(c, config){
-    return new Ext.form.TextField({
-      selectOnFocus:true
-    })
-  },
-  
-  number_field: function(c, config){
-    return new Ext.form.NumberField({
-      selectOnFocus:true
-    })
-  },
-  
-  // TODO: it's simply a text field for now
-  datetime: function(c, config){
-    return new Ext.form.TextField({
-      selectOnFocus:true
-    })
   }
-};
+});
+Ext.reg('combobox', Ext.netzke.ComboBox);
 
+// TODO: rethink
 Ext.netzke.renderer = function(renderer, c, config){
   res = null; // null-renderer means "no renderer"
   
@@ -75,17 +60,26 @@ Ext.netzke.renderer = function(renderer, c, config){
   }
 
   return res
-}
+};
 
 // Mapping of editor field to grid filters
 Ext.netzke.filterMap = {
-  number_field:'Numeric',
-  text_field:'String',
-  datetime:'String',
+  numberfield:'Numeric',
+  textfield:'String',
+  xdatetime:'String',
   checkbox:'Boolean',
-  combo_box:'String',
+  combobox:'String',
   date:'Date'
-}
+};
+
+Ext.override(Ext.StatusBar, {
+  hideBusy : function(){
+    return this.setStatus({
+      text: this.defaultText,
+      iconCls: this.defaultIconCls
+    });
+  }
+});
 
 Ext.data.RecordArrayReader = Ext.extend(Ext.data.JsonReader, {
   /**
@@ -114,3 +108,637 @@ Ext.data.RecordArrayReader = Ext.extend(Ext.data.JsonReader, {
     return record;
   }
 });
+
+/**
+ * @class Ext.ux.form.DateTime
+ * @extends Ext.form.Field
+ *
+ * DateTime field, combination of DateField and TimeField
+ *
+ * @author      Ing. Jozef Sak�lo�
+ * @copyright (c) 2008, Ing. Jozef Sak�lo�
+ * @version   2.0
+ * @revision  $Id: Ext.ux.form.DateTime.js 513 2009-01-29 19:59:22Z jozo $
+ *
+ * @license Ext.ux.form.DateTime is licensed under the terms of
+ * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
+ * that the code/component(s) do NOT become part of another Open Source or Commercially
+ * licensed development library or toolkit without explicit permission.
+ * 
+ * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
+ * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
+ *
+ * @forum      22661
+ */
+
+Ext.ns('Ext.ux.form');
+
+/**
+ * @constructor
+ * Creates new DateTime
+ * @param {Object} config The config object
+ */
+Ext.ux.form.DateTime = Ext.extend(Ext.form.Field, {
+    /**
+     * @cfg {String/Object} defaultAutoCreate DomHelper element spec
+     * Let superclass to create hidden field instead of textbox. Hidden will be submittend to server
+     */
+     defaultAutoCreate:{tag:'input', type:'hidden'}
+    /**
+     * @cfg {Number} timeWidth Width of time field in pixels (defaults to 100)
+     */
+    ,timeWidth:80
+    /**
+     * @cfg {String} dtSeparator Date - Time separator. Used to split date and time (defaults to ' ' (space))
+     */
+    ,dtSeparator:' '
+    /**
+     * @cfg {String} hiddenFormat Format of datetime used to store value in hidden field
+     * and submitted to server (defaults to 'Y-m-d H:i:s' that is mysql format)
+     */
+    ,hiddenFormat:'Y-m-d H:i:s'
+    /**
+     * @cfg {Boolean} otherToNow Set other field to now() if not explicly filled in (defaults to true)
+     */
+    ,otherToNow:true
+    /**
+     * @cfg {Boolean} emptyToNow Set field value to now on attempt to set empty value.
+     * If it is true then setValue() sets value of field to current date and time (defaults to false)
+     */
+    /**
+     * @cfg {String} timePosition Where the time field should be rendered. 'right' is suitable for forms
+     * and 'below' is suitable if the field is used as the grid editor (defaults to 'right')
+     */
+    ,timePosition:'right' // valid values:'below', 'right'
+    /**
+     * @cfg {String} dateFormat Format of DateField. Can be localized. (defaults to 'm/y/d')
+     */
+    ,dateFormat:'m/d/y'
+    /**
+     * @cfg {String} timeFormat Format of TimeField. Can be localized. (defaults to 'g:i A')
+     */
+    ,timeFormat:'g:i A'
+    /**
+     * @cfg {Object} dateConfig Config for DateField constructor.
+     */
+    /**
+     * @cfg {Object} timeConfig Config for TimeField constructor.
+     */
+
+    // {{{
+    /**
+     * @private
+     * creates DateField and TimeField and installs the necessary event handlers
+     */
+    ,initComponent:function() {
+        // call parent initComponent
+        Ext.ux.form.DateTime.superclass.initComponent.call(this);
+
+        // create DateField
+        var dateConfig = Ext.apply({}, {
+             id:this.id + '-date'
+            ,format:this.dateFormat || Ext.form.DateField.prototype.format
+            ,width:this.timeWidth
+            ,selectOnFocus:this.selectOnFocus
+            ,listeners:{
+                  blur:{scope:this, fn:this.onBlur}
+                 ,focus:{scope:this, fn:this.onFocus}
+            }
+        }, this.dateConfig);
+        this.df = new Ext.form.DateField(dateConfig);
+        this.df.ownerCt = this;
+        delete(this.dateFormat);
+
+
+        // create TimeField
+        var timeConfig = Ext.apply({}, {
+             id:this.id + '-time'
+            ,format:this.timeFormat || Ext.form.TimeField.prototype.format
+            ,width:this.timeWidth
+            ,selectOnFocus:this.selectOnFocus
+            ,listeners:{
+                  blur:{scope:this, fn:this.onBlur}
+                 ,focus:{scope:this, fn:this.onFocus}
+            }
+        }, this.timeConfig);
+        this.tf = new Ext.form.TimeField(timeConfig);
+        this.tf.ownerCt = this;
+        delete(this.timeFormat);
+
+        // relay events
+        this.relayEvents(this.df, ['focus', 'specialkey', 'invalid', 'valid']);
+        this.relayEvents(this.tf, ['focus', 'specialkey', 'invalid', 'valid']);
+
+    } // eo function initComponent
+    // }}}
+    // {{{
+    /**
+     * @private
+     * Renders underlying DateField and TimeField and provides a workaround for side error icon bug
+     */
+    ,onRender:function(ct, position) {
+        // don't run more than once
+        if(this.isRendered) {
+            return;
+        }
+
+        // render underlying hidden field
+        Ext.ux.form.DateTime.superclass.onRender.call(this, ct, position);
+
+        // render DateField and TimeField
+        // create bounding table
+        var t;
+        if('below' === this.timePosition || 'bellow' === this.timePosition) {
+            t = Ext.DomHelper.append(ct, {tag:'table',style:'border-collapse:collapse',children:[
+                 {tag:'tr',children:[{tag:'td', style:'padding-bottom:1px', cls:'ux-datetime-date'}]}
+                ,{tag:'tr',children:[{tag:'td', cls:'ux-datetime-time'}]}
+            ]}, true);
+        }
+        else {
+            t = Ext.DomHelper.append(ct, {tag:'table',style:'border-collapse:collapse',children:[
+                {tag:'tr',children:[
+                    {tag:'td',style:'padding-right:4px', cls:'ux-datetime-date'},{tag:'td', cls:'ux-datetime-time'}
+                ]}
+            ]}, true);
+        }
+
+        this.tableEl = t;
+//        this.wrap = t.wrap({cls:'x-form-field-wrap'});
+        this.wrap = t.wrap();
+        this.wrap.on("mousedown", this.onMouseDown, this, {delay:10});
+
+        // render DateField & TimeField
+        this.df.render(t.child('td.ux-datetime-date'));
+        this.tf.render(t.child('td.ux-datetime-time'));
+
+        // workaround for IE trigger misalignment bug
+        if(Ext.isIE && Ext.isStrict) {
+            t.select('input').applyStyles({top:0});
+        }
+
+        this.on('specialkey', this.onSpecialKey, this);
+        this.df.el.swallowEvent(['keydown', 'keypress']);
+        this.tf.el.swallowEvent(['keydown', 'keypress']);
+
+        // create icon for side invalid errorIcon
+        if('side' === this.msgTarget) {
+            var elp = this.el.findParent('.x-form-element', 10, true);
+            this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
+
+            this.df.errorIcon = this.errorIcon;
+            this.tf.errorIcon = this.errorIcon;
+        }
+
+        // setup name for submit
+        this.el.dom.name = this.hiddenName || this.name || this.id;
+
+        // prevent helper fields from being submitted
+        this.df.el.dom.removeAttribute("name");
+        this.tf.el.dom.removeAttribute("name");
+
+        // we're rendered flag
+        this.isRendered = true;
+
+        // update hidden field
+        this.updateHidden();
+
+    } // eo function onRender
+    // }}}
+    // {{{
+    /**
+     * @private
+     */
+    ,adjustSize:Ext.BoxComponent.prototype.adjustSize
+    // }}}
+    // {{{
+    /**
+     * @private
+     */
+    ,alignErrorIcon:function() {
+        this.errorIcon.alignTo(this.tableEl, 'tl-tr', [2, 0]);
+    }
+    // }}}
+    // {{{
+    /**
+     * @private initializes internal dateValue
+     */
+    ,initDateValue:function() {
+        this.dateValue = this.otherToNow ? new Date() : new Date(1970, 0, 1, 0, 0, 0);
+    }
+    // }}}
+    // {{{
+    /**
+     * Calls clearInvalid on the DateField and TimeField
+     */
+    ,clearInvalid:function(){
+        this.df.clearInvalid();
+        this.tf.clearInvalid();
+    } // eo function clearInvalid
+    // }}}
+    // {{{
+    /**
+     * @private
+     * called from Component::destroy. 
+     * Destroys all elements and removes all listeners we've created.
+     */
+    ,beforeDestroy:function() {
+        if(this.isRendered) {
+//            this.removeAllListeners();
+            this.wrap.removeAllListeners();
+            this.wrap.remove();
+            this.tableEl.remove();
+            this.df.destroy();
+            this.tf.destroy();
+        }
+    } // eo function beforeDestroy
+    // }}}
+    // {{{
+    /**
+     * Disable this component.
+     * @return {Ext.Component} this
+     */
+    ,disable:function() {
+        if(this.isRendered) {
+            this.df.disabled = this.disabled;
+            this.df.onDisable();
+            this.tf.onDisable();
+        }
+        this.disabled = true;
+        this.df.disabled = true;
+        this.tf.disabled = true;
+        this.fireEvent("disable", this);
+        return this;
+    } // eo function disable
+    // }}}
+    // {{{
+    /**
+     * Enable this component.
+     * @return {Ext.Component} this
+     */
+    ,enable:function() {
+        if(this.rendered){
+            this.df.onEnable();
+            this.tf.onEnable();
+        }
+        this.disabled = false;
+        this.df.disabled = false;
+        this.tf.disabled = false;
+        this.fireEvent("enable", this);
+        return this;
+    } // eo function enable
+    // }}}
+    // {{{
+    /**
+     * @private Focus date filed
+     */
+    ,focus:function() {
+        this.df.focus();
+    } // eo function focus
+    // }}}
+    // {{{
+    /**
+     * @private
+     */
+    ,getPositionEl:function() {
+        return this.wrap;
+    }
+    // }}}
+    // {{{
+    /**
+     * @private
+     */
+    ,getResizeEl:function() {
+        return this.wrap;
+    }
+    // }}}
+    // {{{
+    /**
+     * @return {Date/String} Returns value of this field
+     */
+    ,getValue:function() {
+        // create new instance of date
+        return this.dateValue ? new Date(this.dateValue) : '';
+    } // eo function getValue
+    // }}}
+    // {{{
+    /**
+     * @return {Boolean} true = valid, false = invalid
+     * @private Calls isValid methods of underlying DateField and TimeField and returns the result
+     */
+    ,isValid:function() {
+        return this.df.isValid() && this.tf.isValid();
+    } // eo function isValid
+    // }}}
+    // {{{
+    /**
+     * Returns true if this component is visible
+     * @return {boolean} 
+     */
+    ,isVisible : function(){
+        return this.df.rendered && this.df.getActionEl().isVisible();
+    } // eo function isVisible
+    // }}}
+    // {{{
+    /** 
+     * @private Handles blur event
+     */
+    ,onBlur:function(f) {
+        // called by both DateField and TimeField blur events
+
+        // revert focus to previous field if clicked in between
+        if(this.wrapClick) {
+            f.focus();
+            this.wrapClick = false;
+        }
+
+        // update underlying value
+        if(f === this.df) {
+            this.updateDate();
+        }
+        else {
+            this.updateTime();
+        }
+        this.updateHidden();
+
+        // fire events later
+        (function() {
+            if(!this.df.hasFocus && !this.tf.hasFocus) {
+                var v = this.getValue();
+                if(String(v) !== String(this.startValue)) {
+                    this.fireEvent("change", this, v, this.startValue);
+                }
+                this.hasFocus = false;
+                this.fireEvent('blur', this);
+            }
+        }).defer(100, this);
+
+    } // eo function onBlur
+    // }}}
+    // {{{
+    /**
+     * @private Handles focus event
+     */
+    ,onFocus:function() {
+        if(!this.hasFocus){
+            this.hasFocus = true;
+            this.startValue = this.getValue();
+            this.fireEvent("focus", this);
+        }
+    }
+    // }}}
+    // {{{
+    /**
+     * @private Just to prevent blur event when clicked in the middle of fields
+     */
+    ,onMouseDown:function(e) {
+        if(!this.disabled) {
+            this.wrapClick = 'td' === e.target.nodeName.toLowerCase();
+        }
+    }
+    // }}}
+    // {{{
+    /**
+     * @private
+     * Handles Tab and Shift-Tab events
+     */
+    ,onSpecialKey:function(t, e) {
+        var key = e.getKey();
+        if(key === e.TAB) {
+            if(t === this.df && !e.shiftKey) {
+                e.stopEvent();
+                this.tf.focus();
+            }
+            if(t === this.tf && e.shiftKey) {
+                e.stopEvent();
+                this.df.focus();
+            }
+        }
+        // otherwise it misbehaves in editor grid
+        if(key === e.ENTER) {
+            this.updateValue();
+        }
+
+    } // eo function onSpecialKey
+    // }}}
+    // {{{
+    /**
+     * @private Sets the value of DateField
+     */
+    ,setDate:function(date) {
+        this.df.setValue(date);
+    } // eo function setDate
+    // }}}
+    // {{{
+    /** 
+     * @private Sets the value of TimeField
+     */
+    ,setTime:function(date) {
+        this.tf.setValue(date);
+    } // eo function setTime
+    // }}}
+    // {{{
+    /**
+     * @private
+     * Sets correct sizes of underlying DateField and TimeField
+     * With workarounds for IE bugs
+     */
+    ,setSize:function(w, h) {
+        if(!w) {
+            return;
+        }
+        if('below' === this.timePosition) {
+            this.df.setSize(w, h);
+            this.tf.setSize(w, h);
+            if(Ext.isIE) {
+                this.df.el.up('td').setWidth(w);
+                this.tf.el.up('td').setWidth(w);
+            }
+        }
+        else {
+            this.df.setSize(w - this.timeWidth - 4, h);
+            this.tf.setSize(this.timeWidth, h);
+
+            if(Ext.isIE) {
+                this.df.el.up('td').setWidth(w - this.timeWidth - 4);
+                this.tf.el.up('td').setWidth(this.timeWidth);
+            }
+        }
+    } // eo function setSize
+    // }}}
+    // {{{
+    /**
+     * @param {Mixed} val Value to set
+     * Sets the value of this field
+     */
+    ,setValue:function(val) {
+        if(!val && true === this.emptyToNow) {
+            this.setValue(new Date());
+            return;
+        }
+        else if(!val) {
+            this.setDate('');
+            this.setTime('');
+            this.updateValue();
+            return;
+        }
+        if ('number' === typeof val) {
+          val = new Date(val);
+        }
+        else if('string' === typeof val && this.hiddenFormat) {
+            val = Date.parseDate(val, this.hiddenFormat)
+        }
+        val = val ? val : new Date(1970, 0 ,1, 0, 0, 0);
+        var da, time;
+        if(val instanceof Date) {
+            this.setDate(val);
+            this.setTime(val);
+            this.dateValue = new Date(val);
+        }
+        else {
+            da = val.split(this.dtSeparator);
+            this.setDate(da[0]);
+            if(da[1]) {
+                if(da[2]) {
+                    // add am/pm part back to time
+                    da[1] += da[2];
+                }
+                this.setTime(da[1]);
+            }
+        }
+        this.updateValue();
+    } // eo function setValue
+    // }}}
+    // {{{
+    /**
+     * Hide or show this component by boolean
+     * @return {Ext.Component} this
+     */
+    ,setVisible: function(visible){
+        if(visible) {
+            this.df.show();
+            this.tf.show();
+        }else{
+            this.df.hide();
+            this.tf.hide();
+        }
+        return this;
+    } // eo function setVisible
+    // }}}
+    //{{{
+    ,show:function() {
+        return this.setVisible(true);
+    } // eo function show
+    //}}}
+    //{{{
+    ,hide:function() {
+        return this.setVisible(false);
+    } // eo function hide
+    //}}}
+    // {{{
+    /**
+     * @private Updates the date part
+     */
+    ,updateDate:function() {
+
+        var d = this.df.getValue();
+        if(d) {
+            if(!(this.dateValue instanceof Date)) {
+                this.initDateValue();
+                if(!this.tf.getValue()) {
+                    this.setTime(this.dateValue);
+                }
+            }
+            this.dateValue.setMonth(0); // because of leap years
+            this.dateValue.setFullYear(d.getFullYear());
+            this.dateValue.setMonth(d.getMonth(), d.getDate());
+//            this.dateValue.setDate(d.getDate());
+        }
+        else {
+            this.dateValue = '';
+            this.setTime('');
+        }
+    } // eo function updateDate
+    // }}}
+    // {{{
+    /**
+     * @private
+     * Updates the time part
+     */
+    ,updateTime:function() {
+        var t = this.tf.getValue();
+        if(t && !(t instanceof Date)) {
+            t = Date.parseDate(t, this.tf.format);
+        }
+        if(t && !this.df.getValue()) {
+            this.initDateValue();
+            this.setDate(this.dateValue);
+        }
+        if(this.dateValue instanceof Date) {
+            if(t) {
+                this.dateValue.setHours(t.getHours());
+                this.dateValue.setMinutes(t.getMinutes());
+                this.dateValue.setSeconds(t.getSeconds());
+            }
+            else {
+                this.dateValue.setHours(0);
+                this.dateValue.setMinutes(0);
+                this.dateValue.setSeconds(0);
+            }
+        }
+    } // eo function updateTime
+    // }}}
+    // {{{
+    /**
+     * @private Updates the underlying hidden field value
+     */
+    ,updateHidden:function() {
+        if(this.isRendered) {
+            var value = this.dateValue instanceof Date ? this.dateValue.format(this.hiddenFormat) : '';
+            this.el.dom.value = value;
+        }
+    }
+    // }}}
+    // {{{
+    /**
+     * @private Updates all of Date, Time and Hidden
+     */
+    ,updateValue:function() {
+
+        this.updateDate();
+        this.updateTime();
+        this.updateHidden();
+
+        return;
+    } // eo function updateValue
+    // }}}
+    // {{{
+    /**
+     * @return {Boolean} true = valid, false = invalid
+     * calls validate methods of DateField and TimeField
+     */
+    ,validate:function() {
+        return this.df.validate() && this.tf.validate();
+    } // eo function validate
+    // }}}
+    // {{{
+    /**
+     * Returns renderer suitable to render this field
+     * @param {Object} Column model config
+     */
+    ,renderer: function(field) {
+        var format = field.editor.dateFormat || Ext.ux.form.DateTime.prototype.dateFormat;
+        format += ' ' + (field.editor.timeFormat || Ext.ux.form.DateTime.prototype.timeFormat);
+        var renderer = function(val) {
+            var retval = Ext.util.Format.date(val, format);
+            return retval;
+        };
+        return renderer;
+    } // eo function renderer
+    // }}}
+
+}); // eo extend
+
+// register xtype
+Ext.reg('xdatetime', Ext.ux.form.DateTime);
+
+// eof