Heim  >  Artikel  >  Datenbank  >  Sencha Touch 2 快速入门系列(一)

Sencha Touch 2 快速入门系列(一)

WBOY
WBOYOriginal
2016-06-07 15:27:371245Durchsuche

本文已添加至Sencha Touch 2快速入门系列索引: http://blog.csdn.net/ardy_c/article/details/7544470 http://blog.csdn.net/ardy_c/article/details/7419434 为了帮助大家了解Sencha Touch 2,特意写这系列的博文。文章可能写得不好,希望能与大家多多交流

本文已添加至Sencha Touch 2快速入门系列索引:http://blog.csdn.net/ardy_c/article/details/7544470

http://blog.csdn.net/ardy_c/article/details/7419434



为了帮助大家了解Sencha Touch 2,特意写这系列的博文。文章可能写得不好,希望能与大家多多交流。部分资源来源于官方API文档,地址如下:http://docs.sencha.com/touch/2-0/


准备

开始开发前,请先到下面的地址下载Sencha Touch 2的包:http://www.sencha.com/products/touch/download/ 。下载完解压后你会发现包里有很多文件。里面有api文档、开发包和一些实例等等。现在,我们只需要sencha-touch-debug.js和resources/css/sencha-touch.css文件即可。(sencha-touch-debug.js文件里面是未经压缩的带注释的js代码,方便我们阅读和debug)。

包文件到手了,选上一个你喜欢的IDE,建立一个web项目并把文件引进吧。我选了Aptana Studio建立了以下目录结构:

Sencha Touch 2 快速入门系列(一)


开始种码

在根目录新建一个app.html文件,在app目录下新建一个app.js文件(用于编写我们的js代码)。然后,把需要的内容引进app.html文件中,如下:



    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>First App</title>
    <link rel="stylesheet" href="js/lib/sencha-touch.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <script type="text/javascript" src="js/lib/sencha-touch-debug.js"></script>
    <script type="text/javascript" src="app/app.js"></script>



1.打开 app/app.js文件,正式开始编写我们第一个Sencha Touch App了。今天我们利用Tab Panel来建立一个拥有四个页面的App。首先,我们先建立一个Tab Panel,在app.js里种入如下代码:
Ext.application({
    name: 'Sencha',

    launch: function() {// 应用启动时执行该方法
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            items: [
                {
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Welcome'
                }
            ]
        });
    }
});


保存后,可用支持HTML5的浏览器(我是chrome爱好者)打开app.html文件观看效果,如下

Sencha Touch 2 快速入门系列(一)


现在,我们来改进一下这个页面:



打开css/style.css文件,输入:

.home {text-align:center;}

然后,快快看看效果。

Sencha Touch 2 快速入门系列(一)


2.现在,让我们来建立第二个页面,blog页面。我们可以选择新建另一个js文件,然后修改app.html里面的引用;或者直接选择覆盖app.js:

Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    xtype: 'nestedlist',// 这次建立一个嵌套列表(嵌套列表是什么,这里就不解释了)
                    title: 'Blog',
                    iconCls: 'star',
                    displayField: 'title',

                    store: {// 这里是建立一个存放数据的data store,以后将对data store进行详细介绍
                        type: 'tree',

                        fields: [
                            'title', 'link', 'author', 'contentSnippet', 'content',
                            {name: 'leaf', defaultValue: true}
                        ],

                        root: {
                            leaf: false
                        },

                        proxy: {// 我们使用ajax方式从google上获取一些blog的数据,通过jsonp作为传递的载体,所以要联网才能看到效果喔
                            type: 'jsonp',
                            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                            reader: {// 这个是读取数据的reader,数据取回来后通过reader转成可被js认识的数据对象,我们要教会reader如何读
                                type: 'json',// 因为返回来的数据是json,我们要定义一个json reader
                                rootProperty: 'responseData.feed.entries'  // 将数据里面的entries节点当作根节点去读取数据
                            }
                        }
                    },

                    detailCard: {// 建立一个用于显示详细内容的panel
                        xtype: 'panel',
                        scrollable: true,
                        styleHtmlContent: true
                    },

                    listeners: {// 这里是监听点击列表某一项后所执行的方法
                        itemtap: function(nestedList, list, index, element, post) {
                            this.getDetailCard().setHtml(post.get('content'));
                        }
                    }
                }
            ]
        });
    }
});

