sencha touch2.3.1入门学习(1)

1:到官网下载http://www.sencha.com/products/touch/download/,我下载最新版本2.3.1a; 二：建立文件夹目录结构如下 其他文件夹自行建立，touch-2.3是第一步官网下载解压而来。 三：编写代码： 1:index.html !DOCTYPE htmlhtmlhead meta charset=utf-8 titlew

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

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

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

三：编写代码：

1:index.html

    <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>

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，后续继续学习……