sencha touch ch01
-------------------------------------------------------------
index.html
---------------------
<!DOCTYPE html>
<html>
<head>
<title>index.html文件示例</title>
<link rel="stylesheet" href="css/sencha-touch.css"
type="text/css">
<script type="text/javascript" src="sencha-touch.js">
</script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body>123</body>
</html>
app.js
---------------------
Ext.application({
name: 'MyApp',
launch: function() {
alert('Sencha Touch 2框架已被加载');
}
});
sencha touch ch02
-------------------------------------------------------------
index.html
---------------------
<!DOCTYPE html>
<html>
<head>
<title>一个简单的示例面板</title>
<link rel="stylesheet" href="css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha-touch.js"></script>
<script type="text/javascript" src="app-all.js"></script>
<style>
.colorRed{
color:red;
}
.colorBlue{
color:blue;
}
</style>
</head>
<body></body>
</html>
app.js
---------------------
Ext.application({
name: 'myApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
launch: function() {
var panel = Ext.create('Ext.Panel', {
id:'myPanel',
html: '一个简单的示例面板'
});
var subPanel = Ext.create('Ext.Panel', {
id:'subPanel',
html: '面板中的子面板'
});
Ext.Viewport.add(panel);
panel.add(subPanel);
var newPanel=Ext.fly('myPanel');
newPanel.addCls('colorRed');
//应用程序中这段代码之后不再引用id为myPanel的元素
var newPanel=Ext.fly('subPanel');
newPanel.addCls('colorBlue');
//应用程序中这段代码之后不再引用id为subPanel的元素
}
});
sencha touch ch03面板组件中放置图片
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>在面板组件中放置图片</title>
<link rel="stylesheet" href="css/sencha-touch.css"
type="text/css">
<script type="text/javascript" src="sencha-touch.js">
</script>
<script type="text/javascript" src="app-all.js"></script>
<style>
.bgColorPink{
background-color:pink;
}
</style>
</head>
<body></body>
</html>
Ext.require('Ext.Img');
Ext.application({
name: 'MyApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
launch: function() {
var img=Ext.create('Ext.Img',{
src: 'images/html51.jpg',
width:118,
height:150,
listeners:{
tap:function(){
Ext.Msg.alert('您单击了图片');
}
}
});
var panel = Ext.create('Ext.Panel', {
id:'myPanel',
cls:'bgColorPink',
items:[img]
});
Ext.Viewport.add(panel);
}
});
sencha touch ch03 Tab面板组件使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Tab面板组件使用示例</title>
<link rel="stylesheet" href="css/sencha-touch.css"
type="text/css">
<script type="text/javascript" src="sencha-touch.js">
</script>
<script type="text/javascript" src="app-all.js"></script>
<style type="text/css">
body{
font-family:'宋体';
}
.bgcolorPink{
background-color:pink;
}
</style>
</head>
<body></body>
</html>
Ext.require('Ext.TabPanel');
Ext.application({
name: 'MyApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
launch: function() {
var tabPanel = Ext.create('Ext.TabPanel', {
id:'tabPanel',
ui:'dark',
tabBarPosition: 'bottom',
items:[{
title:'主页',
html:'主页',
iconCls:'home'
},
{
title:'合同',
html:'合同',
iconCls:'user'
}],
listeners:{
activeitemchange:function(item,oldValue,newValue)
{
//执行一些代码
return true;//返回true或false
},
painted:function(item)
{
item.addCls('bgcolorPink');
}
}
});
Ext.Viewport.add(tabPanel);
tabPanel.setActiveItem(1);
}
});
sencha touch ch03 水平盒布局方式的简单示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>水平盒布局方式的简单示例</title>
<link rel="stylesheet" href="css/sencha-touch.css"
type="text/css">
<script type="text/javascript" src="sencha-touch.js">
</script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
Ext.application({
name: 'MyApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
launch: function() {
var panel = Ext.create('Ext.Panel', {
id:'myPanel',
layout: {
type: 'hbox',
align: 'stretch'
},
items:[
{
flex:1,
html:'子组件1',
style: 'background-color: #5E99CC;'
},
{
flex:2,
html:'子组件2',
style: 'background-color: #759E60;'
}
]
});
Ext.Viewport.add(panel);
}
});
sencha touch ch03 垂直盒布局方式的简单示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>垂直盒布局方式的简单示例</title>
<link rel="stylesheet" href="css/sencha-touch.css"
type="text/css">
<script type="text/javascript" src="sencha-touch.js">
</script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
Ext.application({
name: 'MyApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
launch: function() {
var panel = Ext.create('Ext.Panel', {
id:'myPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
items:[
{
flex:1,
html:'子组件1',
style: 'background-color: #759E60;'
},
{
flex:2,
html:'子组件2',
style: 'background-color: #5E99CC;'
}
]
});
Ext.Viewport.add(panel);
}
});
sencha touch ch03 Fit布局的使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Fit布局的使用示例</title>
<link rel="stylesheet" href="css/sencha-touch.css"
type="text/css">
<script type="text/javascript" src="sencha-touch.js">
</script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
Ext.application({
name: 'MyApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
launch: function() {
var panel = Ext.create('Ext.Panel', {
layout:'fit',
items: {
style: 'background-color:pink',
html: '示例文字',
}
});
Ext.Viewport.add(panel);
}
});
sencha touch ch03 使用Fit布局并在父容器组件中放置多个子组件
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>使用Fit布局并在父容器组件中放置多个子组件</title>
<link rel="stylesheet" href="css/sencha-touch.css"
type="text/css">
<script type="text/javascript" src="sencha-touch.js">
</script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
Ext.application({
name: 'MyApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
launch: function() {
var panel = Ext.create('Ext.Panel', {
layout:'fit',
items:[{
style: 'background-color:pink',
html: '示例文字1',
},
{
style: 'background-color:pink',
html: '示例文字2',
}]
});
Ext.Viewport.add(panel);
}
});
sencha touch ch03 Card布局的简单使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Card布局的简单使用示例</title>
<link rel="stylesheet" href="css/sencha-touch.css"
type="text/css">
<script type="text/javascript" src="sencha-touch.js">
</script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
Ext.application({
name: 'MyApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
launch: function() {
var p1=Ext.create('Ext.Panel', {
id:'panel1',
style: 'background-color:pink',
html: '示例面板1'
});
var p2=Ext.create('Ext.Panel', {
id:'panel2',
style: 'background-color:pink',
html: '示例面板2'
});
var panel = Ext.create('Ext.Panel', {
layout:'card',
items: [p1,p2]
});
Ext.Viewport.add(panel);
panel.setActiveItem(p2);
}
});
sencha touch ch03 Carousel组件的使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Carousel组件的使用示例</title>
<link rel="stylesheet" href="css/sencha-touch.css"
type="text/css">
<script type="text/javascript" src="sencha-touch.js">
</script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
Ext.require('Ext.Carousel');
Ext.application({
name: 'MyApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
launch: function() {
var carousel1 = Ext.create('Ext.Carousel', {
ui: 'dark',
flex:1,
direction: 'horizontal',
defaults:{
styleHtmlContent:true
},
items: [
{
html: '左视图',
style: 'background-color:pink'
},
{
html: '中视图',
style: 'background-color:red'
},
{
html: '右视图',
style: 'background-color:yellow'
}]
});
var carousel2 = Ext.create('Ext.Carousel', {
ui: 'dark',
flex:1,
direction: 'vertical',
defaults:{
styleHtmlContent:true
},
items: [{
html: '上视图',
style: 'background-color:pink'
},
{
html: '中视图',
style: 'background-color:red'
},
{
html: '下视图',
style: 'background-color:yellow'
}]
});
var panel = Ext.create('Ext.Panel', {
layout: {
type : 'vbox',
align: 'stretch'
},
items: [carousel1, carousel2]
});
Ext.Viewport.add(panel);
//carousel1.next();
carousel1.setActiveItem(1);
}
});
sencha touch ch03 NavigationView组件的使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>NavigationView组件的使用示例</title>
<link rel="stylesheet" href="css/sencha-touch.css"
type="text/css">
<script type="text/javascript" src="sencha-touch.js">
</script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
Ext.require('Ext.NavigationView')
Ext.application({
name: 'MyApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
launch: function() {
var view = Ext.create('Ext.NavigationView', {
navigationBar: {
ui: 'dark',
docked: 'top'
},
//useTitleForBackButtonText:true,
items: [{
title: '标题一',
html:'组件1'
}]
});
panel=Ext.create('Ext.Panel',{
title: '标题二',
html:'组件2'
});
Ext.Viewport.add(view);
view.push(panel);
panel=Ext.create('Ext.Panel',{
title: '标题三',
html:'组件3'
});
view.push(panel);
view.pop();
}
});
sencha touch ch03 xtype配置选项使用示例
-------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>xtype配置选项使用示例</title>
<link rel="stylesheet" href="css/sencha-touch.css"
type="text/css">
<script type="text/javascript" src="sencha-touch.js">
</script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
Ext.require('Ext.Carousel');
Ext.application({
name: 'MyApp',
icon: 'images/icon.png',
glossOnIcon: false,
phoneStartupScreen: 'images/phone_startup.png',
tabletStartupScreen: 'images/tablet_startup.png',
launch: function() {
var panel = Ext.create('Ext.Panel', {
defaults:{
ui: 'dark',
flex:1,
xtype:'carousel',
defaults:{
xtype:'panel'
}
},
layout: {
type : 'vbox',
align: 'stretch'
},
items: [
{
id:'carousel1',
direction: 'horizontal',
items: [
{
html: '左面板',
style: 'background-color:pink'
},
{
html: '中面板',
style: 'background-color:red'
},
{
html: '右面板',
style: 'background-color:yellow'
}]
},
{
id:'carousel2',
direction: 'vertical',
items: [{
html: '上面板',
style: 'background-color:pink'
},
{
html: '中面板',
style: 'background-color:red'
},
{
html: '下面板',
style: 'background-color:yellow'
}]
}]
});
Ext.Viewport.add(panel);
panel.getComponent('carousel1').setActiveItem(1);
}
});
相关推荐
1基于蓝牙的项目开发--蓝牙温度监测器.docx
AppDynamics：性能瓶颈识别与优化
xtrabackup银河麒麟v10rpm安装包
2024年全球产品经理大会（脱敏）PPT合集，共34份。 1、AI 原生产品设计的 7 个反共识 2、AI 时代的策略产品与内容社区推荐实践 3、AI时代的用户界面设计 4、AI智能陪练：大模型赋能销售成长 5、AI浪潮中的应用主义者 6、AI驱动下的B端产品的思考与创新 7、AI驱动业务增长的探索与实践 8、Al Native 生产力工具的发展、价值与商业落地 9、B端产品设计避坑指南 10、GenAl驱动的xGen电商AI平台产品实践与思考 11、Kwaipilot 在快手的落地实践 12、OPPO AI的探索新交互到新生态 13、RPA + AI打造大模型驱动的领先数字员工 14、产品AI化重塑的思考与实践 15、产品分析：通过关键指标助力团队与企业成功 16、从RPA到Al Agent，高价值、可落地的智能助手 17、从流量运营到AI驱动的机器增长 18、做穿越时代的产品 19、创造好工具，创造世界一流产品力 20、医疗健康场景的大模型产品探索 21、即时零售柔性供应链体系建设与AIGC在零售数字化的探索 22、向量数据库的出海实践与未来展望 23、大模型在B端落地思考实践
基于物联网技术的停车场智能管理系统设计用户有单独APP
Adobe XD：AdobeXD高级技巧与最佳实践.docx
ARKit（iOS的增强现实）：ARKit的多人AR场景实现
1python自动化脚本.docx
河北省、市、区县及街镇可编辑SVG图
金融工程之量化交易算法：均值回归：时间序列分析与预测.docx
技术资料分享ADV7123非常好的技术资料.zip
Sawmill_cn.ppt
使用LabVIEW输入数字n，然后计算n的阶乘
1无人值守灌溉系统--stm.docx
金融工程之量化交易算法：动量交易：金融数据获取与处理.docx
基于SSM的毕业设计源码
头像图片调试使用用来调试
GITS_sawmill8.5.8.1_x64_linux-ubuntu11.tar.gz
Newspaper 是一个专为新闻、杂志和内容丰富网站设计的 WordPress 主题。它非常适合博客、在线出版和内容展示，具备多种强大功能。以下是 Newspaper 的主要特点： 响应式设计：确保网站在各种设备上（手机、平板、桌面）都能良好显示，优化用户体验。 丰富的预建模板：提供多个专业设计的预建布局和页面模板，用户可以快速导入并根据需求进行修改。 强大的页面构建器：内置的 TagDiv Composer 允许用户通过拖放功能轻松创建和自定义页面，无需编写代码。 SEO 优化：主题经过优化，有助于提升网站在搜索引擎中的排名，增加流量。 多种内容展示选项：提供多种文章格式和布局选项，如网格、列表、视频和画廊，方便展示不同类型的内容。 社交媒体集成：支持社交媒体分享功能，帮助用户轻松与观众互动并提高网站的曝光度。 实时自定义：支持实时预览功能，用户可以在更改设置时即时查看效果。 持续更新和支持：定期更新主题，确保用户获得最新功能和安全性，同时提供专业的技术支持。
国内市场：功能化脂质市场现状研究分析与发展前景预测报告（2024版）.docx