My chart and dropdown list are inside a tabpanel, the tabpanel is inside a portlet. When I change the dropdown list value, the chart data will be reloaded. The problem is after I move the portlet around, and when I change the dropdown list value, the chart data is not reloaded. The flash seems to be dead. Below is my code:

Code:
function generateData(){
    var data = [];
    for(var i = 0; i < 5; ++i){
        if (i<6) {
            data.push([Date.monthNames[i], (Math.floor(Math.random() *  11) + 1) * 100]);
        } else {
            data.push([Date.monthNames[i], (Math.floor(Math.random() *  11) + 1)]);
        }
        
    }
    return data;
}

realChart = null;

function changeData() {
    realChart.store.loadData(generateData());
}

Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
    
var store = new Ext.data.ArrayStore({
        fields: ['month', 'hits'],
        data: generateData()
    });

realChart = new Ext.chart.ColumnChart({      
            id: 'rchart',
            store: store,
            yField: 'hits',
            xField: 'month',
            xAxis: new Ext.chart.CategoryAxis({
                title: 'Month'
            }),
            yAxis: new Ext.chart.NumericAxis({
                title: 'Hits'
            }),
            extraStyle: {
               xAxis: {
                    labelRotation: -90
                }
            }
        });
   var typeMask = null;
   var chart = new Ext.Panel({
           id : 'realChart',
        autoWidth: true,
        height: 400,
        title: 'Column Chart with Reload - Hits per Month',
        tbar: [{
            text: 'Hide',
            handler: function(){
                realChart.setVisible(false);            
            }},{
            text: 'Show',
            handler: function(){
                realChart.setVisible(true);  
            }
        }],
        items:[Ext.get('testS'),realChart] 
    });
    
    var myTabs = new Ext.TabPanel({
        title: 'ttttt',
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        width:300,
        height:250,
        activeTab : 0,
        defaults: {autoScroll:true},
        items:[{title: 'test',items:chart},{title: 'test1', html:'tetettet'}]
    });
    
    var index = 0;
    while(index < 5){
        myTabs.add({
            title: 'New Tab ' + (++index),
            iconCls: 'tabs',
            html: 'Tab Body ' + (index) + '<br/><br/>'
                    + 'testt',
            closable:true
        }).show();
    }
    
    // create some portlet tools using built in Ext tool ids
    var tools = [{
        id:'gear',
        handler: function(){
            Ext.Msg.alert('Message', 'The Settings tool was clicked.');
        }
    },{
        id:'close',
        handler: function(e, target, panel){
            panel.ownerCt.remove(panel, true);
        }
    }];
    
    var typeMask;
       
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
            region:'west',
            id:'west-panel',
            title:'West',
            split:true,
            width: 200,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            margins:'35 0 5 5',
            cmargins:'35 5 5 5',
            layout:'accordion',
            layoutConfig:{
                animate:true
            },
            items: [{
                html: Ext.example.shortBogusMarkup,
                title:'Navigation',
                autoScroll:true,
                border:false,
                iconCls:'nav'
            },{
                title:'Settings',
                html: Ext.example.shortBogusMarkup,
                border:false,
                autoScroll:true,
                iconCls:'settings'
            }]
        },{
            xtype:'portal',
            region:'center',
            margins:'35 5 5 0',
            items:[{
                columnWidth:.33,
                style:'padding:10px 0 10px 10px',
                items:[{
                    title: 'Grid in a Portlet',
                    layout:'fit',
                    tools: tools,
                    items: new SampleGrid([0, 2, 3])
                },{
                    title: 'Another Panel 1',
                    tools: tools,
                    html: Ext.example.shortBogusMarkup
                },{layout:'fit', title:'testTabPanel', animCollapse:false, items:myTabs}]
            },{
                columnWidth:.33,
                style:'padding:10px 0 10px 10px',
                items:[{
                    title: 'Panel 2',
                    tools: tools,
                    html: Ext.example.shortBogusMarkup
                },{
                    title: 'Another Panel 2',
                    tools: tools,
                    html: Ext.example.shortBogusMarkup
                }]
            },{
                columnWidth:.33,
                style:'padding:10px',
                items:[{
                    title: 'Panel 3',
                    tools: tools,
                    html: Ext.example.shortBogusMarkup,
                    tbar: [{
                        text: 'Click',
            handler: function(){
                typeMask.show();
            }},{
                        text: 'hide',
            handler: function(){
                typeMask.hide();
            }
                    }]
                },{
                    title: 'Another Panel 3',
                    tools: tools,
                    html: Ext.example.shortBogusMarkup
                }]
            }]
            
            /*
             * Uncomment this block to test handling of the drop event. You could use this
             * to save portlet position state for example. The event arg e is the custom 
             * event defined in Ext.ux.Portal.DropZone.
             */
//            ,listeners: {
//                'drop': function(e){
//                    Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' + 
//                        e.columnIndex + '<br />Position: ' + e.position);
//                }
//            }
        }]
    });
     realChart.on({
                move : function(chart,x, y) {
                    alert('moved');
                }
            });
    typeMask = new Ext.LoadMask(Ext.get('realChart'),{msg:"Please wait..."});
});
HTML Markup:

HTML Code:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Custom Layouts and Containers - Portal Example</title>

    <!-- ** CSS ** -->
    <!-- base library -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- overrides to base library -->
    <link rel="stylesheet" type="text/css" href="../ux/css/Portal.css" />

    <!-- page specific -->
    <link rel="stylesheet" type="text/css" href="sample.css" />
    <style type="text/css">

    </style>

    <!-- ** Javascript ** -->
    <!-- ExtJS library: base/adapter -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

    <!-- ExtJS library: all widgets -->
    <script type="text/javascript" src="../../ext-all-debug.js"></script>

    <!-- overrides to base library -->

    <!-- extensions -->
    <script type="text/javascript" src="../ux/Portal.js"></script>
    <script type="text/javascript" src="../ux/PortalColumn.js"></script>
    <script type="text/javascript" src="../ux/Portlet.js"></script>

    <!-- page specific -->
    <script type="text/javascript" src="sample-grid.js"></script>
    <script type="text/javascript" src="../shared/examples.js"></script>

    <script type="text/javascript" src="portal.js"></script>

</head>
<body>
    <div id="select1" class="x-hide-display">
        <select id="testS" onchange="javascript:changeData();">
                <option>11</option>
                <option>22</option>
                <option>333</option>
</select>
        
    </div>
</body>
</html>