初识Sencha Touch:面板Panel
2013-10-11 09:02
399 查看
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之前就被创建,且可以向它里面添加其他组件
}
});
<!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 2 快速入门系列(四)-- 组件之标签面板(TabPanel)
- senchatouch tabPanel 在面板跳转时执行自定义函数 handler()
- sencha touch 模仿tabpanel导航栏TabBar的实例代码
- Sencha touch Panel之间的跳转(如不使用TabPanel或者Carousel控件而产生跳转的动画效果)
- Sencha touch 开发系列:容器组件:tabpanel,carousels
- sencha touch 模仿tabpanel导航栏TabBar的实例代码
- JavaScript开发之路01(初识Sencha Touch框架)
- sencha-touch1.1中如何点击button弹出一个"popup" panel
- sencha touch 坑爹的Panel,数据不显示了...
- Sencha touch -文字颜色不同的面板
- sencha touch 学习笔记- 基本组件1-list和panel(2013网页装在兜里)
- sencha touch的tabpanel里tab比较多时,使tab子标签滚动
- sencha touch NavigationView 嵌套 TabPanel 的问题
- Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介
- Sencha Touch 2.0 威老的自定义组件:CardPanel
- Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介
- sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)
- sencha touch pull-refresh-panel 面板下拉刷新
- Sencha Touch 给 Panel 注册点击事件(tap)和其他touchstart,touchend 等事件
- sencha touch 2 tabpanel中List的不显示问题,解决方案