IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Ext JS / Sencha Discussion :

TabPanel et icone


Sujet :

Ext JS / Sencha

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    52
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 52
    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 : 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
     
    	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 : 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
     
     
    .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;
    }

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    52
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 52
    Par défaut
    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.

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2008
    Messages
    52
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2008
    Messages : 52
    Par défaut
    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 : 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
     
    		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!!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [VB6] [Interface] Icones de boutons de barre d'outils
    Par elifqaoui dans le forum VB 6 et antérieur
    Réponses: 9
    Dernier message: 13/09/2002, 15h50
  2. Main icon (16 bits)
    Par DR dans le forum C++Builder
    Réponses: 2
    Dernier message: 02/09/2002, 08h23
  3. Attribuer une icone à une application
    Par k_boy dans le forum x86 32-bits / 64-bits
    Réponses: 4
    Dernier message: 31/08/2002, 01h38
  4. [FORMS] Chemin des icones (intégré FAQ 150 QR)
    Par jerome62 dans le forum Forms
    Réponses: 2
    Dernier message: 30/07/2002, 08h32
  5. [Kylix] icone associée à un programme
    Par Anonymous dans le forum EDI
    Réponses: 1
    Dernier message: 22/03/2002, 09h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo