Ext.List 만 자세 변화에 렌더링

Question

Ext.List 및 Ext.Panel 코드 코드

Ext.namespace('Envato.AudioJungle.Previewer'); 
var lastItemClicked = null; // Stores the last 'play' or 'pause' item clicked on 
Envato.AudioJungle.Previewer.audioPreview = new Ext.Audio({}); // Blank audio player used to preview the items 
Envato.AudioJungle.Previewer.popularItemList = new Ext.List({ // The list of popular items 
    store: 'popularItemStore', 
    emptyText: 'No popular items found', 
    loadingText: 'Loading Items', 
    itemTpl: new Ext.XTemplate(// How we format the items when they come back 
     '<div class = "audio_jungle_item">', 
      '<img src = "{thumbnail}" class = \"thumbnail\">', 
      '<span class = "item_title">{[fm.ellipsis(values.item, 20, false)]}</span>', 
      '<span class = "item_author"> by {user} ({sales} sales)</span>', 
      '<div class = "x-button play_pause_button">Play</div>', 
     '</div>' 
    ), 
    listeners: { 
     itemtap: function(self, index, item, e) { 
      var selectedItem = self.getRecord(item); 
      var tapTarget = e.getTarget(); // Stores what we clicked on 
      if(tapTarget.innerHTML == 'Play') { // We clicked on a 'Play button' 
       if(lastItemClicked && lastItemClicked.innerHTML == 'Pause') { // Another item is currently playing 
        lastItemClicked.innerHTML = 'Play'; // Switch the button to 'Play' 
       } 
       lastItemClicked = tapTarget; // Store the currently clicked item as the last clicked item 
       lastItemClicked.innerHTML = 'Pause'; // Set the button we clicked on to 'Pause' 
       if(Envato.AudioJungle.Previewer.audioPreview.url) { // Check to see that the audio previewer is not empty 
        Envato.AudioJungle.Previewer.audioPreview.pause(); // Pause it 
       } 
       // Reset the audio previewer to play the item clicked 
       Envato.AudioJungle.Previewer.audioPreview = new Ext.Audio({ 
        id: 'audioPreview', 
        hidden: true, 
        url: selectedItem.get('preview_url'), 
        renderTo: Ext.getBody() 
       }); 
       // Play the audio 
       Envato.AudioJungle.Previewer.audioPreview.play(); 
      } else if (tapTarget.innerHTML == 'Pause') { // We clicked a pause button 
       Envato.AudioJungle.Previewer.audioPreview.pause(); // Pause playback 
       tapTarget.innerHTML = 'Play'; // Set the button to say 'Play' 
      } else { 
       Ext.Msg.confirm("Audio Jungle", "View this item at AudioJungle.com?", function(btn) { 
        if(btn == 'yes') { 
         location.href = selectedItem.get('url'); 
        } 
       }); 
      } 
     } 
    } 
}); 
Envato.AudioJungle.Previewer.optionToolbar = { 
    dock: 'top', 
    xtype: 'toolbar', 
    title: 'AudioJungle - Popular Items' 
}; 
Envato.AudioJungle.Previewer.displayPanel = new Ext.Panel({ 
    layout: 'fit', 
    fullscreen: true, 
    dockedItems: Envato.AudioJungle.Previewer.optionToolbar, 
    items: Envato.AudioJungle.Previewer.popularItemList 
}); 

스토어 코드

var popularItemFields = [{ 
    name: 'preview_url', 
    type: 'string' 
},{ 
    name: 'sales', 
    type: 'integer' 
},{ 
    name: 'user', 
    type: 'string' 
},{ 
    name: 'cost', 
    type: 'float' 
},{ 
    name: 'url', 
    type: 'string' 
},{ 
    name: 'uploaded_on', 
    type: 'date', 
    dateFormat: 'r' 
},{ 
    name: 'rating', 
    type: 'integer' 
},{ 
    name: 'tags', 
    type: 'string' 
},{ 
    name: 'thumbnail', 
    type: 'string' 
},{ 
    name: 'id', 
    type: 'integer' 
},{ 
    name: 'item', 
    type: 'string' 
},{ 
    name: 'preview_type', 
    type: 'string' 
},{ 
    name: 'length', 
    type: 'string' 
}]; 
Ext.regModel('PopularItem', { 
    fields: popularItemFields 
}); 
Envato.Stores.popularItemsStore = new Ext.data.JsonStore({ 
    sorters: 'item', 
    model: 'PopularItem', 
    storeId: 'popularItemStore', 
    autoLoad: true, 
    proxy: { 
     type: 'ajax', 
     url: 'php/scripts/envato.php', 
     extraParams: { 
      site: 'audiojungle' 
     }, 
     reader: { 
      type: 'json', 
      root: 'root', 
      idProperty: 'id' 
     } 
    }, 
    getGroupString: function(record) { 
     return record.get('item')[0]; 
    } 
}); 

Main.js 모바일 장치에서 코드

Ext.namespace('Envato', 'Envato.AudioJungle', 'Envato.AudioJungle.Previewer', 'Envato.Stores'); 
    Ext.setup({ 
     onReady: function() { 
      Envato.AudioJungle.Previewer.displayPanel.render(Ext.getBody()).doComponentLayout(); 
     } 
    }) 

(아이폰과 ipad), 도구 모음을 잘 렌더링됩니다 그러나 장치의 방향을 변경할 때까지 목록이 렌더링되지 않습니다.

크롬에서 잘 렌더링됩니다. 누구나 눈에 띄는 것을 볼 수 있습니까?

Answer 1

패널을 전체 화면으로 선언하면 true로 설정되며, 작성시 (즉, onReady 이전에) 문서 본문에 자동으로 렌더링됩니다.

Ext.setup({ 
    onReady: function(){ 
     Ext.regModel('Item', { 
      fields: ['text'] 
     }); 

     new Ext.Panel({ 
      fullscreen: true, 
      layout: 'fit', 
      dockedItems: [{ 
       xtype: 'toolbar', 
       items: { 
        text: 'I am a button' 
       } 
      }], 
      items: { 
       xtype: 'list', 
       itemTpl: '{text}', 
       store: new Ext.data.Store({ 
        model: 'Item', 
        data: [{ 
         text: 'Foo' 
        }] 
       }) 
      } 
     }); 
    } 
});