Panel avec template (extjs 3) [Résolu]

[abraxis]

Bonjour,

je voudrais afficher dans une panel (via un template avec iframe) un document et avoir la possibilité de fermer le document.
J'arrive à afficher le document mais je n'arrive pas à avoir la barre de titre de mon panel :/
Sur mon panel j'ai un titre par defaut.
Lors de la demande d'ouverture du doc, j'active l'items, je set le titre de mon panel et enfin je fais un overwrite avec le template en lui donnant l'url du document à afficher.
Tout ce passe bien et sans erreur, mais impossible d'afficher cette barre de titre...

mon panel contenant le template :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var panelCenterViewReport = new Ext.Panel({
	id: 'panelCenterViewReport',
        title: 'Titre par defaut',
	tools: [ 
		{
			id: 'close',
			handler: function(event, tool, obj, idTools)
			{
				panelCenterReport.layout.setActiveItem(gridReport);
			}
		}
	],
	border: false,
	layout: 'fit'
});

action faite sur la demande d'ouverture du document :

Code :

1
2
3
4
5
panelCenterReport.layout.setActiveItem(panelCenterViewReport);
panelCenterViewReport.setTitle(json.text); // On change le titre
heightPanelReport = panelCenterViewReport.getHeight();
tplReport.overwrite('panelCenterViewReport', {url: json.url});
document.getElementById('idIframeReport').height = heightPanelReport;

Et mon template :

Code :

1
2
3
4
5
6
7
8
var tplReport = new Ext.Template({ // construction du template
    compiled: true
  },
  '<tpl for=".">',
	  '<iframe id="idIframeReport" style="border: 0px;" src="{url}" width="100%" scrolling="yes" />',
	'</tpl>',
	'<div class="x-clear"></div>'
);

[kenny.kev]

Bonjour,

Tu as essayer getInnerHeight() à la place de getHeight ().
Tu as plusieurs méthode pour avoir la taille de ton panel voir l'api :
http://dev.sencha.com/deploy/ext-3.4...lass=Ext.Panel

[abraxis]

Je viens de tester et cela me laisse une marge en bas d'environ la taille d'une barre de titre mais elle ne s'affiche toujours pas :/

[kenny.kev]

Ton problème est du CSS et HTML.

Modifie déjà la déclaration de ton iframe, en HTML l'iframe à besoin d'une balise de fermante soit :

Code :

<iframe></iframe>

De plus, regarde du coté CSS que tu lui a appliqué car j'ai l'impression que tu doit avoir une "position: absolute;" sur ton iframe.

Si ça pose problème c'est pas spécialement propre mais ça fonctionne.
Ajoute dans la balise style un :

Code :

'margin-top: ' + (panelCenterViewReport.getHeight() - panelCenterViewReport.getInnerHeight()) + 'px;'

Voila la tu devrais avoir entête de ton panel.

[abraxis]

Je n'applique aucun CSS à mon iframe...

Je viens de tester ta solution mais j'ai des erreurs qui remonte mais qui n'empêche pas l'application de fonctionner.
Et quand j'ouvre le document, je n'est toujours pas la barre de titre :/

[kenny.kev]

Quel est l'erreur car si ça ce trouve ça n'applique pas le margin.
Vois-tu le margin dans firebug ?

Comment ça tu fais ta déclaration ?

[sekaijin]

J'avais fais un extension pour avoir un templatePanel

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
29
30
/**
 * templatePanel
 *
 * définit un Panel qui gère seul un template associé
 */
Ext.namespace('Ext.ux');
 
Ext.ux.TemplatePanel = Ext.extend(Ext.Panel, {
    //à l'initialisation créer le template.
    initComponent: function() {
        Ext.ux.TemplatePanel.superclass.initComponent.call(this);
        if (typeof this.tpl === 'string') {
            this.tpl = new Ext.XTemplate(this.tpl);
        }
    },
 
    // lors du rendu générer le contenu html.
    onRender: function(ct, position) {
        Ext.ux.TemplatePanel.superclass.onRender.call(this, ct, position);
        if (this.data) {
            this.update(this.data);
        }
    },
 
    //sur mise à jour régénérer le contenu html.
    update: function(data) {
        this.tpl.overwrite(this.body, data);
    }
});
Ext.reg('templatepanel', Ext.ux.TemplatePanel);

utilisé ainsi

Code :

1
2
3
4
5
6
7
  items: [
  {
      //titre de l'onglet fournis par les infos locales
      xtype: 'templatepanel',
      tpl: '<h1>demandes d\'accès à {name}</h1>',
      data: {name: info.text}
  },

A+JYT

[abraxis]

aaaaaah pas mal du tout ^^
je testerais une fois fini ma partie car j'ai résolu "temporairement" mon problème de manière pas top du tout propre.

Merci encore pour votre aide.