Extjs Formulaire dynamiquement montré/caché champs combo de sélection

À l'aide Ext 4.1 j'aimerais créer un formulaire avec une sélection de combo, et en fonction de l'option actuellement sélectionnée différents sous-champs serait montré/caché. L'exemple ci-dessous :

Extjs Formulaire dynamiquement montré/caché champs combo de sélection

Droit maintenant, j'ai un combo et un ensemble de deux champs de date qui sont cachés sur le rendu. Lorsqu'un combo valeur est modifiée, j'ai un écouteur d'événement qui va afficher ces champs. Mais je ne suis pas sûr si c'est la meilleure méthode pour y remédier. Serait un fieldset fonctionnent mieux dans ce cas ?

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,
}
]
});

OriginalL'auteur owca | 2012-06-18

  1. 7

    Quelque chose le long de ces lignes:

    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
});
});
    L'affichage et le masquage n'est pas un problème pour moi. Mon problème est que les champs cachés avec allowBlank:false cause de la forme.isValid() renvoie false. Est-il un moyen d'avoir caché les champs de ne pas participer au processus de validation?
    La désactivation du champ de l'empêcher de validation.
    Je suis surpris de la poste ne prend pas en charge via la propriété hidden. Idéalement, le cadre doit prendre la responsabilité de faire de telles choses

    OriginalL'auteur Evan Trimboli