1. #31
    Sencha User
    Join Date
    Jan 2011
    Posts
    1
    Vote Rating
    0
    liliang268 is on a distinguished road

      0  

    Default IE7,IE8 BUG TEST

    IE7,IE8 BUG TEST


    this plugin display Normal on Chrome ,but on ie7,ie8 ,ie9 display
    1.jpg, Ask for help

  2. #32
    Sencha User
    Join Date
    Sep 2010
    Posts
    1
    Vote Rating
    0
    fzhu is on a distinguished road

      0  

    Default


    thanks,谢了哥们儿

  3. #33
    Sencha Premium Member
    Join Date
    Sep 2012
    Location
    Argentina
    Posts
    34
    Vote Rating
    1
    grpbhb is on a distinguished road

      0  

    Default


    I have a problem with Extj 4.1.1
    Tested in Chrome 21.0.1180.89 m
    Uncaught TypeError: Cannot read property 'dom' of null


    TimePickerField.js:111
    Code:
    {    
                        xtype: 'timepickerfield',
                        name:'fechaNac'
                    },
    Code:
    callSpinnersFunction: function(funName, args) {
              for(var i = 0; i < this.spinners.length; i++) {
                  this.spinners[i][funName](args);
              }
          }
    The fix:
    Code:
    spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0 ->4.1 div->td
    		  if (!spinnerWrapDom ) {
    			spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[0];
    		  }

  4. #34
    Sencha User
    Join Date
    Dec 2011
    Posts
    24
    Vote Rating
    1
    Cine is on a distinguished road

      1  

    Default


    Datetimepicker needs an override for the selected date to have the right class (atleast in 4.1.1).

    Code:
     selectedUpdate: function (date) {
      this.callParent([Ext.Date.clearTime(date, true)]);
     }

  5. #35
    Sencha User
    Join Date
    Aug 2011
    Posts
    1
    Vote Rating
    0
    bfttt999 is on a distinguished road

      0  

    Default Very good

    Very good


    It's very good! Thank you!

  6. #36
    Sencha User
    Join Date
    Dec 2011
    Posts
    24
    Vote Rating
    1
    Cine is on a distinguished road

      0  

    Default


    And here is TimePicker version with AM/PM selector. It will be added automatically if it is in the timeFormat. Same with seconds selector, which is now only shown if it is in the timeFormat. (Notice timeformat parsing is extremely basic)

    Code:
    /**
     * 时间输入框, 三个整数框分别输入时,分,秒.
     * @author wangzilong
     * update Ext - 4.1 2012/04/27
     */
    Ext.define('Cg.ux.form.field.TimePicker', {
     extend: 'Ext.form.field.Base',
     alias: 'widget.timepicker',
     requires: ['Ext.form.field.Number'],
    
     timeFormat: 'H:i:s',
    
     // 隐藏BaseField的输入框 , hidden basefield's input
     inputType: 'hidden',
    
     style: 'padding:4px 0 0 0;margin-bottom:0px',
    
     /**
     * @cfg {String} value
     * initValue, format: 'H:i:s'
     */
     value: null,
    
     /**
     * @cfg {Object} spinnerCfg
     * 数字输入框参数, number input config
     */
     spinnerCfg: {
      width: 40
     },
    
     /** Override. */
     initComponent: function () {
      var me = this;
    
      me.value = me.value || Ext.Date.format(new Date(), me.timeFormat);
    
      me.callParent(); // called setValue
    
      var cfg = Ext.apply({}, me.spinnerCfg, {
       readOnly: me.readOnly,
       disabled: me.disabled,
       style: 'float: left',
       listeners: {
        change: {
         fn: me.onSpinnerChange,
         scope: me
        }
       }
      });
    
      me.hoursSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
       minValue: 0,
       maxValue: me.timeFormat.toLowerCase().indexOf("a") >= 0 ? 11 : 23
      }));
      me.minutesSpinner = Ext.create('Ext.form.field.Number', Ext.apply({}, cfg, {
       minValue: 0,
       maxValue: 59
      }));
      if (me.timeFormat.toLowerCase().indexOf("s") >= 0) {
       me.secondsSpinner = Ext.create('Ext.form.field.Number', Ext.apply({ }, cfg, {
        minValue: 0,
        maxValue: 59
       }));
      }
      if (me.timeFormat.toLowerCase().indexOf("a") >= 0) {
       var ampm = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data: [
         { "abbr": "AM", "name": "AM" },
         { "abbr": "PM", "name": "PM" }
        ]
       });
    
       // Create the combo box, attached to the states data store
       me.ampm = Ext.create('Ext.form.ComboBox', {
        store: ampm,
        readOnly: me.readOnly,
        disabled: me.disabled,
        queryMode: 'local',
        displayField: 'name',
        valueField: 'abbr',
        width: 50,
        style: 'float: right',
        listeners: {
         select: {
          fn: me.onSpinnerChange,
          scope: me
         }
        }
       });
      }
      me.spinners = [me.hoursSpinner, me.minutesSpinner];
      if (me.secondsSpinner)
       me.spinners.push(me.secondsSpinner);
      if (me.ampm)
       me.spinners.push(me.ampm);
    
     },
     /**
     * @private
     * Override.
     */
     onRender: function () {
      var me = this, spinnerWrapDom, spinnerWrap;
      me.callParent(arguments);
    
      // render to original BaseField input td
      // spinnerWrap = Ext.get(Ext.DomQuery.selectNode('div', this.el.dom)); // 4.0.2
      spinnerWrapDom = Ext.dom.Query.select('td', this.getEl().dom)[1]; // 4.0 ->4.1 div->td
      spinnerWrap = Ext.get(spinnerWrapDom);
      me.callSpinnersFunction('render', spinnerWrap);
    
      Ext.core.DomHelper.append(spinnerWrap, {
       tag: 'div',
       cls: 'x-form-clear-left'
      });
    
      this.setRawValue(this.value);
     },
    
     _valueSplit: function (v) {
      if (Ext.isDate(v)) {
       v = Ext.Date.format(v, this.timeFormat);
      }
      var split = Ext.Date.parse(v, this.timeFormat);
      return {
       h: split.getHours(),
       m: split.getMinutes(),
       s: split.getSeconds()
      };
     },
     onSpinnerChange: function () {
      if (!this.rendered) {
       return;
      }
      this.fireEvent('change', this, this.getValue(), this.getRawValue());
     },
     // 依次调用各输入框函数, call each spinner's function
     callSpinnersFunction: function (funName, args) {
      for (var i = 0; i < this.spinners.length; i++) {
       this.spinners[i][funName](args);
      }
     },
     // @private get time as object,
     getRawValue: function () {
      var me = this;
      if (!me.rendered) {
       var date = me.value || new Date();
       return me._valueSplit(date);
      } else {
       return {
        h: me.ampm && me.ampm.getValue() == "PM" ? me.hoursSpinner.getValue() + 12 : me.hoursSpinner.getValue(),
        m: me.minutesSpinner.getValue(),
        s: me.secondsSpinner ? me.secondsSpinner.getValue() : 0
       };
      }
     },
    
     // private
     setRawValue: function (value) {
      var me = this;
      value = me._valueSplit(value);
      if (me.hoursSpinner) {
       if (me.ampm) {
        if (value.h >= 12) {
         me.ampm.setValue("PM");
         value.h = value.h - 12;
        } else
         me.ampm.setValue("AM");
       }
       me.hoursSpinner.setValue(value.h);
       me.minutesSpinner.setValue(value.m);
       if (me.secondsSpinner) me.secondsSpinner.setValue(value.s);
      }
     },
     // overwrite
     getValue: function () {
      var v = this.getRawValue();
      return Ext.String.leftPad(v.h, 2, '0') + ':' + Ext.String.leftPad(v.m, 2, '0') + ':'
                + Ext.String.leftPad(v.s, 2, '0');
     },
     // overwrite
     setValue: function (value) {
      this.value = Ext.isDate(value) ? Ext.Date.format(value, this.timeFormat) : value;
      if (!this.rendered) {
       return;
      }
      this.setRawValue(this.value);
      this.validate();
     },
     // overwrite
     disable: function () {
      this.callParent(arguments);
      this.callSpinnersFunction('disable', arguments);
     },
     // overwrite
     enable: function () {
      this.callParent(arguments);
      this.callSpinnersFunction('enable', arguments);
     },
     // overwrite
     setReadOnly: function () {
      this.callParent(arguments);
      this.callSpinnersFunction('setReadOnly', arguments);
     },
     // overwrite
     clearInvalid: function () {
      this.callParent(arguments);
      this.callSpinnersFunction('clearInvalid', arguments);
     },
     // overwrite
     isValid: function (preventMark) {
      return this.hoursSpinner.isValid(preventMark) && this.minutesSpinner.isValid(preventMark)
                && (!this.secondsSpinner || this.secondsSpinner.isValid(preventMark)) && (!this.ampm || this.ampm.isValid(preventMark));
     },
     // overwrite
     validate: function () {
      return this.hoursSpinner.validate() && this.minutesSpinner.validate() && (!this.secondsSpinner || this.secondsSpinner.validate()) && (!this.ampm || this.ampm.validate());
     }
    });

  7. #37
    Sencha User
    Join Date
    Dec 2011
    Posts
    24
    Vote Rating
    1
    Cine is on a distinguished road

      0  

    Default


    Validation of the field didn't work, so here is the fix:

    Code:
     getErrors: function(value) {
      var me = this,
          format = Ext.String.format,
          errors = me.superclass.superclass.getErrors.apply(me, arguments),
          disabledDays = me.disabledDays,
          disabledDatesRE = me.disabledDatesRE,
          minValue = me.minValue,
          maxValue = me.maxValue,
          len = disabledDays ? disabledDays.length : 0,
          i = 0,
          svalue,
          fvalue,
          day,
          time;
    
      value = me.formatDate(value || me.processRawValue(me.getRawValue()));
    
      if (value === null || value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
       return errors;
      }
    
      svalue = value;
      value = me.parseDate(value);
      if (!value) {
       errors.push(format(me.invalidText, svalue, Ext.Date.unescapeFormat(me.format)));
       return errors;
      }
    
      time = value.getTime();
      if (minValue && time < minValue.getTime()) {
       errors.push(format(me.minText, me.formatDate(minValue)));
      }
    
      if (maxValue && time > maxValue.getTime()) {
       errors.push(format(me.maxText, me.formatDate(maxValue)));
      }
    
      if (disabledDays) {
       day = value.getDay();
    
       for (; i < len; i++) {
        if (day === disabledDays[i]) {
         errors.push(me.disabledDaysText);
         break;
        }
       }
      }
    
      fvalue = me.formatDate(value);
      if (disabledDatesRE && disabledDatesRE.test(fvalue)) {
       errors.push(format(me.disabledDatesText, fvalue));
      }
    
      return errors;
     }

  8. #38
    Sencha User
    Join Date
    Jan 2013
    Posts
    1
    Vote Rating
    0
    ivanckt is on a distinguished road

      0  

    Default


    Quote Originally Posted by liliang268 View Post
    this plugin display Normal on Chrome ,but on ie7,ie8 ,ie9 display
    Attachment 38220, Ask for help

    In datetimepicker.js,

    replace line 32:

    var table = Ext.get(Ext.DomQuery.selectNode('table', this.el.dom));

    to

    var table = Ext.get(Ext.DomQuery.selectNode('table[class="x-datepicker-inner"]', this.el.dom));

    Because the selector in IE chooses a wrong table to insert the timefield.

  9. #39
    Sencha User
    Join Date
    May 2013
    Posts
    1
    Vote Rating
    0
    bharathi88 is on a distinguished road

      0  

    Default How to change default hours time in date time picker?

    How to change default hours time in date time picker?


    Hi i'm using Ext.ux.form.DateTimeField here showing default system time field (H:i) but i need default time hours giving user it's possible or not?

  10. #40
    Sencha User
    Join Date
    Jul 2013
    Posts
    1
    Vote Rating
    0
    yuanxing05 is on a distinguished road

      0  

    Default


    thank you !