TabPanel et icone

Version imprimable

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;
}

08/07/2011, 11h47
sebxid

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. :D

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