senchatouch笔记（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，用来初始化整个 : '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为必须，其他四个可有可无。