Mauvaise position de mon form après création

Version imprimable

Bonjour,

Ma page se constitue d'un mainScreen contenant:
- un header
- le menu à droite
- et le contener à gauche (panel)

dans le panel il y a un boutton "Add". Lorsque je clic sur le bouton, j'implémente un nouveau form, comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ResourceForm = Ext.extend(ResourceFormUi, { initComponent: function() { ResourceForm.superclass.initComponent.call(this); this.addFilialButtonRef.on('click', this.newFilialClick, this); }, newFilialClick : function () { this.add(new ResourceFunction({ renderTo: Ext.getBody() })); } }); Ext.reg('resourceForm', ResourceForm);
Le problème est que le (ou les) nouveau form créé, s'affiche à l'extérieur de mon panel et en plein sur le menu.
Donc, je ne récupère pas l'élément panel auquel j'aimerais ajouter mon form.
Comment créer mon form dans le panel "ResourceForm"?

Merci pour votre aide.

15/01/2011, 16h28
sekaijin

ben tu demande à ce que ça s'affiche dans le corps de la page donc ça s'affiche dans le corps de la page

Code:

renderTo: Ext.getBody()

a+JYT
15/01/2011, 23h04
seurjer

Oui, en effet. Dans ce cas là, je l'affiche dans le corps de la page.
Le soucis, est que je n'arrive pas à récupérer l'emplacement du Panel qui vient d'une classe js.

Car quand je fais un:

Code:

renderTo: Ext.getBody()

Il récupère bien la balise <body> du html.
Je ne sais pas si je suis très clair?!
16/01/2011, 15h02
sekaijin

il suffit de mettre l'id du panel dans le renderTo ou si tu as une référence au panel la référence

A+JYT

Je ne sais pas si j'ai tout bien compris, mais là rien ne se passe.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ResourceForm = Ext.extend(ResourceFormUi, { initComponent: function() { ResourceForm.superclass.initComponent.call(this); this.addFilialButtonRef.on('click', this.newFilialClick, this); }, newFilialClick : function () { this.add(new ResourceFunction({ renderTo: resourceFormId //renderTo: Ext.getBody() })); } }); Ext.reg('resourceForm', ResourceForm);
Pourtant "resourceFormId" est bien l'ID du panel dans lequel je veux créer mon nouvel objet "ResourceFunction".
Même avec l'outil de débug de Chrome, rien ne s'affiche dans la console d'erreur.

C'est terrible ça, je ne comprend pas pourquoi j'ai autant de peine avec ce panel...

Une autre suggestion?
Merci d'avance,
seurjer

19/01/2011, 21h21
sekaijin

est-tu sur que dans ce contexte c'est à dire dans la gestion de l'événement la variable resourceFormId est définie ?

A+JYT

Oui, elle est bien définie dans la classe:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
ResourceFormUi = Ext.extend(Ext.Panel, {
    title: 'Resources',
    height: 900,
    hidden: true,
    layout: 'absolute',
    id: 'resourceFormId',
    initComponent: function() {
        this.tbar = {
            xtype: 'toolbar',
            x: 500,
            items: [
                {
                    xtype: 'button',
                    text: 'Add Filial',
                    ref: '../addFilialButtonRef',
                    id: 'addFilialButton'
                }
            ]
        };
        this.items = [
            {
                xtype: 'resourceFunction'
            }
        ];
        ResourceFormUi.superclass.initComponent.call(this);
    }
});

Rien ne se passe non plus si je modifie ma function comme ceci:

Code:

1
2
3
4
5
6
7
 
newFilialClick : function () {
	var form = new ResourceFunction({
		renderTo: Ext.get('resourceFormId')
	});
	form.show();
}

20/01/2011, 12h02
sekaijin

je pense qu'il te faut chercher dans la définition de la classe
ResourceFunction

A+JYT