Question

我一直在疯狂地想弄清楚为什么会这样。我遇到的问题是，当我加载我的应用程序时，该应用程序的Panel具有List，其中存储是通过RestProxy加载的模型，该列表似乎为空。直到你触摸其中一行才能看到它。您必须触摸每一行才能显示它们（切换到另一个选项卡也可以）。我把它缩小到显然与服务器发送JSON数据的速度有关。当服务器快速响应时，不会发生此问题（我猜测列表'draw'在数据下载后发生）。

如果在发送JSON之前向服务器添加延迟（3秒），则会出现问题。我还注意到，如果我删除布局：{type：'card'}，它也会正确呈现。我不能在我的实际应用程序中这样做，因为这实际上是TabControl的一部分

有人能指出我做错了什么吗？顺便说一句，这只发生在iPhone上观看时。在Chrome中打开时，一切都很好。

var proxy = new Ext.data.RestProxy({
  format: 'json',
  url: '/tabs/1/members',
  reader: {
    type: 'json',
    root: 'data'
  }
});

Ext.regModel( 'User', {
  fields: [ 'name' ],
  proxy: proxy
} );

var store = Ext.regStore( 'myStore', {
  model: 'User',
  autoLoad: true
} );

MyList = Ext.extend( Ext.Panel, {
  fullscreen: true,
  layout: {type: 'card' }, // Commenting this line also 'fixes' the problem
  initComponent: function() {

    this.list = new Ext.List({
      itemTpl: '<div>{name}</div>',
      store: 'myStore',
      scroll: false,
      autoHeight: true
    });

    this.items = this.list;

    MyList.superclass.initComponent.call( this );
  }

} );

Ext.reg( 'mylist', MyList );

Ext.setup({
  onReady: function() {
    new MyList();
  }
});

Answer 1

我确实知道一个解决方案，但我不知道这是一个好习惯。在initComponent方法中，您可以手动加载存储（例如store.load()）或在store-load-event上附加方法。 store.load（）方法接受一个回调方法，该方法在加载存储后执行。在此回调中，您应该将商店绑定到列表并进行渲染。

Answer 2

我不知道为什么，但它似乎现在正在工作，即使我没有改变任何我记得的东西。起初我以为我已经通过最大化列表'ui：'round“'来修复它，但是当我要测试这个理论时，我运行了我在问题中发布的代码，一切似乎都有效，所以我回到原来的代码，恢复了ui：round，一切仍然有效。

可能会稍后尝试做差异，看看我是否可以查明罪魁祸首，但这可能不会发生一段时间。遗憾。

如果存储AJAX响应很慢，则在触摸之前列表行不会呈现

2 个答案: