sencha touch2.3.1入门学习(1)

最新推荐文章于 2015-09-20 00:39:42 发布

Mesut_Ozil

最新推荐文章于 2015-09-20 00:39:42 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/xizai2012/article/details/20462117

版权

javascript 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

sencha touch

4 篇文章 0 订阅

订阅专栏

1:到官网下载http://www.sencha.com/products/touch/download/,我下载最新版本2.3.1a;

二：建立文件夹目录结构如下

其他文件夹自行建立，touch-2.3是第一步官网下载解压而来。

三：编写代码：

1:index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>wifiApp</title>
    <link rel="stylesheet" type="text/css" href="touch-2.3/resources/css/sencha-touch.css">
    <script type="text/javascript" src = "touch-2.3/sencha-touch-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>

</body>
</html>

2:app.js

/**
 * Created by Chongshi Tan on 14-3-4.
 */

Ext.application( {
    name: 'WifiApp',
    controllers: ['WifiController'],
    views: ['WifiListContainer'],
    launch: function() {
        var wifiListContainer = Ext.create('WifiApp.view.WifiListContainer');
        Ext.Viewport.add(wifiListContainer);
    }
});

3:WifiListContainer.js

/**
 * Created by Chonshi Tan on 14-3-4.
 */

Ext.define("WifiApp.view.WifiListContainer", {
    extend: 'Ext.Container',
    requires: ['Ext.Toolbar'],
    config: {
        items: [{
            xtype: 'toolbar',
            docked: 'top',
            title: '开关列表',
            items: [{
                xtype: 'spacer'
            },{
                xtype: 'button',
                text: 'New',
                ui: 'action',
                iconCls: 'add',
                id: 'new-wifiList-btn'
            }]
        }]
    }
});

4:WifiController.js

/**
 * Created by Chongshi Tan on 14-3-4.
 */

Ext.define('WifiApp.controller.WifiController', {
    extend: 'Ext.app.Controller',
    launch: function() {
        this.callParent();
        console.info("lauch");
    },
    init: function() {
        this.callParent();
        console.info('init');
    },
    config: {
        refs: {
            newWifiBtn: "#new-wifiList-btn"
        },
        control: {
            newWifiBtn: {
                tap: 'onNewWifi'
            }
        }
    },
    onNewWifi: function() {
        console.log("onNewWifi");
    }
});

四：运行效果，火狐浏览器输入：http://localhost:63342/wifiapp/index.html

五：最后感谢

yanwushu

博客教程：http://blog.csdn.net/yanwushu/article/category/1235170

在他的代码上修改用最新的库做了一些改进和测试的demo，后续继续学习……

Mesut_Ozil

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
sencha touch2.3.1入门学习(1)

1:到官网下载http://www.sencha.com/products/touch/download/,我下载最新版本2.3.1a;二：建立文件夹目录结构如下其他文件夹自行建立，touch-2.3是第一步官网下载解压而来。三：编写代码：1:index.html wifiApp 2:app.j
复制链接

扫一扫