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({
               
            });
        */
        Ext.Viewport.add(panel);    //在这里它可以省去
        //Viewport和panel类似，也是以div形式显示在页面中，但它在launch之前就被创建，且可以向它里面添加其他组件
    }
});

初识Sencha Touch：面板Panel的更多相关文章

  1. [原]sencha touch之panel和tabpanel

    最近在弄senchatouch的项目,所以边学习边开发,边记录,直接记录下test code如下: Panel: Ext.application({ name:'itKingApp', launch: ...

  2. JavaScript开发之路01（初识Sencha Touch框架）

    一.SenchaTouch的hello world实例: Ext.application({ name:'myapp', icon:'images/icon.png', glossOnIcon:fal ...

  3. Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)

    常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样 ...

  4. sencha touch 坑爹的Panel，数据不显示了...

    一位同学问我一个问题: sencha touch中xtype创建dataview死活不显示!!版本2.3.1,MVC模式,sencha touch创建目录程序很简单,主界面一个tabPanel,两个分 ...

  5. sencha touch Container

    Container控件是我们在实际开发中最常用的控件,大部分视图控件都是继承于Container控件,了解此控件能帮我们更好的了解sencha touch. layout是一个很重要的属性,能够帮助你 ...

  6. sencha touch 入门系列 （九）sencha touch 视图组件简介

    对于一个普通用户来说,你的项目就是一组简单的视图集合,用户直接通过跟视图进行交互来操作你的应用,对于一个开发人员来说,视图是一个项目的入口,虽然大部分时候最有价值的部分是在model层和control ...

  7. 用 Sencha Touch 构建移动 web 应用程序

    Sencha Touch 是一个使用 HTML5.CSS3 和 JavaScript 语言构建的移动 web 应用程序框架,在本文中,学习如何应用您当前的 web 开发技能进行移动 web 开发.下载 ...

  8. HTML5开发实战——Sencha Touch篇(1)

    学习了很多主要的Sencha Touch内容,已经了解了Sencha Touch的开发模式.接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建. 先要解决的是前端的问题.从最简 ...

  9. sencha touch的开源插件和例子

    写了好久的sencha touch,没想到换工作竟然一年多没有搞了.因为项目的缘故收集了好多的组件,由于懒惰,没有整理,现在想想有点后悔了,再加上如果就这样丢弃,感觉有些遗憾,今天整理了一下放在git ...

随机推荐

  1. UITabBarItem

    – finishedSelectedImage 返回选中时的图表 – finishedUnselectedImage 返回为选中时的图表 – setFinishedSelectedImage:with ...

  2. android MVC理解

    算来学习Android开发已有2年的历史了,在这2年的学习当中,基本掌握了Android的基础知识.越到后面的学习越感觉困难,一来是自认为android没啥可学的了(自认为的,其实还有很多知识科学), ...

  3. 自学HTML5第三节（拖放效果）

    今天来看看网页上的拖放效果,首先来看看什么是拖放———— 拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 Inte ...

  4. chroot

    用途:更改命令的根目录. 语法:chroot Directory Command 描述: 注意:如果新根目录中的特殊文件具有与实际根目录不同的主要和次要设备号,则可能会覆盖文件系统. 只有具有 roo ...

  5. Spring中常用的hql查询方法(getHibernateTemplate())

    一.find(String queryString); 示例:getHibernateTemplate().find("from bean.User"); 返回所有User对象 二 ...

  6. Oracle EBS-SQL (BOM-10):检查有BOM无计划员的数据.sql

    select DISTINCT     msi.segment1 编码    ,msi.description 描述    ,msi.item_type 物料类型    ,msi.inventory_ ...

  7. 您在基于 Windows 7 的或基于 Windows Server 2008 R2 的计算机上读取器中插入智能卡时出现错误消息："设备驱动程序软件未能成功安装"

    http://support.microsoft.com/kb/976832/zh-cn http://support.microsoft.com/kb/976832/zh-tw 症状 当智能卡插入智 ...

  8. 2014第11周四Eclipse开发问题记

    今天开发中eclipse工具使用上又学到几点: 1.去除代码空行:在Find输入框中输入:^\s*\n然后替换为空即可: 2.eclipse插件的加载:对于单一个jar文件的插件,直接放在plugin ...

  9. Oracle 转换函数

    Oracle 转换函数 -- TO_CHAR(date|number {,fmt} {,nlsparams}) fmt:格式内容,返回的字符串是什么格式的,在此处指定:nlsparams:指定国家语言 ...

  10. linux学习之（四）-用户、组的操作，给文件文件夹设置组，更改目录权限、文件权限

    命令帮助查看: man 命令(查看一个命令的详细帮助信息) 例:man useradd 或者用  -h   格式   命令 -h(查看一个命令的简要帮助) 例:useradd -h 用户: 在user ...