远程(Ajax)存储不起作用的extjs4 - DataView
远程(Ajax)存储不起作用的extjs4 - DataView
提问于 2011-09-18 17:45:12
一段时间以来，我一直在尝试让DataView (也就是Ext.view.View)与远程存储一起工作，但我就是无法让它工作。
因此，我回到了绘图板上，尝试基于Sencha文档的数据视图组件(from this page)构建一个简单的组件。
当我使用默认的示例非远程存储运行代码时，它工作得很好。一旦我将存储区转换为ajax数据存储区，它就停止工作。
下面是我的代码：
Ext.define("Admin.TestDataView",{
extend : 'Ext.DataView'
,initComponent: function()
{
Ext.regModel('Image', {
Fields: [
{name:'src', type:'string'},
{name:'caption', type:'string'}
]
});
this.thestore = Ext.create('Ext.data.Store', {
id:'imagesStore',
model: 'Image',
// data commented out and replaced with a proxy:
/*
data: [
{src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts'},
{src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data'},
{src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme'},
{src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned'}
],
*/
proxy: {
type: 'ajax',
url : '/test/somedata',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad:true
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
Ext.apply(this, {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
renderTo: Ext.getBody()
});
this.callParent(arguments);
}
});正如您所看到的，这基本上是文档中的示例代码，其中包含一个远程存储，而不是内联数据。
test/somedata url是一个简单的codeiginiter控制器方法，如下所示：
function somedata()
{
$data =array(
'success'=>true,
'results'=> array(
array('src'=>'http://www.sencha.com/img/20110215-feat-drawing.png', 'caption'=>'Drawing & Charts'),
array('src'=>'http://www.sencha.com/img/20110215-feat-data.png', 'caption'=>'Advanced Data'),
array('src'=>'http://www.sencha.com/img/20110215-feat-html5.png', 'caption'=>'Overhauled Theme'),
array('src'=>'http://www.sencha.com/img/20110215-feat-perf.png', 'caption'=>'Performance Tuned')
));
echo(json_encode($data));
}看起来一切都很好。Firebug控制台显示了正确的请求和正确返回的数据(我有大量的其他控制器为其他事情返回数据，它们工作得很好)。
只是视图是空的。
有趣的是，如果我将一个prepareData方法添加到DataView子类中，如下所示：
,prepareData: function(data)
{
console.log("prepareData(%o)",data);
return data;
}对于内联数据，firebug显示如下：
通过ajax商店，firebugs显示了以下内容：
有趣的是，prepareData方法被调用了4次，这表明在两种情况下都加载了4条记录，但是使用远程存储时，记录数据是空的。
有什么想法吗？我做错了什么？
Stack Overflow用户
回答已采纳
发布于 2011-09-18 18:19:38
在挖掘了用firebug创建的不同对象之后，模型中的一些东西看起来很奇怪。
原来Ext文档里有个打字错误..
在模型中，文档包含Fields ...，这应该是字段
Ext.regModel('Image', {
fields: [ // <-- here
{name:'src', type:'string'},
{name:'caption', type:'string'}
]
});我猜当使用内联数据时，模型的使用方式与远程存储不同(模型仍然需要内联数据，因为取出它会在阅读器上抛出错误)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7460688
复制相关文章
相似问题
腾讯云开发者
