因为sencha touch的语法大部分是基于extjs的,而extjs大部分是基于json的,所以好好预习一下extjs的语法还是很重要的。extjs是封装的javascript的一个框架,相比原生的js,它更注重结果,所以它的调用形式很固定比较简洁,不像原生js那样要逐字逐句地去实现。
1.值的数组表示方法:json在表示值的数组的时候可以提高可读性,并且有效的减少复杂性;json中的一条记录就是一个花括号,数组即是将花括号放进‘[ ]’即可:
vardata={"peoples":[
{"firstName":"Brett","lastName":"McLaughlin","email":"brett@newInstance.com"},
{"firstName":"Jason","lastName":"Hunter","email":"jason@servlets.com"},
{"firstName":"Elliotte","lastName":"Harold","email":"elharo@macfaq.com"}
]}
2.每一种新的语言都要来一个"hello world",extjs版本的
<script type = "text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert("hello world!");
})
</script>
Ext.define用来创建类,也可以继承其他类,也可以被继承,例:
Ext.define('TextClass', {
A: 'a',
B: 'b'
});
则创建了一个TextClass的类,实例化的时候可以用var textclass = new TextClass()来创建一个实例;
若想要实现继承,则:
Ext.define("TextClass2", {
extend: 'TextClass', //继承TextClass
C: 'c' //TextClass2特有的属性
})
实例化类除了new方法之外,extjs4推荐使用create方法来实例化。例如上面新定义的类,可以用 var test = Ext.create("TextCkass")来进行实例化这个类。
3.各种控件:
a.MessageBox——>Ext.MessageBox.alert提示框;Ext.MessageBox.prompt输入框; Ext.MessageBox.wait进度条;Ext.MessageBox.confirm确认提示框等等;
b.Ext.Panel控件是一个容器,继承自Ext.Container->Ext.BoxComponent->Ext.Component->Ext.util.Observable。Component就是所有组件的基类了。
Ext.onReady(function(){
new Ext.Panel({
renderTo:'somediv or somespan',
width:300,
height:300,
title:'标题', //面板头部
tbar:[{text:'按钮1'},{text:'按钮2'}], //顶部工具栏
bbar:[{text:'one'},{text:'two'}], //底部工具栏
html:'正文', //正文
items:[ //正文内部元素
{title:'1', html:'text1'},
{title:'2', html:'text2'}
],
tools:[ //title上面添加工具
{id: 'refresh'},{id: 'close', handler:function(event, toolEl, p){
Ext.MessageBox.alert("xx", "xx");
}}
]
});
})
Ext.TabPanel继承自Ext.Panel,是一种带有选项卡的panel,语法结构和Panel差不多,只不过它的item变成了选项卡中的item。
Ext.getCmp('someTab').add({title:'', html:'', closable: true}) //用来添加一个额外的选项卡,通过设置变量closable:true使得选项卡可以关闭
4.布局相关:
Ext.Viewport组件,继承自Container,用来初始化整个浏览器的可视化区域,并且会根据浏览器的变化自动去调整。一个页面只允许有一个viewport。它不需要制定的renderTo,因为它直接渲染到页面的body的区域。
EXTJS里面的布局树如下图所示:
例如列布局的示例:
<script type="text/javascript">
Ext.onReady(function () {
new Ext.Viewport({
layout:'column', //容器内部进行 列布局
items:
[
{ title: '标签1', width: '200', html: 'xxx' },
{ title: '标签2', width: '200', html: 'xxx' },
{ title: '标签3', width: '200', html: 'xxx' },
{ title: '标签4', width: '200', html: 'xxx' },
{ title: '标签5', width: '200', html: 'xxx' }
]
});
})
</script>
FitLayout:自适应布局,只会显示第一个子面板,用第一个面板去填充满整个容器的大小。无法对viewport进行布局,该布局的父容器需要有hright的属性作为前提;
Ext.layout.AccordionLayout:折叠式布局,继承自自适应布局,不同是有折叠风箱的效果;
Ext.layout.BorderLayout:边框布局,设计这种布局用来解决页面分栏的问题。其中item的region有north,south,west,east和center五个属性,分别代表页面布局中的五个位置;其中center为必须,其他四个可有可无。
分享到:
相关推荐
本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...
Sencha Touch 2入门教程之MVC 讲解如何使用 Sencha Touch 2 mvc模式来开发一个登录界面
sencha touch 2 实现的贪吃蛇 希望对大家有所帮助
Sencha Touch开发的项目《般若人生》源码
SENCHA TOUCH权威指南+EXtJS4
sencha touch2移动开发框架,ajax获取数据
sencha touch 应用案例 sencha touch 案例 一个完整的sencha touch 应用案例 移动WEB社区开发的日志案例 非常不错!
sencha touch cookbook 英文高清文字版 !
sencha touch 折叠list
sencha touch中文翻译文档,包含sencha touch入门基础和一些控件的使用说明
MAC OS 下sencha touch +cordova 开发环境配置。可以将H5 hybird 应用打包成IOS 应用。
sencha touch 2.4.0最新版 原版包下载
Sencha Touch 2 简介知识,环境搭建,组件介绍和布局事例
OpenCharts 为 Sencha Touch 2.x 和 ExtJS 4.x 框架带来了 10 多个 NVD3 图表,并且向后兼容两者。 NVD3 是一个使用 D3.js 的图表库。 请注意,OpenCharts 包含 D3 和 NVD3 的缩小版本,但是,这些文件的源应独立于...
sencha touch list demo
sencha touch 是一个移动平台UI开发框架,可以实现各种绚丽的页面效果
sencha touch动态加载组件及容器内容,防止加载时间过长的问题
这是我做的一个sencha touch 的项目,测试并能运行,希望对大家有帮助