Extjs ne peut pas dynamiquement ajouter/supprimer des champs dans formpanel
J'ai un panneau de formulaire qui utilise un tableau de mise en page pour afficher un formulaire. J'ai besoin d'ajouter des fonctionnalités à ajouter /supprimer un ensemble de composants.
Le bouton ajouter convient d'en ajouter une nouvelle ligne de composants-dessous les éléments existants, & supprimer le bouton supprimer le dernier ajout à la ligne.
La formpanel pouvez ajouter un nouveau champ, mais il est figurant ci-dessous les boutons et la forme n'est pas l'augmentation de la largeur (voir la capture d'écran ci-dessous). J'ai essayé cela avec à la fois l'insertion et de la fonction d'ajout mais tous les deux ont le même effet.
Personne ne sait comment:
1) je peux ajouter une série de composants dans la ligne suivante?
2) Comment je peux supprimer la ligne suivante.
Partielle formPanel code & code du bouton:
![SearchForm = Ext.extend(Ext.FormPanel, {
id: 'myForm'
,title: 'Search Form'
,frame:true
,waitMessage: 'Please wait.'
//,labelWidth:80
,initComponent: function() {
var config = {
items: [{
layout:{
type:'table',
columns:5
},
buttonAlign:'center',
defaults:{
//width:150,
//bodyStyle:'padding:100px'
style:'margin-left:20px;'
},
items:[//row 1
{
xtype: 'label',
name: 'dateLabel',
cls: 'f',
text: "Required:"
},
{
xtype: 'container',
layout: 'form',
items: {
xtype: 'datefield',
fieldLabel: "From Date",
value: yesterday,
width: 110,
id: 'date1'
}
}][1]
buttons: [{
text: 'Add More Criteria (max 10 items)',
id: "addBtn",
scope: this,
handler: function(){
alert('hi');
/*this.items.add({
xtype : 'textfield',
fieldLabel : 'Extra Field',
name : 'yourName',
id : 'yourName'
}); */
this.insert(4,{
xtype: 'textfield',
id: 'input20',
//hideLabel: true,
width: 180,
fieldLabel: 'hi'
});
this.doLayout();
}
}
OriginalL'auteur pm13 | 2011-09-20
Vous devez vous connecter pour publier un commentaire.
Façon la plus simple serait d'avoir un fieldset dans la forme pour contenir tous les "rangées" et ensuite ajouter une ligne à cette
fieldset
à l'aide defielset.add()
(Votre "ligne" peut être un autre fieldset qui a tous les champs)
juste ajouter un autre jeu de champs comme une ligne devrait être suffisant
OriginalL'auteur Amol Katdare
De champs de formulaire dynamique de génération semble être évident et il y a beaucoup d'exemples et de quelques blogs pour mootools, etc, mais dans extjs monde je ne pouvais pas trouver un exemple de travail(probablement parce que la plupart des gens utilisent de puissants Extjs de la grille).J'ai dû inventer par moi-même pour MedAlyser projet! de gi et de le partager avec vous.elle pourrait avoir des bugs et/ou incomplètes, mais j'espère qu'elle aide un peu.
La suppression de champs était plus compliqué parce que le bouton supprimer besoin de savoir exactement ce qui doit être supprimé. Ce code crée de nouveaux champs et les supprime correctement, comme vous l'avez demandé.Toutes les suggestions sont les bienvenues.
OriginalL'auteur Mehdi Fanai