extjs4 - DataView与远程（阿贾克斯）商店不工作

我一直在试图让一个DataView（又名Ext.view.View）与远程存储工作了一段时间，但我无法让它工作。extjs4 - DataView与远程（阿贾克斯）商店不工作

所以我回到了绘图板，并试图建立一个基于Sencha doc的dataview组件（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); 

    } 
});

正如你可以看到这实质上从文档，示例代码，具有远程存储，而不是内联数据。

的/测试/ 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)); 

}

一切似乎罚款。萤火虫控制台显示正确的请求和数据正确返回（我有很多其他的控制器返回数据的其他东西，他们工作正常）..

除视图是空的。

它有趣的是，如果我添加一个prepareData方法将数据视图子类，像这样：

,prepareData: function(data) 
{ 
    console.log("prepareData(%o)",data);  
    return data; 
}

的直列数据，萤火虫表明这一点： With

随着AJAX店，萤火虫显示： Without

一个有趣的问题是prepareData方法被调用4次，这表明在这两种情况下，4条记录被加载，但与远程存储记录数据是空的。

任何想法？我究竟做错了什么？

来源

2011-09-18 Ben

在用萤火虫创建的不同对象中挖掘之后，某些东西在模型中看起来很奇怪。

原来有一个在内线DOC一个错字..

在该模型中，商务部已经场[...]，这应该是场

Ext.regModel('Image', { 
     fields: [ // <-- here 
      {name:'src', type:'string'}, 
      {name:'caption', type:'string'} 
     ] 
    });

我使用内联时猜测数据时，模型的使用方式与远程存储不同（模型仍然需要内联数据，因为将其导出会导致读取器出错）。

来源

2011-09-18 10:19:37 Ben

extjs4 - DataView与远程（阿贾克斯）商店不工作

回答

相关问题