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,//表示在提交表单时还需要验证一次，保证所有内容都合法//其它内容});