Question

First, I am really sorry for my poor english.

Now when I use Ext.List in one page, It work fine when orientation change, and anything will redraw. Like below:

 App.views.HomeLogin = Ext.extend(Ext.List, {
           ui:'round',
           style:'background:url([e-mail]);background-size:100% 100%',

                xtype:'list',
                store:'LoginItems',
               itemTpl: '<span>{item}</span>',
});
Ext.reg('HomeLogin', App.views.HomeLogin);

But now I want multiple list in one page, unfortunately it not redraw when orientation change, here my code:

var firstList = new Ext.List({


                            style:'background:none;margin-bottom:-40px',
                            xtype:'list',  
                            ui: 'round',
                            store:'FirstItems',
                            itemTpl:'<div style="font-weight:bold;width:100%">{item}</div>',
});

var segmentedButton = new Ext.SegmentedButton({

                                              layout: {
                                              //type: 'vbox',
                                              pack: 'center',

                                              },
                                              style:'padding-left:20px;padding-right:20px',
                                              items: [
                                                      {
                                                      ui:'action',
                                                      style:'width:50%;height:140%',
                                                      text: 'Sailing'
                                                      },
                                                      {
                                                      ui:'action',
                                                      style:'width:50%;height:140%',
                                                      text   : 'Arrival',
                                                      pressed: true
                                                      }
                                                      ],
});

var secondList = new Ext.List({
                                      style:'background:none;margin-top:-8px;margin-bottom:-40px',
                                      xtype:'list',  
                                      ui: 'round',
                                      store:'SecondItems',
                                      itemTpl:'<div style="font-weight:bold;width:100%">{item}</div>',
                                      listeners:{
                                      afterrender:function(){
                                      this.scroller.disable();
                                      }
                                      },
})

App.views.HomeView = Ext.extend(Ext.Panel,{
                                //layout:'fit',
                                        //fullscreen:true,
                                style:'background:url([e-mail]);background-size:100% 100%',
                                scroll: 'vertical',
                                        items:[
                                               firstList,
                                               //dateTitle,
                                               segmentedButton,
                                               secondList,
                                               //recentTitle

                                        ]


                                });
Ext.reg('HomeView', App.views.HomeView);

I want my multiple list can redraw when orientation change!
Can anyone help?
I will be grateful!

Answer 1

You could try to listen for the orientationchange event Sencha Docs Orientation Change and then call refresh on both lists