ExtJS學習筆記(二)

1.先說什麼是json，它是一種資料交換模式，可以簡單了解為類似于HashMap，一個key對應一個value的鍵值對那樣的形式。

在資料傳輸過程中，json是以文本，即字元串的形式傳遞的，而js操作的是Json對象。是以，json對象和json字元串之間需要互相轉換。

json字元串

var  str1 = '{name:'tom',sex:'male'}';//最外邊用雙引号也行
           

json對象

var obj1 = {name:'tom',sex:'male'};
           

二者從形式上看差別就在于是否 有雙引号或單引号修飾

2.①json字元串轉換為json對象，三種方法

方法一

var obj = eval('(' + str1 + ')');//别忘了str旁邊的兩個小括号
           

方法二

var obj = str1.parseJSON();
           

方法三

var obj = str1.parse(str1);
           

然後就可以這樣讀取：

alert(obj.name);
alert(obj.sex);
           

②json對象轉換為json字元串，兩種方法

方法一

var str = obj1.toJSONString();
           

方法二

var str = JSON.stringify(obj1);

alert(str);
           

3.decode為編碼，是将json字元串類型轉換為Object(即對象)類型

incode則為解碼，是将Object類型轉換為json字元串類型。下邊舉一個例子

decode方法

//1.定義一個json字元串
var star = "{name:'張學友',sex:'男',home:'china'}";
//2.把star轉換為對象
var obj = Ext.decode(star);
//3.obj成了對象後就相當于是類的對象了，裡邊的name，sex等就成了obj的屬性了，通路屬性就簡單了
var name = obj.name;//擷取obj對象的name屬性
//4.然後把擷取的資訊組合起來
var result = "明星姓名是"+ name + ",性别是"+ sex;
//5.可以把資訊列印出來
Ext.Msg.alert("明星的資訊",result);//Msg是MessageBox的别名
           

incode方法

var JsonStr = Ext.encode(obj);//obj為上邊第2步的
           

就這麼簡單。

4.addListener的别名是on，removeListener的别名是un,每個元素都有這兩個方法，綁定或移除事件

5.在所有元件中，widow是比較特殊的一個，建立後不用渲染，直接show就行，而其它元件，如button，pannel等需要用renderTo:Ext.getBody()渲染到body中才能看見。

當然，也可以把這些建立元件賦給其它元素。如

var win = Ext.create('Ext.Window',{});
win.show();//使window現形
           

6.eventname指 事件名稱，是指如click、dbclick，mouseMove等。

7.handler是元件自帶的内部屬性，而不是事件。它和listener還是有差別的。如：

menu:{
	items:[{
		id:'a',
		text:'hhhh',
		handleer:create		

	}]
};

function create(){
	//craete的具體方法
};
           

這樣在其它地方就可以調用這個handler方法，要是寫到menu内部，如

handler:function create(){}
           

則其它元件就調用不到該方法。

①handler是一個特殊的listener

②handler是一個函數，而listener是<eventname,函數>對

如按鈕btn添加事件，則可以這麼寫

btn.on('click',function(){'click',alert("彈窗")});
           

handler.alert("")和handler:function(){alert("")}有個小差別

alert()本身就是一個function。handler:後面跟的是function。

function(){alert()}是function中加了一層function，功能是一樣的，隻不過是加了層外套。

在Panel的button中寫handler:alert()會加載panel時就執行，而寫handler:function(){alert("")}則在點選按鈕時才執行。

8.

Ext.Ajax.request({
	params:{}  //params中内容為要向背景傳遞的資料

});
           

params中内容為要向背景傳遞的資料。可以在背景通過requeat.getParameter()方法來擷取相應的參數。

9.ext操作表單是把表單當做一個類來處理，defaults是配置form表單中所有子元素的樣式

defaultType:'textField'//表示表單所有輸入框都為文本，而是不是password和number類型
           

xtype作用是限制輸入的資料類型。如：

xtype:'numberfield'//表示隻能輸入數值類型
msgTarget:'side'//表示錯誤提示資訊隻會顯示在文本框右端，而不是随着滑鼠亂動
           

10.表單驗證的兩種方式

① regex是用正規表達式來寫驗證

regexText則是當輸入不合法時提示錯誤資訊

這兩個都是寫到标簽fieldlabel裡邊，推薦這樣寫，比較簡單

② vtypes也可以用來驗證，隻不過是由自己來進行擴充，靈活性較強。

11.對于表單中的按鈕，由于帶有事件，很重要。

var myform = btn.up('form');//向上查找form中的元素
var basic = myform.getForm();//獲得表單送出的内容。也可手動擷取，但比較麻煩

basic.submit({
	clientvalidation:true,//表示在送出表單時還需要驗證一次，保證所有内容都合法
	//其它内容

});