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