种完没?一起来看看效果:

Sencha Touch 2 快速入门系列(一)


点击每一项后可以切换到详细内容页面。


3.完成了上面的工作,我们再来建立一个页面,Contact页面。种子如下,拿去种码吧:

Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [
                {
                    title: 'Contact',
                    iconCls: 'user',
                    xtype: 'formpanel',// 这次建立的是form panel
                    url: 'contact.php',// 提交的action地址是contact.php。我们没有这个文件,所以,就不要提交了。
                    layout: 'vbox',

                    items: [// 这里,我们有两个成员
                        {// 第一个成员是fieldset,将一些form元素包装起来。
                            xtype: 'fieldset',
                            title: 'Contact Us',
                            instructions: '(email address is optional)',
                            items: [
                                {
                                    xtype: 'textfield',// input text
                                    label: 'Name'
                                },
                                {
                                    xtype: 'emailfield',// input email,html5添加进来的新成员
                                    label: 'Email'
                                },
                                {
                                    xtype: 'textareafield',// textarea
                                    label: 'Message'
                                }
                            ]
                        },
                        {// 第二个成员,按钮
                            xtype: 'button',
                            text: 'Send',
                            ui: 'confirm',
                            handler: function() {
                                this.up('formpanel').submit();// 处理点击事件的方法
                            }
                        }
                    ]
                }
            ]
        });
    }
});

然后,上图看真相:

Sencha Touch 2 快速入门系列(一)


4.合并。

三个栏目四个页面大家都建立过了,也体验过效果。可是,我们不是做一个app吗?这样怎么算一个。好了,现在我们将它们合并起来。

Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create("Ext.tab.Panel", {
            fullscreen: true,
            tabBarPosition: 'bottom',

            items: [// 这次,我们将三个栏目当成三个Tab Panel的成员
                {// 第一个成员,home页面
                    title: 'Home',
                    iconCls: 'home',
                    cls: 'home',
                    html: [
                        '<img     style="max-width:90%" src="http://staging.sencha.com/img/sencha.png" alt="Sencha Touch 2 快速入门系列(一)" >',
                        '<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</h2>'
                    ].join("")
                },
                {// 第二个成员,blog页面
                    xtype: 'nestedlist',
                    title: 'Blog',
                    iconCls: 'star',
                    displayField: 'title',

                    store: {
                        type: 'tree',

                        fields: [
                            'title', 'link', 'author', 'contentSnippet', 'content',
                            {name: 'leaf', defaultValue: true}
                        ],

                        root: {
                            leaf: false
                        },

                        proxy: {
                            type: 'jsonp',
                            url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                            reader: {
                                type: 'json',
                                rootProperty: 'responseData.feed.entries'
                            }
                        }
                    },

                    detailCard: {
                        xtype: 'panel',
                        scrollable: true,
                        styleHtmlContent: true
                    },

                    listeners: {
                        itemtap: function(nestedList, list, index, element, post) {
                            this.getDetailCard().setHtml(post.get('content'));
                        }
                    }
                },
                {// 第三个成员,Contact页面
                    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: function() {
                                this.up('formpanel').submit();
                            }
                        }
                    ]
                }
            ]
        });
    }
});

赶快把程序跑起来,查看一下图果吧。看是不是和下图一样?

Sencha Touch 2 快速入门系列(一)


这样,我们很快就建立了一个基于HTML5的 Web App了。是不是很简单?我们甚至可以用PhoneGap将它打包成 android或者iOS应用,发布到各自的应用商店去。至于PhoneGap,不在我们的讨论范围,在这里就不再详谈了。这次就介绍到这里。之后,我会给大家介绍Sencha Touch 2的详细内容。




Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn