Création dynamique d'un onglet avec template

Version imprimable

Bonjour,

Je souhaiterais ouvrir un nouvel onglet lor de la sélection d'une ligne dans un tableau (gridPanel) et afficher des données dans cet onglet sois directement dans l'onglet avec un template ou en mettant un dataView avec un template (peu importe).
J'arrive à afficher mon onglet mais il est vide...
Quand je remplace le tpl par un html, la je vois mon test dans mon onglet.

Voila les morceau de code utiles

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
metalayout = Ext.extend(Ext.Panel, {
	id:'metalayout',
	title: 'Métas',
	layout: 'border',
	bodyBorder: true,
	defaults: {
		collapsible: false,
		split: true,
		animFloat: false,
		autoHide: false,
		useSplitTips: true
	},
	initComponent: function() {
		this.items = [
			{
				xtype: 'panel',
				title: 'Recherche',
				region: 'west',
				border: true,
				width: 200,
				minSize: 175,
				maxSize: 400,
				collapsible: true,
				margins: '5 0 5 5',
				cmargins: '5 5 5 5',
				layout: 'fit',
				items: new modSearchMeta()
			},{
				xtype: 'panel',
				region: 'center',
				layout: 'border',
				margins: '5 5 5 0',
				items: [
					{
						xtype: 'panel',
						region: 'north',
						height: 250,
						layout: 'fit',
						border: false,
						items: new metaGrid()
					},{
						xtype: 'tabpanel',
						id: 'metaTabDetails',
						region: 'center',
						// activeTab: 0,
						enableTabScroll: true,
						defaults: {
							closable: true
						},
						border: false
                                        }
				]
			}
		];
		metalayout.superclass.initComponent.call(this);
	}
});

Code:

1
2
3
4
var tplMeta = new Ext.XTemplate(
	'<tpl for="."><div>Template</div></tpl>',
	'<div class="x-clear"></div>'
);

Je change mon code quand je test avec html.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ongletTest = Ext.extend(Ext.Panel, {
	id:'ongletTest',
	title: 'ongletTest',
	layout: 'fit',
	initComponent: function() {
		this.items = [
			{
				xtype: 'dataview',
				itemSelector: 'div',
				layout: 'fit',
				overClass:'x-view-over',
				itemSelector:'div.thumb-wrap',
				// html: tplMeta
				tpl: tplMeta
			}
		];
		ongletTest.superclass.initComponent.call(this);
	}
});

Code:

1
2
3
4
5
var metaGridTest = new metaGrid();
metaGridTest.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
	var newOnglet = Ext.getCmp('metaTabDetails').add(new ongletTest(r.data));
	Ext.getCmp('metaTabDetails').setActiveTab(newOnglet);
});

Sachant que par la suite je devrais afficher des donnée venant d'une bdd dans mon template.

Si l'un ou l'une d'entre vous a déjà rancontré ce problème merci de me guider vers la solution ^^

J'ai eu à faire ce même cas de figure il n'y a pas longtemps, ça fonctionne bien pour moi.

Voici comment j'ai procédé:

Le panel qui doit accueillir les infos:

Code:

1
2
3
4
5
 
xtype: 'panel',
id: 'tabPersonne_infos',
height: '15%',
body: ''

mon template:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
var bookTplMarkup = [
    '<br><br><table valign="top" align="left" width="100%"><td valign="top" align="left" style="width:50%; padding-left:20px;"><img src="{avatar}" ' +
    'width="50" height="68" align="left">'+
    '<b>Direction:</b> {direction}<br>'+
    '<b>Agence:</b> {agence}<br>'+
    '<b>Centre de gestion:</b> {centreGestion}<br>'+
    '<b>Pays:</b> {pays}<br>'+
    '<b>Ville:</b>  {ville}</td><td valign="top" align="left" style="width:50%; padding-left:20px;">'+
    '{email} <img src="'+jsContextPath +'/images/global/skin/icons/email.png" border="0" title="Email" align="absbottom"><br>'+
    '<i>{numTel}</i> <img src="'+jsContextPath +'/images/global/skin/icons/telephone.png" border="0" title="Telephone" align="absbottom"><br>'+
    '<i>{numPort}</i> <img src="'+jsContextPath +'/images/global/skin/icons/phone.png" border="0" title="Portable" align="absbottom"><br>'+
    '<i>{numFax}</i> <img src="'+jsContextPath +'/images/global/skin/icons/printer.png" border="0" title="Fax" align="absbottom"></td></table>'
  ];
var bookTpl = new Ext.Template(bookTplMarkup);

Et ensuite mon listener sur le rowclick, qui va écrire dans le panel (de mon tabpanel):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
rowclick:function(grid, rowIndex, e) {
            var record = grid.getStore().getAt(rowIndex);            
            var detailPanel_infos = Ext.getCmp('tabPersonne_infos');
            bookTpl.overwrite(
                detailPanel_infos.body,
                {
                    avatar: record.get('avatar'),
                    nom: record.get('nom'),
                    prenom: record.get('prenom'),
                    role: record.get('role'),
                    numTel: record.get('numTel'),
                    email: record.get('email'),
                    detail: record.get('detail'),
                    numPort: record.get('numPort'),
                    agence: record.get('agence'),
                    centreGestion: record.get('centreGestion'),
                    pays: record.get('pays'),
                    direction: record.get('direction'),
                    ville: record.get('ville'),
                    numFax: record.get('numFax')
                }
                );
        }

Je n'ai pas mis la partie du code qui créé le nouvel onglet sur le rowclick du grid car tu y arrive déjà.

28/10/2010, 16h21
abraxis

Merci pour la réponse rapide ^^

Donc tu n'utilise pas le tpl mais le body...
Je vais tester et je te tien au courant
09/11/2010, 10h21
abraxis

Merci bien, ca fonctionne très bien : )))