Tabed Panels

[borden0108]

Hey All,

I have a new project and need to do the following embedded in a bottom tabbar.

• A Map(That takes the whole panel).
• A List (that links to a html page that can then give a brief explanation and a link to a audio file).
• A HTML page (in the panel)
• A Twitter Feed (in the panel, that links to http://twitter.com/intent/user?screen_name=TripodRadio)

Thanks
Matt (borden0108)

[Jack9]

What exactly are you asking? Here's your basic application (no data loading, no HTML or styling)

    Ext.setup({
        glossOnIcon: true
        ,onReady: function() {
            var t = new Ext.TabPanel({
                fullscreen:true,
                tabBarDock:'bottom'
                items:[
                    //A Map(That takes the whole panel).
                    new Ext.Panel({
                        html:'mapdata'
                    })

                    //A List (that links to a html page that can then give a brief explanation and a link to a audio file).
                    ,new Ext.List({
                        itemTpl:new Ext.XTemplate([
                            '<tpl for=".">',
                                '<div>Item Description</div><div><a href="">link</a></div>',
                            '</tpl>'
                        ])
                        ,store:new Ext.data.Store({
                            proxy: new Ext.data.AjaxProxy({
                                method:'post'
                                ,url:'http://wherever.com/json_datasource'
                                ,reader:'json'
                            })
                        })
                        ,itemSelector:'item-selected'
                    })

                    //A HTML page (in the panel)
                    ,new Ext.Panel({
                        html:'html'
                    })

                    //A Twitter Feed (in the panel, that links to http://twitter.com/intent/user?screen_name=TripodRadio)
                    ,new Ext.List({
                        itemTpl:new Ext.XTemplate([
                            '<tpl for=".">',
                                '<div>Item Description</div><div><a href="">link</a></div>',
                            '</tpl>'
                        ])
                        ,store:new Ext.data.Store({
                            proxy: new Ext.data.AjaxProxy({
                                 method:'post'
                                ,url:'http://twitter.com/intent/user?screen_name=TripodRadio' // needs to be json response
                                ,reader:'json' // or change this to a custom reader
                            })
                        })
                        ,itemSelector:'item-selected'
                    })
                ]
            });
        }
    });