zoukankan      html  css  js  c++  java
  • 开始 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版的发展,我们也将会推出更多的指南用以构建更大规模的应用程序。

  • 相关阅读:
    服务器并发由200到4000并发的一个优化
    HTTP之一 If-Modified-Since & If-None-Match
    HTTP之二 http 301 和 302的区别
    003_内存的深入理解
    002_IO磁盘深入理解
    django学习笔记【003】创建第一个带有model的app
    MySQL innodb_autoinc_lock_mode 详解
    django学习笔记【002】创建第一个django app
    django学习笔记【001】django版本的确定&创建一个django工程
    innodb引擎redo文件维护
  • 原文地址:https://www.cnblogs.com/breg/p/2288417.html
Copyright © 2011-2022 走看看