Update panel item with slide effect

[PJ_]

Hi Everybody

I have a pieces of code. Which basically displays home page with a link to the next page and then the second page is splitted into two columns. Now, on the second page I would like to replace right column with the new html content with slide effect. Left column stays as it is. I am quite new to Sencha Touch and I realise that the code probably is not the bext and could have done be better but it is working and at this time I just need this replacing right column functionality. Any help will be appreciated.

        var mainPanel = '';
        
        Ext.setup({
            tabletStartupScreen: 'tablet_startup.png',
            phoneStartupScreen: 'phone_startup.png',
            icon: 'icon.png',
            glossOnIcon: false,
            onReady: function(){
                mainPanel = new Ext.Panel({
                    fullscreen: true,
                    layout: 'card',
                    items:[{
                     layout:'card',
                     id:'index',
                     html:'<a href="" onclick="page(); return false;">go to page</a>',
                     dockedItems:[{
                         dock:"top",
                         height:"70",
                         style:"background-color:rgb(230,20,20)",
                         html:""
                     }]
                    },{
                    fullscreen: true,
                     layout:'card',
                     id:'page',
                     html:'<a href="" onclick="index(); return false;">go to index</a>',
                     dockedItems:[{
                         dock:"left",
                         html:"video"
                     },{
                         dock:"right",
                         width:"50%",
                         style:"background-color:rgb(30,220,220)",
                         scroll : 'vertical',
                         id:'list',
                        html:'<ul><li>Position 1</li><li>Position 2</li><li>Position 3</li><li>Position 4</li><li>Position 5</li><li>Position 6</li><li>Position 7</li><li>Position 8</li><li>Position 9</li><li>Position 10</li><li>Position 1</li><li>Position 2</li><li>Position 3</li><li>Position 4</li><li>Position 5</li><li>Position 6</li><li>Position 7</li><li>Position 8</li><li>Position 9</li><li>Position 10</li><li>Position 1</li><li>Position 2</li><li>Position 3</li><li>Position 4</li><li>Position 5</li><li>Position 6</li><li>Position 7</li><li>Position 8</li><li>Position 9</li><li>Position 10</li></ul>'
                     }]
                    }]
                });
            }
        });

            function index() {
                item = mainPanel.getComponent("index");
                mainPanel.setActiveItem(item,{type:'slide',direction:'right'});
            }

            function page() {
                item = mainPanel.getComponent("page");
                mainPanel.setActiveItem(item,{type:'slide',direction:'left'});
            } 

[hyperionab]

I'm not sure this is the best way to do this, but for your right panel, you can give it an ID (like id: 'rightpanel'). Then you can use Ext.getCmp('rightpanel'). Then you'll have a reference to that component, and you can change its properties. I'm not an expert, so that may not be the best way to do it, but it would probably work. :-)

[PJ_]

Great. I have been looking for this function so really useful answer. Thanks.