Discussion :

[Hasret]

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

[steven78700]

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'

[Hasret]

Merci pour ta réponse , le carousel est là , mais il est vide ..