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:'somep 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為必須,其他四個可有可無。

發佈留言