Sencha touch 使用sencha touch2动态创建旋转木马
我有以下示例MVC应用程序试图动态创建旋转木马,图像源从某个远程url获取,当我执行该应用程序时,我没有看到任何图像被附加到我的旋转木马视图中,请任何一个突出显示我哪里出了问题 型号代码:Sencha touch 使用sencha touch2动态创建旋转木马,sencha-touch,extjs,sencha-touch-2,carousel,Sencha Touch,Extjs,Sencha Touch 2,Carousel,我有以下示例MVC应用程序试图动态创建旋转木马,图像源从某个远程url获取,当我执行该应用程序时,我没有看到任何图像被附加到我的旋转木马视图中,请任何一个突出显示我哪里出了问题 型号代码: Ext.define('Sencha.model.ImageModel', { extend: 'Ext.data.Model', config: { fields: [ 'id', 'title', 'link', 'author', 'conten
Ext.define('Sencha.model.ImageModel', {
extend: 'Ext.data.Model',
config: {
fields: [
'id', 'title', 'link', 'author', 'content',
{
name: 'image',
type: 'string',
convert: function (value, record) {
var content = record.get('content'),
regex = /img src=\"([a-zA-Z0-9\_\.\/\:]*)\"/,
match = content.match(regex),
src = match ? match[1] : '';
if (src != "" && !src.match(/\.gif$/)) {
src = "http://src.sencha.io/screen.width/" + src;
}
return src;
}
}
]
}
});
门店代码:
Ext.define('Sencha.store.ImageStore', {
extend: 'Ext.data.Store',
config: {
model: 'Sencha.model.ImageModel',
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://www.acme.com/jef/apod/rss.xml&num=20',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
});
控制器代码:
Ext.define('Sencha.controller.CarouselController', {
extend: 'Ext.app.Controller',
config:
{
init: function () {
var carousel = Ext.getCmp('imagecarousel');
Ext.getStore('ImageStore').load(function (pictures) {
var items = [];
Ext.each(pictures, function (picture) {
if (!picture.get('image')) {
return;
}
items.push({
xtype: 'apodimage',
picture: picture
});
});
carousel.setItems(items);
carousel.setActiveItem(0);
});
}
}
});
查看代码:
Ext.define('Sencha.view.CarouselView', {
extend: 'Ext.Img',
id:'imagecarousel',
xtype: 'apodimage',
config: {
/**
* @cfg {apod.model.Picture} picture The Picture to show
*/
picture: null
},
updatePicture: function (picture) {
this.setSrc(picture.get('image'));
}
});
App.js代码:
Ext.Loader.setConfig({
enabled: true
});
Ext.require([
'Ext.carousel.Carousel',
'Ext.data.proxy.JsonP'
]);
Ext.application({
name: 'Sencha',
controllers: ['CarouselController'],
stores: ['ImageStore'],
models: ['ImageModel'],
//views:['CarouselView'],
launch: function () {
Ext.create('Sencha.view.CarouselView');
}
});
可以更具体地说明什么不起作用。尝试在代码中添加console.logs,并给出结果,比如Ext.logs末尾的项目大小,诸如此类 我的第一个想法是使用store.load的回调函数:
Ext.getStore('ImageStore').load(
callback: function (pictures) {
var items = [];
Ext.each(pictures, function (picture) {
if (!picture.get('image')) {
return;
}
items.push({
xtype: 'apodimage',
picture: picture
});
});
carousel.setItems(items);
carousel.setActiveItem(0);
});
希望这有帮助可以更具体地说明哪些不起作用。尝试在代码中添加console.logs,并给出结果,比如Ext.logs末尾的项目大小,诸如此类 我的第一个想法是使用store.load的回调函数:
Ext.getStore('ImageStore').load(
callback: function (pictures) {
var items = [];
Ext.each(pictures, function (picture) {
if (!picture.get('image')) {
return;
}
items.push({
xtype: 'apodimage',
picture: picture
});
});
carousel.setItems(items);
carousel.setActiveItem(0);
});
希望这能有所帮助谢谢你的回复,我正在尝试按照这个URL中显示的示例进行操作:,我稍微重构了代码,使我的app.js文件最小化,我引入了控制器并在其上编写了绑定函数,我只是想知道实现这一点的最佳方法是什么?我也有同样的问题,但无法获得解决方案,即如何使用动态数据创建旋转木马。请访问:感谢您的回复,我正在尝试按照此URL中显示的示例进行操作:,我稍微重构了代码以使我的app.js文件最小化,我引入了控制器并在其上编写了绑定函数,我只是想知道实现这一点的最佳方法是什么?我有同样的问题,但无法获得解决方案,如何使用动态数据创建旋转木马。请浏览: