Mẫu Extjs với các trường được hiển thị/ẩn động trên lựa chọn kết hợp

Question

Sử dụng Ext 4.1 Tôi muốn tạo biểu mẫu có tổ hợp lựa chọn và tùy thuộc vào tùy chọn hiện được chọn khác các trường con sẽ được hiển thị/ẩn. Ví dụ dưới đây:

Ngay bây giờ tôi có một combo và một tập hợp của hai trường ngày được ẩn trên render. Khi một giá trị kết hợp được thay đổi, tôi có một trình nghe sự kiện sẽ hiển thị các trường đó. Nhưng tôi không chắc đó có phải là phương pháp tốt nhất để giải quyết vấn đề này không. Một fieldset có hoạt động tốt hơn trong trường hợp này không?

Ext.define('TooltipForm', { 
    extend: 'Ext.form.Panel', 
    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    border: false, 
    bodyPadding: 10, 

    initComponent: function(){ 
     this.on('afterrender', this.onAfterRender, this); 

     this.callParent(arguments); 
    }, 

    onAfterRender: function(){ 
     this.items.each(function(item){ 
      item.on('change', this.onChange, this); 
     }, this); 
    }, 

    onChange: function(field, newValue){ 
     if (field.name === 'range'){ 
      switch(newValue){ 
       case 'fit': 
        console.log('fit view'); 
        break; 
       case 'complete': 
        console.log('complete view'); 
        break; 
       case 'date range': 
        console.log('date range view'); 
        break; 
      } 
     } 
    }, 

    fieldDefaults: { 
     labelAlign: 'top', 
     labelWidth: 100, 
     labelStyle: 'font-weight:bold' 
    }, 
    items: [ 
     { 
      width:   50, 
      xtype:   'combo', 
      mode:   'local', 
      value:   'fit', 
      triggerAction: 'all', 
      forceSelection: true, 
      editable:  false, 
      fieldLabel:  me.rangeFieldLabel, 
      name:   'range', 
      queryMode:  'local', 
      store:   ['fit', 'complete', 'date range'] 
     }, 
     { 
      width:50, 
      xtype: 'datefield', 
      fieldLabel: 'date from', 
      name: 'datefrom', 
      hidden: true 
     }, 
     { 
      width:50, 
      xtype: 'datefield', 
      fieldLabel: 'date to', 
      name: 'dateto', 
      hidden:true, 
     } 
    ] 
}); 

Answer 1

cái gì đó dọc những dòng này:

Ext.define('TooltipForm', { 
    extend: 'Ext.form.Panel', 
    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    border: false, 
    bodyPadding: 10, 
    rangeFieldLabel: 'Foo', 

    initComponent: function() { 
     Ext.apply(this, { 
      fieldDefaults: { 
       labelAlign: 'top', 
       labelWidth: 100, 
       labelStyle: 'font-weight:bold' 
      }, 
      items: [{ 
       itemId: 'range', 
       width: 50, 
       xtype: 'combo', 
       value: 'fit', 
       triggerAction: 'all', 
       forceSelection: true, 
       editable: false, 
       fieldLabel: this.rangeFieldLabel, 
       name: 'range', 
       queryMode: 'local', 
       store: ['fit', 'complete', 'date range'] 
      }, { 
       itemId: 'dateFrom', 
       width: 50, 
       xtype: 'datefield', 
       fieldLabel: 'date from', 
       name: 'datefrom', 
       hidden: true 
      }, { 
       itemId: 'dateTo', 
       width: 50, 
       xtype: 'datefield', 
       fieldLabel: 'date to', 
       name: 'dateto', 
       hidden: true, 
      }] 
     }); 

     this.callParent(arguments); 
     this.child('#range').on('change', this.onChange, this); 
    }, 

    onChange: function(field, newValue) { 
     switch(newValue) { 
      case 'fit': 
       console.log('fit view'); 
       // do something else 
       break; 
      case 'complete': 
       this.child('#dateFrom').hide(); 
       this.child('#dateTo').hide(); 
       break; 
      case 'date range': 
       this.child('#dateFrom').show(); 
       this.child('#dateTo').show(); 
       break; 
     } 
    }, 
}); 

Ext.onReady(function(){ 
    new TooltipForm({ 
     renderTo: document.body 
    }); 
});