Création dynamique d'un onglet avec template

**abraxis** · 28/10/2010, 16h01

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ^^

**JulienFio** · 28/10/2010, 16h16

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

mon template:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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à.