Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript > Bibliothèques & Frameworks > Ext JS / Sencha
Ext JS / Sencha Ext JS / Sencha Forum d'entraide sur les frameworks Ext JS et Sencha. Avant de poster : FAQ ExtJS / Sencha, Toutes les FAQ JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 07/07/2011, 19h11   #1
Candidat au titre de Membre du Club
 
Inscription : janvier 2008
Messages : 44
Détails du profil
Informations forums :
Inscription : janvier 2008
Messages : 44
Points : 14
Points : 14
Par défaut TabPanel et icone

Bonjour,
donc j'ai un souci avec un tab panel, et des icônes que je n'arrive pas à faire apparaitre dans les boutons.
Je vous mets le code car je ne parviens plus à prendre du recule pour y arriver.
En vous remerciant :

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
 
	Ext.onReady(function() {
	new Ext.TabPanel({		
 
				tabBar:{
					dock	: 'top',
					layout	:{
						pack	: 'center'
					}
				},
				cardSwitchAnimation : 'cube',
				height		: 1000,
				renderTo	: 'universe',
 
 
			    sortable	: true,
				items :[
					{
						html	: 'test1',
						cls		: 'card',
						 iconCls	: 'more'
					},{
						html	: 'test2',
						cls		: 'card',
						 iconCls	: 'info'
					},{
						html	:'test3',
						cls		: 'card',
						 iconCls	: 'download'
					}],
				});
 
)}

voila le css :
Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
 
.more
{
-webkit-mask-box-image:url('../img/logo_groupe1.png');
width  : 20px;
height : 20px;
}
 
.info
{
-webkit-mask-box-image:url('../img/logo_groupe2.gif');
width  : 20px;
height : 20px;
}
 
.download
{
-webkit-mask-box-image:url('../img/logo_groupe3.png');
width  : 20px;
height : 20px;
}
sebxid est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 08/07/2011, 11h47   #2
Candidat au titre de Membre du Club
 
Inscription : janvier 2008
Messages : 44
Détails du profil
Informations forums :
Inscription : janvier 2008
Messages : 44
Points : 14
Points : 14
En fait ça vient d'un souci avec les css.
Dans ce cas où les icônes ne s'affichaient pas, le problème vient de la place des balises link entre elles...
J'ai un gros souci de ce coté là mais bon, je sais maintenant d'où ça viens.
sebxid est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 08/07/2011, 14h23   #3
Candidat au titre de Membre du Club
 
Inscription : janvier 2008
Messages : 44
Détails du profil
Informations forums :
Inscription : janvier 2008
Messages : 44
Points : 14
Points : 14
bon je réouvre mais apparemment il y a un soucis du cote de Extjs :
en fait les icones des tabBar fonctionnent quand c'est "dock" en bottom, mais pas en top :

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
 
		new Ext.TabPanel({
				fullscreen : true,
			       tabBar: {
			        dock: 'bottom',
			        ui: 'light',
			        layout: {
			            pack: 'center'
			        }
			    },
			    cardSwitchAnimation: {
			        type: 'slide',
			        cover: true
			    },
			    defaults: {
			        scroll: 'vertical'
			    },
			    items: [{
			        title: 'About',
			        html: '<p>Docking tabs to the bottom will automatically change their style. The tabs below are ui="light", though the standard type is dark. Badges (like the 4 below) can be added by setting <code>badgeText</code> when creating a tab/card or by using <code>setBadge()</code> on the tab later.</p>',
			        iconCls: 'info',
			        cls: 'card card1'
			    },
			    {
			        title: 'Favorites',
			        html: 'Favorites Card',
			        iconCls: 'favorites',
			        cls: 'card card2',
			        badgeText: '4'
			    },
			    {
			        title: 'Downloads',
			        id: 'tab3',
			        html: 'Downloads Card',
			        badgeText: 'Text can go here too, but it will be cut off if it is too long.',
			        cls: 'card card3',
			        iconCls: 'download'
			    },
			    {
			        title: 'Settings',
			        html: 'Settings Card',
			        cls: 'card card4',
			        iconCls: 'settings'
			    },
			    {
			        title: 'User',
			        html: 'User Card',
			        cls: 'card card5',
			        iconCls: 'user'
			    }]
			})
si vous passez la valeur du dock dans le tabbar, et que vous le passez en 'top', toutes les icones disparraissent

super non, merci Extjs!!!
sebxid est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité Cette discussion est résolue.
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 04h00.


 
 
 
 
Partenaires

Hébergement Web