A SenchTouch2 Simple Example Using Tab Pages and Buttons

Again, I find myself going back to basics when trying to make my SenchaTouch2 Project work. Today, I updated my framework to Sencha’s latest alpha release of the tools (p4). I often make these examples because I’m trying to prove there is a SenchaTouch bug and usually find out it’s my bug somehow. So, since I went to the trouble of making a simple example of two stand alone buttons that switch between tab pages, I thought I’d blog it.

Here is what we get ultimately. When clicking on b1 or b2, the home and the contact tab are selected automatically (same as clicking on those two items in the tab bar).

One thing I find a little odd, is that to create the class, you say Ext.TabPanel and not Ext.tab.Panel. (OK, I just tested that and both work)

And, here is the code:

<!DOCTYPE html>
<!— Auto Generated with Sencha Designer —>
<!— Modifications to this file will be overwritten. —>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>AgelessST2</title>
<link rel=“stylesheet” type=“text/css” href=“sencha-touch-2.0.0-pr3/resources/css/sencha-touch.css”/>
<script type=“text/javascript” src=“sencha-touch-2.0.0-pr3/sencha-touch-all-debug.js”></script>
&lt;script type=<span class="str">&quot;text/javascript&quot;</span>  &gt;

    Ext.setup({
        onReady: <span class="kwrd">function</span> () {

            <span class="kwrd">var</span> pan = Ext.create(<span class="str">'Ext.TabPanel'</span>, {
                height: 150,
                defaults: {
                    styleHtmlContent: <span class="kwrd">true</span>
                },
                items: [
                    {

                        title: <span class="str">'Home'</span>,
                        html: <span class="str">'Home Screen'</span>
                    },
                    {

                        title: <span class="str">'Contact'</span>,
                        html: <span class="str">'Contact Screen'</span>
                    }
                ]
            });

            <span class="kwrd">var</span> buttonPannel = Ext.create(<span class="str">'Ext.Panel'</span>, {
                layout: <span class="str">'hbox'</span>,
                items: [
                        {
                            xtype: <span class="str">'button'</span>,
                            text: <span class="str">'b1'</span>,
                            handler: <span class="kwrd">function</span> (button) {
                                pan.setActiveItem(0);
                            }
                        },
                        {
                            xtype: <span class="str">'button'</span>,
                            text: <span class="str">'b2'</span>,
                            handler: <span class="kwrd">function</span> (button) {
                                pan.setActiveItem(2);
                            }
                        }
            ]
            });

            Ext.Viewport.add({
                fullscreen: <span class="kwrd">true</span>,
                layout: <span class="str">'vbox'</span>,
                items: [buttonPannel, pan]
            });
        }
    });

  


<span class="kwrd">&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span>
</head>
<body></body>
</html>

Hope this helps.