Sencha Touch对DOM的访问及控制

时间:2022-11-01 10:37:20

HTML代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一个简单的示例面板</title>
<link rel="stylesheet" type="text/css" href="../../css/sencha-touch.css">
<script src="../../sencha-touch.js"></script>
<script src="app-all.js"></script>
</head>
<style type="text/css">
    .colorRed {
        color:blue;   
    }
</style>
<body>
<div>Hello, World</div>
</body>
</html>

JS代码:

Ext.application({
    name : 'myApp',
    icon : '../../images/icon.png',
    glossOnIcon : false,
    phoneStartupScreen : '../../images/phone_startup.png',
    tabletStartupScreen : '../../images/tablet_startup.png',
    launch : function() {
        //panel以div元素的形式显示在页面中
        var panel = Ext.create('Ext.Panel', {
        //或var panel = Ext.create('Ext.lib.Panel', {
            fullscreen : true,    //指定面板尺寸是否自动扩展为浏览器窗口的尺寸
            id : 'myPanel',        //id将作为面板元素生成的div层的id,切记唯一性
            //style : 'color:red',    //CSS样式,当styleHtmlContent配置选项为false时,CSS样式将被忽略,默认为true
            html : '一个简单的示例面板'    //生成html代码,这段代码将被插入div层中
        });
        /*
            还可以
            var panel = new Ext.Panel({
               
            });
            或
            var panel = new Ext.lib.Panel({
               
            });
        */
        Ext.Viewport.add(panel);    //在这里它可以省去
        //Viewport和panel类似,也是以div形式显示在页面中,但它在launch之前就被创建,且可以向它里面添加其他组件
        Ext.get('myPanel').addCls('colorRed');    //访问DOM
        //Ext.get方法并不返回组件,他只是Ext.dom.Element对象;若要返回组件,则使用Ext.ComponentManager.get方法
    }
});