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 :
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
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 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 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'} ] } });
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
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); }); } } });
Qu'est ce que j'ai bien raté ?
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'); } });
Je vous remercie énormement![]()
Partager