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方法
    }
});

Sencha Touch对DOM的访问及控制的更多相关文章

  1. sencha touch笔记（6）——路由控制（1）

    做项目的时候在界面的跳转上遇到了挺大的问题,本来跳转不想通过路由来控制的,没办法,只能再去看一下路由的跳转方式了. 应用程序的界面发生改变后,可以通过路由让应用程序的界面返回到改变之前的状态,例如浏览 ...

  2. sencha touch 手势识别左右滑动

    sencha touch 中添加手势识别非常简单,就是监听 dom 元素的 move 事件: 1. 为你的 view 注册 swipe 事件 // 为当前 view 注册手势滑动事件 Ext.get( ...

  3. 再探 Ext JS 6 (sencha touch/ext升级版) 变化篇 (编译命令、滚动条、控制层、模型层、路由)

    从sencha touch 2.4.2升级到ext js 6,cmd版本升级到6.0之后发生了很多变化 首先从cmd说起,cmd 6 中sencha app build package不能使用了,se ...

  4. Sencha Touch 2 实现跨域访问

    最近要做手机移动App,最后采用HTMML5来做框架用Sencha Touch,在数据交互时遇到了Ajax跨域访问,在Sencha Touch 2中,实现跨域访问可以使用Ext类库提供给我们的类Ext ...

  5. 选择移动web开发框架研究——有mui、frozenui以及Sencha Touch等

    纯粹的总结一下移动web开发框架,移动 web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家 ...

  6. sencha touch 常见问题解答(1-25)

    欢迎留言补充,持续更新中... 1.sencha touch 是什么? 答:Sencha touch框架是世界上第一个基于HTML 5的移动应用框架.它可以让你的Web应用看起来像网络应用.美丽的用户 ...

  7. sencha touch 入门系列 （五）sencha touch运行及代码解析（上）

    由于最近项目比较忙,加之还要转战原生开发,所以很久没更新了,今天我们接着上一次的内容往下讲: 首先我们打开index.html,这是我们整个程序的访问入口,也是整个项目的引入地: <!DOCTY ...

  8. sencha touch 问题汇总

    做sencha touch有一段时间了,目前而言,sencha touch在android上问题比较严重,在此对android中sencha touch的问题做一些汇总: 1.内存问题: 打包成安装程 ...

  9. sencha touch 入门系列 （四）sencha touch 新建项目目录结构解析

    通过上一章节的操作,我们的项目已经创建完成了, 大家通过http://127.0.0.1/MyFirst/应该都已经访问到了自己的应用, 接下来,我们展开我们项目,如图所示: 一.目录结构 1. .s ...

随机推荐

  1. IntPtr问题

    public aaa(IntPtr myPtr,int left, int top, int width, short height) 这里myPtr应该是对应到一块内存,你需要查看aaa函数是如何把 ...

  2. ajax读取txt文件

    注意url为网络路径 <html><head><script type="text/javascript">  function loadXML ...

  3. js 保留两位小数

    1. 最笨的办法....... function get() { var s = 22.127456 + ""; var str = s.substring(0,s.indexOf ...

  4. HTML5中的服务器‘推送’技术 -Server-Sent Events

    转帖:http://www.developersky.net/thread-63-1-1.html 一直以来,HTTP协议都是严格遵循Request-Response模型的.客户端发送一个Reques ...

  5. Windows 下 Django/python 开发环境配置

    1.安装 Aptana/Eclipse Aptana是在eclipse上二次开发的一个开源的集成开发环境,内置python编译器 http://www.aptana.com/ 2. 安装python ...

  6. 凯恩斯主义VS货币主义

    Milton Friedman在1960年代后期以及整个1970年代,到处不知疲倦地像传教士一般地宣讲他的货币主义.当时,美联储成员几乎清一色地是凯恩斯主义者.你可以想像Friedman的对手是多么强 ...

  7. mysql入库中文乱码问题

    mysql> show variables like '%char%';+--------------------------+----------------------------+| Va ...

  8. Ubuntu之修改用户名和主机名

    记得曾几何时,想把自己电脑的“乌班兔儿”取个响亮的名字,但是问了很久度娘和谷哥,都要我把当前用户删除了(userdel -r xxx),重新建一个用户(adduser xxx),但是,我的电脑是所有环 ...

  9. c++多态的简单理解

    基类中有一个抽象函数 很多个子类继承这个基类 要想使用将子类的对象赋值给基类对象,且使用基类对象可以调用到子类对象的方法,那么这个方法必须是在基类中抽象的,子类中实现的.如果基类中这个方法不是抽象方法 ...

  10. js中调用mangeto的js翻译

    第一步: <script type="text/javascript"> Translator.add('英文','<?php echo this->__( ...