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 :

Afficher des images dans un carousel à partir du store


Sujet :

Ext JS / Sencha

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2011
    Messages
    38
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2011
    Messages : 38
    Par défaut Afficher des images dans un carousel à partir du store
    Bonsoir ,
    J'aimerai afficher plusieurs images charger à partir d'un store et les mettre dans un carousel dynamiquement , de tel sorte qu'une fois avoir dépasser un nombre specifiques d'images , un autre carousel se crée ,j'ai essayé dans un premier temps de mettre les images dans le carousel sans prendre en consideration la limite du nombre , mais rien ne s'affiche dans ma view , j'ai déja testé le store marche nickel dans une liste , voici mon code :

    Store :
    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
     
    Ext.define("MyApp2.store.ApplicationStore", {
    extend: "Ext.data.Store",
    requires: ["Ext.data.proxy.JsonP"],
    config: {
        model: "MyApp2.model.ApplicationModel",
        autoLoad: true,
        id :'ApplicationModel',
        proxy: {
            type: 'jsonp',
            url: 'http://mysite.com/api/applications?format=jsonp&access_token='+token,
            reader: {
                type: 'json',
                rootProperty: 'applications'
                }
            }
     
     
        }    
    });
    Le model :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     
    Ext.define("MyApp2.model.ApplicationModel", {
    extend: "Ext.data.Model",
    config: {
        type:'tree',
        fields: [
        {name: 'id', type: 'auto'},
        {name: 'name', type: 'auto'},
        {name:'icon',type:'image/jpg'}
     
     
      ]
    } 
    });
    Le controlleur :

    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
     
    Ext.define('MyApp2.controller.ApplicationViewController' , {
      extend: 'Ext.app.Controller',
      requires: ["MyApp2.store.ApplicationStore"],
    config: {
        // define a reference to the mycarousel view
     
        refs:{ mainmenuview: { selector: '#mycarousel' } }   ,
     
        // let the control call the init function of the carousel
        init: function() {
          this.control( {
            '#mycarousel': {
               initialize: 'initMycarousel'     
            }
          });   
        },
     
        // then I can access the carousel view and fill it ...
        initMycarousel: function() {
          var carousel = this.getMainMenuView();
          var store = Ext.getStore('MyApp2.store.ApplicationStore');
     
         // store.clearFilter(true);
         // store.filter('photoset', '72157631990018061' );
          store.load();       
     console.log(store);
          store.load( function(pictures , operation ) {
          var items = [];
     
          Ext.each(pictures, function(picture) {
              console.log(picture.get('icon'));
            if (!picture.get('icon')) {
              return;
                }
     
            items.push({
              xtype: 'image',
              src: picture.data.icon,
              height: 64,
                width: 64
            });             
          });
    console.log(picture.data.icon);
          // fill items into carousel
          carousel.setItems(items);
          carousel.setActiveItem(0);
     
     
          });
     
        }
    }
    });
    La vue :
    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
     
    Ext.define('MyApp2.view.MainMenu', {
        extend: 'Ext.Panel',
        requires: ['Ext.TitleBar','MyApp2.store.ApplicationStore','Ext.dataview.List'],
        alias: 'widget.mainmenuview',
        config: {
            layout: {
                type: 'fit'
            },
     
            items: [
                {
                    xtype: 'titlebar',
                    title: 'My Apps',
                    docked: 'top',
                    items: [
                        {
                            xtype: 'button',
                            text: 'Log Off',
                            itemId: 'logOffButton',
                            align: 'right'
                        }
                    ]
                }
    ,
     
                        {
                            xtype: 'carousel',
                            id: 'mycarousel'
                        }
     
     
            ],
            listeners: [{
                    delegate: '#logOffButton',
                    event: 'tap',
                    fn: 'onLogOffButtonTap'
                }]
        },
        onLogOffButtonTap: function() {
            this.fireEvent('onSignOffCommand');
        }
    });
    Qu'est ce que j'ai bien raté ?
    Je vous remercie énormement

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Septembre 2009
    Messages
    59
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2009
    Messages : 59
    Par défaut
    Bonjour,

    Au niveau de l'affichage du caroussel à tu essayé de mettre une taille fixe pour voir ?


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
     
      xtype:'caroussel',
      height:'300px'

  3. #3
    Membre averti
    Femme Profil pro
    Développeur informatique
    Inscrit en
    Avril 2011
    Messages
    38
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Avril 2011
    Messages : 38
    Par défaut
    Merci pour ta réponse , le carousel est là , mais il est vide ..

Discussions similaires

  1. Comment afficher des images dans crystalreport
    Par rddev dans le forum VB.NET
    Réponses: 1
    Dernier message: 18/05/2007, 02h44
  2. afficher des images dans un mail
    Par boss_gama dans le forum ASP
    Réponses: 9
    Dernier message: 12/09/2006, 17h56
  3. Afficher des données dans un datagrid à partir d'une base de données MySQL
    Par General_Garrisson dans le forum VB 6 et antérieur
    Réponses: 2
    Dernier message: 13/07/2006, 15h14
  4. Réponses: 2
    Dernier message: 08/05/2006, 10h03
  5. [C#] Afficher des images dans un datagrid
    Par mbibim63 dans le forum Windows Forms
    Réponses: 3
    Dernier message: 11/05/2005, 12h22

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