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:
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:
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:
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:
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 :)