第二章 SenCha Touch 2.0 基础知识

1. 新建SenCha Touch测试项目

1. 建立项目目录
2. 在项目目录里，新建名为css的文件夹，把resources目录下的css文件夹里的sencha-touch.css拷贝到新的css文件夹里面。
3. 把sencha-touch-debug.js放到根目录
4. 拷贝src目录下的所有文件
5. 新建app目录放置脚本文件

如图：

 

2.应用程序命名与启动

参考代码

Ext.application({//Ext.application方法定义应用程序
    name: 'myApp',//应用程序名称
    icon: 'images/icon.png',//应用程序启动图标
    glossOnIcon: false,//是否取消ios系统自动添加的gloss特效
    phoneStartupScreen: 'images/phone_startup.png',//iphone的启动logo，320*460
    tabletStartupScreen: 'images/tablet_startup.png',//ipad启动logo，768*1004
    launch: function() {   
        //程序加载后调用的函数
    }
});

 

3.Panel 组件

创建时可以使用Ext.create('Ext.Panel', {});或new 'Ext.Panel'({});两种方式

var panel = Ext.create('Ext.Panel', {
            fullscreen: true,//是否自动扩展浏览器窗口尺寸
            id:'myPanel',//元素ID
            style:'color:red',//面板组件被渲染时的样式
            html: '一个简单的示例面板'//HTML代码
        });

 

4.Viewport组件

类似Panel的容器组件，它与Panel的区别是在调用应用程序的launch函数之前该组件就被自动创建，且该组件的fullscreen默认为true。

Ext.Viewport.add(panel);//把一个Panel添加到Viewport

 

5.Ext.get方法，Ext.ComponentManager.get方法和Ext.fly方法

Ext.get方法：返回的不是组件而是组件所生产元素的Ext.dom.Element对象。

如：

Ext.get('MyPanel').addCls('colorRed');

Ext.ComponentManager.get方法:返回组件。

如:

Ext.ComponentManager.get('MyPanel').add('subPanel');

Ext.fly方法:使用Ext.fly方法的元素节点开辟一块内存，下一次使用Ext.fly方法的元素节点将占据相同地址的内存。

如：

var newPanel=Ext.fly('myPanel');
newPanel.addCls('colorRed');
//应用程序中这段代码之后不再引用id为myPanel的元素
var newPanel=Ext.fly('subPanel');
newPanel.addCls('colorBlue');
//应用程序中这段代码之后不再引用id为subPanel的元素