2011-05-23 7 views
13

créer un plugin Ext.ux.form.field.DateTime, mais voici quelques questions:questions Ext.ux.form.field.DateTime

  1. si je ne la largeur/hauteur fixe pas, alors DateTime dans la barre d'outils est manquant
  2. ne peux pas montrent la largeur correcte dans le plugin RowEditing

enter image description here

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) 
    } 
}) 
+5

Désolé, je ne peux pas aider avec votre question, mais je voulais juste dire merci pour l'affichage du code. Je l'ai trouvé très utile et éducatif. –

+0

Je crois (ne pas le tester, mais il devrait fonctionner) que vous devez définir le minWidth: '... mise en page: 'hbox', largeur: 200, minWidth: 200, ...' – VoidMain

+1

Pour ceux qui sont venus ici de Google: https://github.com/zombeerose/DateTime – Nat

Répondre

6

Vous pouvez utiliser flex

 Ext.apply({ 
      xtype: 'datefield', 
      format: 'Y-m-d', 
      width: 100, 
      flex: 2 
     },this.dateCfg), 
     Ext.apply({ 
      xtype: 'timefield', 
      format: 'H:i', 
      width: 80, 
      flex: 1 
     },this.timeCfg)