sencha touch笔记（2）——ExtJs语法基础

因为sencha touch的语法大部分是基于extjs的，而extjs大部分是基于json的，所以好好预习一下extjs的语法还是很重要的。extjs是封装的javascript的一个框架，相比原生的js，它更注重结果，所以它的调用形式很固定比较简洁，不像原生js那样要逐字逐句地去实现。

1.值的数组表示方法：json在表示值的数组的时候可以提高可读性，并且有效的减少复杂性；json中的一条记录就是一个花括号，数组即是将花括号放进‘[  ]’即可：

var data = { "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为必须，其他四个可有可无。