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. （转）C#与C++之间类型的对应

    C#与C++之间类型的对应 Windows Data Type .NET Data Type BOOL, BOOLEAN Boolean or Int32 BSTR String BYTE Byte ...

  2. Hql参数占位符使用（转+整理）

    在Hibernate 4版本中,对于Hql有一点点改变,如果你还是按照以前的方式去编写HQL Query query = sessionFactory.openSession().createQuer ...

  3. zoj1136 Multiple

    记忆化搜索,因为要求最小的,肯定是从小到大,依次添加,那么通过bfs,队列貌似是最好的选择.因为很可能那个数爆long long,所以采用字符串存储,并记录余数,通过模拟除法的方式来写. 剪枝:因为后 ...

  4. C++语言学习——LRJ入门经典笔记

    1.scanf的输入格式,空格.TAB和回车符都是无关紧要,所以按Enter键并不意味着输入结束. 告诉程序输入结束的方式: 在windows下,输入完毕后先按Enter键,再按Ctrl+Z键,最后再 ...

  5. DIR和dirent结构体

    DIR结构体类似于FILE,是一个内部结构 struct __dirstream { void *__fd; char *__data; int __entry_data; char *__ptr; ...

  6. Redis的安装和配置

    在网站redis.io复制下载链接 wget http://download.redis.io/releases/redis-3.0.5.tar.gz tar zxvf redis-3.0.5.tar ...

  7. 快速学习javascript对象-遍历对象

    为了方便了解每个javascript对象包含的方法,我写一个函数. function GetCollection(obj){ try{ if(obj){ var sType=""; ...

  8. php 垃圾回收机制----写时复制和引用计数

    PHP使用引用计数和写时复制来管理内存.写时复制保证了变量间复制值不浪费内存,引用计数保证了当变量不再需要时,将内存释放给操作系统. 要理解PHP内存管理,首先要理解一个概念----符号表. 符号表的 ...

  9. Composer加速

    在composer.json中添加{ "repositories": [ {"type": "composer", "url&qu ...

  10. Python学习路径和个人增值（整合版）

    PS:内容来源于网络 一.简介         Python是一种面向对象.直译式计算机程序设计语言,由Guido van Rossum于1989年底发明.由于他简单.易学.免费开源.可移植性.可扩展 ...