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);
}
});
相关推荐
Sencha Touch 是一款专为移动设备开发的前端框架,它提供了丰富的组件和API,使得开发者可以轻松构建跨平台的触控应用。这个压缩包“touch-docs-2.2.1.zip”包含了Sencha Touch 2.2.1版本的离线API参考文档,对于...
本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...
《Sencha Touch in Action》是一本关于使用Sencha Touch进行跨平台移动开发的书籍,它详细介绍了Sencha Touch框架的使用方法和技巧。Sencha Touch是一个利用HTML5、CSS3和JavaScript创建移动Web应用程序的框架,它是...
Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。"sencha touch 登陆界面"这个主题,主要涉及的是如何使用Sencha Touch来设计和实现一...
《般若人生》是一款基于Sencha Touch框架开发的移动应用项目。Sencha Touch是一个流行的JavaScript框架,专门用于构建跨平台的触屏友好型Web应用程序。它提供了丰富的UI组件和强大的数据管理工具,使得开发者能够...
Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件和API,用于构建交互式的、响应式的Web应用程序。这个项目源码是基于Sencha Touch开发的一个实例,通过研究这个项目,我们可以深入理解Sencha ...
Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。这个压缩包文件包含了创建一个完整的Sencha Touch 应用所需的基本元素,让我们逐一解析这些...
Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库,用于构建高性能的触屏Web应用。在“sencha touch list demo”中,我们主要关注的是Sencha Touch中的列表(List)组件,这是一个核心且常用的...
Sencha Touch 2.4.0 是一个专为移动设备设计的前端JavaScript框架,它使得开发者能够构建功能丰富的、响应式的Web应用程序,这些应用在智能手机、平板电脑等移动设备上表现得如同原生应用一样流畅。这个框架由Sencha...
Sencha Touch 是一款用于构建移动应用的前端框架,它提供了丰富的组件库和强大的数据管理功能,使得开发者可以创建交互性强、性能优异的触屏应用程序。VSCode(Visual Studio Code)是微软开发的一款广受欢迎的源...
Sencha Touch 2是一款专为移动设备开发的前端框架,用于构建高性能的触控应用程序。它提供了丰富的组件库,使得开发者能够轻松创建出与原生应用相似的用户体验。本篇文章将详细阐述如何搭建Sencha Touch 2的开发环境...
Sencha Touch 和 FusionCharts 的结合使用,是一种在移动设备上创建交互式图表和图形的高效方式。Sencha Touch 是一个流行的JavaScript框架,专门用于构建触摸优化的移动Web应用程序,而FusionCharts则是一款强大的...
Sencha Touch是一款强大的JavaScript框架,专门用于构建移动Web应用程序。它提供了一套完整的UI组件和交互功能,使得开发者能够创建出具有原生应用体验的触摸友好型应用。这个"Sencha Touch中文翻译文档"是针对...
标题中的"api.zip_sencha _sencha touch api_sencha touch2 api"表明这是一个关于Sencha Touch API的压缩文件集合,可能包含了Sencha Touch和Sencha Touch 2两个版本的API文档。 **Sencha Touch基础知识** Sencha ...
Sencha Touch SDK工具是开发移动应用的重要资源,尤其对于那些希望使用Sencha Touch框架构建触控友好、跨平台Web应用程序的开发者来说。Sencha Touch是一个强大的JavaScript库,它提供了丰富的UI组件和API,使得...
Sencha Touch 2 是一个流行的JavaScript框架,专为构建移动Web应用程序而设计。它提供了丰富的UI组件、数据管理和触摸事件处理,使得开发者可以创建与原生应用类似的交互体验。MVC(Model-View-Controller)架构模式...
Sencha Touch 是一款专为移动设备设计的前端框架,它为开发者提供了构建触控友好的、高性能的Web应用程序的能力。1.0.1a是这个框架的一个早期版本,虽然现在可能已被更新版本所取代,但对于了解其发展历史和技术原理...
### FrancisShanahan-SenchaTouch2MVCHelloworld-c330be1项目 该项目是一个基于Sencha Touch 2的MVC模式Hello World示例,可能包含了创建基本模型、视图、控制器的过程,演示了如何通过MVC模式构建一个简单的应用。...