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>

<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({
               
            });
        */
        var subPanel = new Ext.Panel({
           
            id: 'subPanel',
            style: 'color:blue',
            html: 'panel面板中的子面板'   
        });
        Ext.Viewport.add(panel);    //在这里它可以省去
        //Viewport和panel类似，也是以div形式显示在页面中，但它在launch之前就被创建，且可以向它里面添加其他组件
       Ext.ComponentManager.get('myPanel').add(subPanel);
        //如果用Ext.get方法则将不能添加
    }
});

Sencha Touch 之 Ext.ComponentManager.get方法使用的更多相关文章

  1. Sencha Touch 之 Ext.fly方法的使用

    Ext.fly方法是Ext.js 4中的flyweight技术,该技术在浏览器中为使用Ext.fly方法的元素节点开辟一块内存,下一次使用Ext.fly方法的元素节点将占据同一块内存,即覆盖前一次的元 ...

  2. Sencha touch中Ext.List的使用及高度自适应

    最近在做 Sencha 的一个项目,需要用到 Ext.List 来列出所需商品及相关信息,平时我们使用 Ext.List 都是使用  fullscreen:true  来设置 List 全屏显示, 但 ...

  3. 【翻译】在Ext JS和Sencha Touch中创建自己定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  4. 【翻译】在Ext JS和Sencha Touch中创建自定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  5. 【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测（App Inspector）

    和其他的Sencha开发人员一样,我会花费大约半天的时间在我喜欢的IDE工具上编写JavaScript,而另一半时间则是在浏览器上测试和调试我的应用程序.在过去几年,每一个主要的浏览器都已大为改善.现 ...

  6. 【转载】Sencha Touch 提高篇 组件选择器

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:威老     原文地址:http://www.cnblogs.com/weil ...

  7. 【翻译】Sencha Touch 2入门：创建一个实用的天气应用程序之三

    原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a ...

  8. Android环境配置Sencha Touch

    转自http://www.phonegap100.com/portal.php?mod=view&aid=19 作为你开发的一部分,为安卓设备开发的 Sencha Touch框架应该在安卓虚拟 ...

  9. Sencha Touch对DOM的访问及控制

    HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <t ...

随机推荐

  1. 使用springMVC时无法加载CSS和JS文件

    解决办法:在spring配置文件里加上  <mvc:default-servlet-handler/>

  2. hdu2222Keywords Search

    Problem Description In the modern time, Search engine came into the life of everybody like Google, B ...

  3. hdu 4710 Balls Rearrangement

    题意就不说了,刚开始做我竟然傻傻地去模拟,智商捉急啊~~超时是肯定的 求出 a ,b 的最小公倍数,因为n够长的话,就会出现循环,所以就不要再做不必要的计算了.如果最小公倍数大于n的话,就直接计算n吧 ...

  4. 启动程序的c++方法

    #include <Windows.h> void main() { WinExec( "notepad.exe fitdata.txt", SW_SHOW ); // ...

  5. linux系统下memcached启动正常但程序无法连接的问题解决

    在虚拟机linux安装好memcached之后,试着用java程序连接一下memcached的服务端,但却出现了以下错误 com.schooner.MemCached.SchoonerSockIOPo ...

  6. Linux 计算某文件夹下的所有文件的md5值

    使用find 命令 find /root -type f -print0 |xargs -0 md5sum >a.md5 校验的话 md5sum -c a.md5

  7. Google TensorFlow深度学习笔记

    Google Deep Learning Notes Google 深度学习笔记 由于谷歌机器学习教程更新太慢,所以一边学习Deep Learning教程,经常总结是个好习惯,笔记目录奉上. Gith ...

  8. docker 在esx上的网络配置

  9. Android Monkey Test

    Monkey测试是Android自动化测试的一种手段,Monkey测试本身非常简单,就是模拟用户的按键输入,触摸屏输入,手势输入等,看设备多长时间会出异常.当Monkey程序在模拟器或设备运行的时候, ...

  10. mssql中得到当天数据的语句

    一条例子: 关键语句: