Sencha Touch Blank Screen После добавления списка компонентов для просмотра

Question

Я пытаюсь добавить компонент List в представление в Sencha Touch. Приложение работает правильно, пока я не попытаюсь добавить компонент списка. После добавления списка в приложение приложение загружает (показывает заставку), тогда отображается только белый экран.

Я использую Sencha Touch, XCode 4, iOS 5 SDK и PhoneGap 1.3.0.

Заранее благодарен!

вот код для просмотра:

plantanalyzer.views.BuildingList = Ext.extend(Ext.Panel, { 
dockedItems: [{ 
      dock: 'top', 
      html: '<img src="images/logo.jpg"/>' 
     }, 
     { 
     xtype: 'list', 
     itemTpl : '{name}', 
     grouped : true, 
     indexBar: true, 
     store: newStore 

    }] 
}); 

и код для моего тестового хранилища. У меня это в голове index.html:

var newStore; 

    function onBodyLoad(){ 
     Ext.regModel('Plants', { 
      fields: ['name', 'efficiency'] 
     }); 

     newStore = new Ext.data.JsonStore({ 
      model : 'Plants', 
      sorters: 'name', 

      getGroupString : function(record) { 
       return record.get('name')[0]; 
      }, 

      data: [ 
       {name: 'Milwaukee', efficiency: .85}, 
       {name: 'New York', efficiency: .65}, 
       {name: 'St Paul',  efficiency: .73}, 
       {name: 'Phoenix',  efficiency: .35}, 
       {name: 'Los Angeles', efficiency: .45}, 
       {name: 'Miami',  efficiency: .75}, 
       {name: 'London',  efficiency: .39}, 
       {name: 'Moscow',  efficiency: .95}, 
       {name: 'Hogwarts', efficiency: .99} 
      ] 
     }); 
    } 

Answer 1

Вы создаете свой магазин на нагрузке тела, то есть после того, как список был загружен таким образом объект newStore пуст, когда список необходимо. Поместите этот код:

Ext.regModel('Plants', { 
     fields: ['name', 'efficiency'] 
    }); 

    newStore = new Ext.data.JsonStore({ 
     model : 'Plants', 
     sorters: 'name', 

     getGroupString : function(record) { 
      return record.get('name')[0]; 
     }, 

     data: [ 
      {name: 'Milwaukee', efficiency: .85}, 
      {name: 'New York', efficiency: .65}, 
      {name: 'St Paul',  efficiency: .73}, 
      {name: 'Phoenix',  efficiency: .35}, 
      {name: 'Los Angeles', efficiency: .45}, 
      {name: 'Miami',  efficiency: .75}, 
      {name: 'London',  efficiency: .39}, 
      {name: 'Moscow',  efficiency: .95}, 
      {name: 'Hogwarts', efficiency: .99} 
     ] 
    }); 

Прямо перед:

plantanalyzer.views.BuildingList = Ext.extend(Ext.Panel, { 
dockedItems: [{ 
      dock: 'top', 
      html: '<img src="images/logo.jpg"/>' 
     }, 
     { 
     xtype: 'list', 
     itemTpl : '{name}', 
     grouped : true, 
     indexBar: true, 
     store: newStore 

    }] 
}); 

Чтобы проверить, действительно ли это так.

Еще одно предположение заключается в том, что вы должны поместить список в элементы панели, а не в dockedItems. Кстати, ваш код плохо структурирован. Вы должны следовать за клиентом MVC. Проверьте это https://vimeo.com/17705448 и http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/.