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. 关于 zend studio 中有些php 内置函数没有提示，或是有‘小黄色感叹号’

    解决办法: 1.修改项目 .buildpath 文件 <?xml version="1.0" encoding="UTF-8"?> <buil ...

  2. jsp中包含JAVA代码

    在JSP中大部分都是由脚本小程序组成,所谓的脚本小程序就是里面直接包含了JAVA代码. 在JSP中Scriptlet一共分为三种:        · <%%>:定义局部变量,编写语句    ...

  3. ajax中返回包含html的奇葩问题

    如果通过ajax返回一串包含有html标签的字符串,然后添加到相应的html文档位置,如果标签外含有空格或者换行等就会报错.

  4. 关于css3的背景切割（background-clip）、背景原点（background-origin）的使用

    一.背景切割   background-clip :border-box | padding-box | content-box   作用:为将背景图片做适当的裁剪,以适应需要.   默认格式 bac ...

  5. CSS 3 属性学习大纲

    1. Gradient 渐变 2. RGBA 颜色透明 3. Border-radius 圆角 4. text-shadow 文字阴影 5. box-shadow 图层阴影 6. Transform ...

  6. Android设置全屏

    全屏显示 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLA ...

  7. firemonkey打开子窗体（匿名回调函数）

    procedure TForm1.Button1Click(Sender: TObject);varChildForm: TForm2;beginChildForm := TForm2.Create( ...

  8. Build A Micro Team

    最近这两周一直在忙,忙到忘记回QQ和微信的程度,甚至有两天下班回来直接躺平,虽说忙碌但是也收获了不少. Start 说起来有趣,最近在忙的这个项目最初是公司设立的用于工程师在业余时间开发的projec ...

  9. Jquery html页面处理基础

    1.怎样获得浏览器的可视高度?   var windHight = $(window).height(); //获得浏览器的可视高度 2.怎样获得滚动条相对于顶部的高度?   var scrollHi ...

  10. Floyd算法应用-医院选址问题

    1)问题描述 n个村庄之间的交通图可以用有向网图来表示,图中边<vi, vj>上的权值表示从村庄i到村庄j的道路长度.现在要从这n个村庄中选择一个村庄新建一所医院,问这所医院应建在哪个村庄 ...