開始 Sencha Touch 2 之旅之四

在文章的最後，我們回過頭來再來添加一個聯絡表格。我們的最後一個tab，包含一個FromPanel和一個FieldSet：

//We've added a third and final item to our tab panel - scroll down to see it

Ext.application({

    name: 'Sencha',

 

    launch: () {

        Ext.create("Ext.TabPanel", {

            fullscreen: true,

            tabBarPosition: 'bottom',

 

            items: [

                {

                    title: 'Home',

                    iconCls: 'home',

                    cls: 'home',

                    html: [

                        '<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',

                        '<h1>Welcome to Sencha Touch</h1>',

                        "<p>You're creating the Getting Started app. This demonstrates how ",

                        "to use tabs, lists and forms to create a simple app</p>",

                        '<h2>Sencha Touch (2.0.0pr1)</h2>'

                    ].join("")

                },

                {

                    xtype: 'list',

                    title: 'Blog',

                    iconCls: 'star',

 

                    itemTpl: '{title}',

                    store: {

                        fields: ['title', 'url'],

                        data: [

                            {title: 'Ext Scheduler 2.0', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'},

                            {title: 'Previewing Sencha Touch 2', url: 'sencha-touch-2-what-to-expect'},

                            {title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'},

                            {title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'}

                        ]

                    }

                },

                //this is the new item

                {

                    title: 'Contact',

                    iconCls: 'user',

                    xtype: 'formpanel',

                    url: 'contact.php',

                    layout: 'vbox',

 

                    items: [

                        {

                            xtype: 'fieldset',

                            title: 'Contact Us',

                            instructions: '(email address is optional)',

                            items: [

                                {

                                    xtype: 'textfield',

                                    label: 'Name'

                                },

                                {

                                    xtype: 'emailfield',

                                    label: 'Email'

                                },

                                {

                                    xtype: 'textareafield',

                                    label: 'Message'

                                }

                            ]

                        },

                        {

                            xtype: 'button',

                            text: 'Send',

                            ui: 'confirm',

                            handler: () {

                                this.up('formpanel').submit();

                            }

                        }

                    ]

                }

            ]

        }).setActiveItem(2);

    }

});

 

在第三個tab中，我們添加了一個包含三個欄位和一個提交按鈕的表格。在該頁面我們使用了VBOX布局，布局來定位下方的提交按鈕。fieldset本身配置了一個title 和一些 instructions(提示資訊)。提示。最後，我們用了一個 textfield，一個emailfield 還有一個 textareafield。

關於本入門級文章的例子原始碼你可以從下載的 Sencha Touch 2.0 SDK的開發包的 examples/getting_started檔案目錄中找到。

更多參考內容

迄今為止我們已經完成了一個非常基本的應用程式執行個體，應該需要進一步探索架構的其他內容了的時候了。在這裡，我們有選擇的提供一些開發指南和組件的執行個體供大家學習。並且隨著Beta版的發展，我們也將會推出更多的指南用以構建更大規模的應用程式。