1. #1
    Sencha User atian25's Avatar
    Join Date
    Oct 2008
    Location
    china
    Posts
    114
    Vote Rating
    2
    atian25 is on a distinguished road

      1  

    Default Ext.ux.form.field.DateTime

    Ext.ux.form.field.DateTime




    it's a beta version, and some question: (help~plz)
    1.if i don't set width/height, then DateTime in toolbar is missing
    2. cant show correct width in RowEditing plugin


    Code:
    Ext.define('Ext.ux.form.field.DateTime', {
        extend:'Ext.form.FieldContainer',
        mixins: {
            field: 'Ext.form.field.Field'
        },
        alias: 'widget.datetimefield',
        layout: 'hbox',
        width: 200,
        height: 22,
        combineErrors: true,
        msgTarget :'side',
        
        dateCfg:{},
        timeCfg:{},
        
        initComponent: function() {
            var me = this;
            me.buildField();
            me.callParent();
            this.dateField = this.down('datefield')
            this.timeField = this.down('timefield')
            me.initField();
        },
        
        //@private
        buildField: function(){
            this.items = [
                Ext.apply({
    	            xtype: 'datefield',
    	            format: 'Y-m-d',
    	            width: 100
    	        },this.dateCfg),
    	        Ext.apply({
    	            xtype: 'timefield',
    	            format: 'H:i',
    	            width: 80
    	        },this.timeCfg)
            ]
        },
        
        getValue: function() {
            var value,date = this.dateField.getSubmitValue(),time = this.timeField.getSubmitValue();
            if(date){
                if(time){
                    var format = this.getFormat()
                    value = Ext.Date.parse(date + ' ' + time,format)
                }else{
                    value = this.dateField.getValue()
                }
            }
            return value
        },
        
        setValue: function(value){
            this.dateField.setValue(value)
            this.timeField.setValue(value)
        },
        
        getSubmitData: function(){
            var value = this.getValue()
            var format = this.getFormat()
            return value ? Ext.Date.format(value, format) : null;
        },
        
        getFormat: function(){
            return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
        }
    })
    Attached Images
    @from: china
    @web: http://atian25.iteye.com
    @extensions: (extjs 4.x)
    * Ext.ux.grid.plugin.RowEditing - add some usefull features (v1.4 updated 2011-09-11)
    * Ext.ux.button.AutoRefresher
    * Ext.ux.form.field.DateTime

  2. #2
    Sencha User atian25's Avatar
    Join Date
    Oct 2008
    Location
    china
    Posts
    114
    Vote Rating
    2
    atian25 is on a distinguished road

      0  

    Default


    anyone could help? thanks
    @from: china
    @web: http://atian25.iteye.com
    @extensions: (extjs 4.x)
    * Ext.ux.grid.plugin.RowEditing - add some usefull features (v1.4 updated 2011-09-11)
    * Ext.ux.button.AutoRefresher
    * Ext.ux.form.field.DateTime

  3. #3
    Sencha User
    Join Date
    May 2010
    Posts
    171
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    This extension works well for what I needed in a form, however I'm having trouble setting the value of the fields. My form is bound to a grid and the model for my store has a value defined like this

    Code:
    {name: 'pubDate',
    mapping: 'pubDate'
    }
    when I select a record in the grid the datetimefield does not display the value. the value in the record is like this : "pubDate":"2011-06-26 01:00:00"

    what am I doing wrong?

  4. #4
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    253
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default


    Thanks for this code! I've taken the liberty to extend the code a bit, but be careful, it has not been tested very much till now.

    Added features:
    - A button to set "now" and clear the value (set btnNowText:'' to hide the button).
    - A dateTimeFormat which makes the submitted value format more flexible. It's also used as the input for setValue (@Dmoney: Does this solve your problem?).

    There are 3 known issues:
    - The button width changes when the button text changes which looks a bit strange in my eyes (Any idea how to make the button stay on the widest width concerning both possible texts)?
    - I'm not quite sure if this getSubmitData-thing is a bug.
    - The readOnly-config doesn't work so far.

    Code:
    Ext.namespace('Ext.ux.form');
    
    Ext.define('Ext.ux.form.DateTime', 
    {
        extend:'Ext.form.FieldContainer'
        ,mixins: 
        {    field: 'Ext.form.field.Field'
        }
        ,alias: 'widget.xdatetime'
            
        ,combineErrors: true
        ,msgTarget: 'under'
        
        ,layout: 'hbox'
        ,dateFormat: 'Y-m-d',
        ,timeFormat: 'H:i:s'
        ,dateTimeFormat: 'Y-m-d H:i:s'
        ,dateCfg:{}
        ,timeCfg:{}
        ,btnCfg:{}
            
        ,btnNowText: 'Set now'
        ,btnClearText: 'Clear'
    
        ,readOnly: false // ReadOnly
        
        // internal
        ,dateValue: null // Holds the actual date  
        ,dateField: null
        ,timeField: null
        ,btnField: null
    
        ,initComponent: function()
        {    var me = this;        
            me.items = me.itmes || [];
            me.items.push(Ext.apply(
            {    xtype: 'datefield',
                 format: me.dateFormat,
                 flex: 1,
                 submitValue: false,
                 listeners:
                {    change: Ext.bind(this.onChange, this)           
                }
             }, me.dateCfg));
            me.items.push(Ext.apply(
            {    xtype: 'timefield',
                format: me.timeFormat,
                flex: 1,
                submitValue: false,
                 listeners:
                 {    change: Ext.bind(this.onChange, this)    
                 }
            }, me.timeCfg));
            
            if (me.btnNowText && !me.readOnly)
            {    me.items.push(
                    Ext.apply(
                    {    xtype: 'button',
                        text: me.btnNowText,
                        flex: 0,
                        autoWidth: false,                    
                        handler: Ext.bind(this.onBtnClick, this)
                    })
                );
            }
        
            me.callParent();
            
            me.dateField = me.down('datefield');
            me.timeField = me.down('timefield');
            me.btnField = me.down('button');
               me.initField();
        }
     
        ,getValue: function() 
        {     var value = null,
                    date = this.dateField.getSubmitValue(),
                    time = this.timeField.getSubmitValue();
    
            if(date)
            {    if(time)
                {    var 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;
        }
     
        ,setValue: function(value) 
        {    if (Ext.isString(value))
            {    value = Ext.Date.parse(value, this.dateTimeFormat);
            }
            this.dateField.setValue(value);
            this.timeField.setValue(value);
        }
        
        ,getFormat: function()
        {    return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format)
        }
        
        ,updateBtn: function()
        {    if (!this.btnField) return;
            if (this.getSubmitValue() === null)
            {    this.btnField.setText(this.btnNowText);
            }
            else
            {    this.btnField.setText(this.btnClearText);
            }
        }
        
        ,onBtnClick: function(btn, e)
        {    if (this.getSubmitValue() == null)
            {    this.setValue(new Date());
            }
            else
            {    this.setValue(null);
            }
        }
        
        ,onChange: function( field, newValue, oldValue, options )
        {    this.updateBtn();        
        }
        
        // 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;
               }
    });

  5. #5
    Sencha User
    Join Date
    May 2010
    Posts
    171
    Vote Rating
    1
    Dmoney is on a distinguished road

      0  

    Default


    @ontho

    Thanks for posting your your code. Your changes fixed my problem and everything is working great! The clear button and Set Now feature is a great addition as well. Thanks Again!

  6. #6
    Sencha User jonaldomo's Avatar
    Join Date
    May 2011
    Location
    Kansas City, MO
    Posts
    47
    Vote Rating
    0
    jonaldomo is on a distinguished road

      0  

    Default


    Both versions I get the errors:
    • Uncaught TypeError: Object [object Object] has no method 'getDesiredWidth'
    • Uncaught TypeError: Cannot call method 'setStyle' of undefined

    I am using 4.0.2a, any thoughts?

    Thanks in advanced.

  7. #7
    Ext JS Premium Member
    Join Date
    Jun 2011
    Posts
    253
    Vote Rating
    7
    ontho is on a distinguished road

      0  

    Default


    I am using 4.0.2a as well and it's working - could you perhaps post a code which reproduces the errors?

  8. #8
    Sencha User
    Join Date
    Feb 2008
    Posts
    3
    Vote Rating
    0
    jakob.ketterl is on a distinguished road

      0  

    Default


    i've worked a little on this to get it to display in a cell editing grid under 4.0.2

    i've stripped out the button since i didn't need it and it only caused me pain, sorry for that

    it's most probably not perfect, but maybe this will be of use to somebody.
    here's the code:

    Code:
    Ext.define('Ext.ux.form.field.DateTime', 
    {
        extend:'Ext.form.FieldContainer',
        mixins:{    
            field:'Ext.form.field.Field'
        },
        alias: 'widget.xdatetime',
            
        combineErrors: true,
        msgTarget: 'under',
        
        layout: 'hbox',
        dateFormat: 'Y-m-d',
        timeFormat: 'H:i:s',
        dateTimeFormat: 'Y-m-d H:i:s',
        dateCfg:{},
        timeCfg:{},
    
        readOnly: false,
        
        // internal
        dateValue: null, // Holds the actual date  
        dateField: null,
        timeField: null,
    
        initComponent: function(){
            var me = this;        
            me.items = me.itmes || [];
            
            me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
                format:me.dateFormat,
                flex:1,
                submitValue:false
            }, me.dateCfg));
            me.items.push(me.dateField);
            
            me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
                format:me.timeFormat,
                flex:1,
                submitValue:false
            }, me.timeCfg));
            me.items.push(me.timeField);
            
            for (var i = 0; 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){
                    var 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:{},
                    swallowEvent:function(){}
            };
            
            me.initField();
        },
        
        focus:function(){
            this.callParent();
            this.dateField.focus();
        },
    
        onItemFocus:function(item){
            if (this.blurTask) this.blurTask.cancel();
            this.focussedItem = item;
        },
        
        onItemBlur:function(item){
            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);
            });
            me.blurTask.delay(100);
        },
        
        getValue: function(){
            var value = null,
                date = this.dateField.getSubmitValue(),
                time = this.timeField.getSubmitValue();
    
            if(date)
            {
                if(time)
                {
                    var 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;
        },
     
        setValue: function(value){    
            if (Ext.isString(value))
            {
                value = Ext.Date.parse(value, this.dateTimeFormat);
            }
            this.dateField.setValue(value);
            this.timeField.setValue(value);
        },
        
        getFormat: function(){
            return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format);
        },
        
        // 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;
        }
    });

  9. #9
    Sencha User jonaldomo's Avatar
    Join Date
    May 2011
    Location
    Kansas City, MO
    Posts
    47
    Vote Rating
    0
    jonaldomo is on a distinguished road

      0  

    Default


    Quote Originally Posted by ontho View Post
    I am using 4.0.2a as well and it's working - could you perhaps post a code which reproduces the errors?
    I discovered that my problem was that I was using CellEditing. Once I switched to RowEditing it worked fine. Any simple fix to make it work with CellEditing?

    I receive the error:
    Uncaught TypeError: Cannot read property 'dom' of undefined

  10. #10
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    627
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default Minor tweaks + docs

    Minor tweaks + docs


    * fixed the "itmes" spelling error.
    * renamed dateCfg/timeCfg to dateConfig/timeConfig for consistency with Ext framework.
    * added class/config docs.

    Code:
    /**
     * @class Ext.ux.form.field.DateTime
     * @extends Ext.form.FieldContainer
     * @author atian25 (http://www.sencha.com/forum/member.php?51682-atian25)
     * @author ontho (http://www.sencha.com/forum/member.php?285806-ontho)
     * @author jakob.ketterl (http://www.sencha.com/forum/member.php?25102-jakob.ketterl)
     */
    Ext.define('Ext.ux.form.field.DateTime', {
        extend:'Ext.form.FieldContainer',
        mixins:{    
            field:'Ext.form.field.Field'
        },
        alias: 'widget.xdatetime',
            
        //configurables
        
        combineErrors: true,
        msgTarget: 'under',    
        layout: 'hbox',
        readOnly: false,
        
        /**
         * @cfg {String} dateFormat
         * The default is 'Y-m-d'
         */
        dateFormat: 'Y-m-d',
        /**
         * @cfg {String} timeFormat
         * The default is 'H:i:s'
         */
        timeFormat: 'H:i:s',
        /**
         * @cfg {String} dateTimeFormat
         * The format used when submitting the combined value.
         * Defaults to 'Y-m-d H:i:s'
         */
        dateTimeFormat: 'Y-m-d H:i:s',
        /**
         * @cfg {Object} dateConfig
         * Additional config options for the date field.
         */
        dateConfig:{},
        /**
         * @cfg {Object} timeConfig
         * Additional config options for the time field.
         */
        timeConfig:{},
    
        
        // properties
        
        dateValue: null, // Holds the actual date
        /**
         * @property dateField
         * @type Ext.form.field.Date
         */
        dateField: null,
        /**
         * @property timeField
         * @type Ext.form.field.Time
         */
        timeField: null,
    
        initComponent: function(){
            var me = this;        
            me.items = me.items || [];
            
            me.dateField = Ext.create('Ext.form.field.Date', Ext.apply({
                format:me.dateFormat,
                flex:1,
                submitValue:false
            }, me.dateConfig));
            me.items.push(me.dateField);
            
            me.timeField = Ext.create('Ext.form.field.Time', Ext.apply({
                format:me.timeFormat,
                flex:1,
                submitValue:false
            }, me.timeConfig));
            me.items.push(me.timeField);
            
            for (var i = 0; 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){
                    var 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:{},
                swallowEvent:function(){}
            };
            
            me.initField();
        },
        
        focus:function(){
            this.callParent();
            this.dateField.focus();
        },
    
        onItemFocus:function(item){
            if (this.blurTask) this.blurTask.cancel();
            this.focussedItem = item;
        },
        
        onItemBlur:function(item){
            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);
            });
            me.blurTask.delay(100);
        },
        
        getValue: function(){
            var value = null,
                date = this.dateField.getSubmitValue(),
                time = this.timeField.getSubmitValue();
    
            if(date)
            {
                if(time)
                {
                    var 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;
        },
     
        setValue: function(value){    
            if (Ext.isString(value))
            {
                value = Ext.Date.parse(value, this.dateTimeFormat);
            }
            this.dateField.setValue(value);
            this.timeField.setValue(value);
        },
        
        getFormat: function(){
            return (this.dateField.submitFormat || this.dateField.format) + " " + (this.timeField.submitFormat || this.timeField.format);
        },
        
        // 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;
        }
    });
    
    //eo file

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi