sencha touch笔记(2)——ExtJs语法基础

36 篇文章 0 订阅
13 篇文章 0 订阅

因为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里面的布局树如下图所示:

extjs学习笔记---07--布局

例如列布局的示例:

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值