浅谈EXTJS开发的学习1

PS：学习遇到东西的小结，片面供参考。本人之前主要学习android开发，由于工作需要开始接触EXT来开发web，主要是作企业级应用的开发。

1.EXT grid 怎样在JS里面动态设置为只读。

textField设置只读和可用，就应该是textField.setReadOnly(true)；为此按照android函数的开发习惯抽象出了一个工具函数（后面的都照此方法）。
这里提供一个是否可以用的工具类，类比是否只读和显示可同理得到。

<%/** 主要功能: 设置空间的可用性* 参数说明： var control     改变的空间对象* 参数说明： var enable      设置是否可用*/%>function iseable(control,enable){    if(enable)    {        for ( var p in control ){            control[p].disable(true);            //control[p].hide();  显示与隐藏            //control[p].show();              //control[p].setReadOnly(true);可以尝试一下其他函数        }    }    else    {        for ( var p in control ){            control[p].enable(true);        }    }};

调用方法：value为传入的控件名，enable为是否可用的布尔型

iseable({value1,value2，……},enable);//iseable({add_btn,del_btn},false);

2.Msg提示信息的使用，首先这里必须说明的是这个控件是异步的，这是什么概念呢，后面会做个案例说明，我们先来介绍一下Msg有哪些简单的形式。

Ext.Msg.alert(); 简单提示框
Ext.Msg.prompt();有输入框的提示框
Ext.Msg.confirm();有按钮的提示框
Ext.MessageBox.show();自定义的提示框
这里我说一下方法给一些人百度检索的时候提供个链接，具体的推荐参见两个良心好文一个配图，一个配说明：
http://www.cnblogs.com/judgelee/archive/2012/12/18/2822967.html
http://www.cnblogs.com/judgelee/archive/2012/12/18/2822967.html
我们主要的来说一下这个关于异步的问题，本人遇到的问题相信大家都会遇到就是一个确认的按钮然后执行一段函数段，一个取消又执行另一个函数段，作为习惯在写完代码来总结的时候想抽象一个通用类给自己用有了如下一个函数:

<%/** 主要功能: 弹出消息框* 参数说明: * */%>function callBack(info){    return info;}function alterinfo(msg,infotype){    var result;    if(infotype=="msg")    {        Ext.Msg.alert('提示',msg);          return;    }    if(infotype=="msg_btn")    {        Ext.MessageBox.confirm('提示',msg,            function(btn,text){                if (btn=='yes')                {                    //callBack(true)                    return true;                }                else                 {                    //callBack(fales)                    return fales;                }                 });               }}

理想的是运用var result=alterinfo(“这是个带按钮的提示内容”,msg_btn)；调用后就会的到一个返回值再根据返回值去做逻辑操作，可是这里并没有满足预期而是得到了undefined，后来我甚至写了一个函数callback（）；但是这里忽略了一个根本的问题，if里面的东西本来就不会执行因为是异步的，在代码编译的时候会率先编译一遍当有按钮这个事件才会触发回掉函数里面的条件语句，这就很尴尬了，想做的的是用异步去阻塞主线程。然而这里的代码跟Java不同没有sleep函数也没有多线程的句柄机制，那么这个实现就不可能了，系统提供的Alter函数虽然是同步的但这个看上去很不友好。通过查阅资料setTimeout（）来实现sleep函数的功能，以及各种黑科技，结果网上的文章一大抄，折腾了半天，得出结论，js不可以被sleep，什么用sleep啊用Narrative JS包啊其实最后试过了都不能阻塞因为人家JS根本就没有多线程的概念啊！所以只有去规避这些问题了，后来仔细思考了一下自己需求想要的是这个：

//调用方法  msg:弹出框文字信息  type:消息框类型//         然后跟按钮的处理逻辑可以不填alterinfo(msg,type,[function(){}],[function(){}]);//alterinfo("一个提示框","msg_btn",function(){View            .getLayout().setActiveItem(1);});//跳转一个card<%/** 主要功能: 弹出消息框* 参数说明: * */%>function alterinfo(msg,infotype,funcyes,funcno){    if(infotype=="msg")    {        Ext.Msg.alert('提示',msg);          return;    }    if(infotype=="msg_btn")    {        Ext.MessageBox.confirm('提示',msg,            function(btn,text){                if (btn=='yes')                {                    if(funcyes)funcyes();                    return;                }                else                 {                    if(funcno) funcno();                    return;                }                 });               }    if(infotype=="msg_prompt")    {    ...    ...    ...    }}

总结来说问题想复杂了，而且把多线程的思想带入了JS，这是对JS认识的不足，所以本文从基础说起。

3.小数的运算

http://www.w3school.com.cn/js/js_obj_number.asp
先贴上w3school的关于JS数的部分描述。
因为项目中要求进行一个财务的计算要求保留小数，在对两个数字进行加和，那么问题就来了。

var x=0.2+0.1;console.info(x);

这段代码在控制台应该输出0.3，但是实际的输出0.30000000000000004，然后对数加和参考了数加法的说明就进行了如下操作转为整数加减：

//自定义加法运算 把小数转化为整数计算function addNum (num1, num2) {    var sq1,sq2,m;    try {        sq1 = num1.toString().split(".")[1].length;//截取小数位数    }    catch (e) {        sq1 = 0;    }    try {        sq2 = num2.toString().split(".")[1].length;    }    catch (e) {        sq2 = 0;    }    m = Math.pow(10,Math.max(sq1, sq2));    //选择最大的位数作为10的指数例如 0.2+0.02 那么应该是10的2次方（20+2）/100    return (num1 * m + num2 * m) / m;}alert(addNum(0.1, 0.2));

造成这个的原因是因为：

作者：刘浩博
链接：http://www.zhihu.com/question/24415787/answer/57187211
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

js中的数字都是用浮点数表示的，并规定使用IEEE 754 标准的双精度浮点数表示。
IEEE 754 规定了两种基本浮点格式：单精度和双精度。
IEEE单精度格式具有24 位有效数字精度(包含符号号)，并总共占用32 位。
IEEE双精度格式具有53 位有效数字精度(包含符号号)，并总共占用64 位。

十进制0.1
二进制0.00011001100110011…(循环0011)
尾数为1.1001100110011001100…1100（共52位，除了小数点左边的1指数为-4（二进制移码为00000000010）,符号位为0
计算机存储为：0 00000000100 10011001100110011…11001
因为尾数最多52位，所以实际存储的值为0.00011001100110011001100110011001100110011001100110011001

而十进制0.2
二进制0.0011001100110011…(循环0011)
尾数为1.1001100110011001100…1100（共52位，除了小数点左边的1指数为-3（二进制移码为00000000011）,符号位为0
存储为：0 00000000011 10011001100110011…11001
因为尾数最多52位，所以实际存储的值为0.00110011001100110011001100110011001100110011001100110011

那么两者相加得：
0.00011001100110011001100110011001100110011001100110011001
+ 0.00110011001100110011001100110011001100110011001100110011
= 0.01001100110011001100110011001100110011001100110011001100
转换成10进制之后得到:0.30000000000000004

虽然这种做法可以算出结果但是要注意整数（不使用小数点或指数计数法）最多为 15 位。小数的最大位数是 17，但是浮点运算并不总是 100% 准确。可以试试在控制台输入:

所以如果数据过大可能会出现大问题，个人认为这些计算能放到Java代码里面执行最好，然后以字符串的形式送到Js里面，不要在JS里做计算。
而且JS不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。JS中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。

4.EXT grid中的record

在开发过程中有可能会遇到改变一个grid的单元格的问题，那么久要用到grid中的一个东西record。
record是其实是一个Json格式的数组，在Ext中运用store存储，store相当于一个队列，而record就是store的一个元素，可以不断的添加进去。

Ext.data.store及其扩展类的基本元素,store可由多个record组成,每个record是由json格式组成的js对象.每个新建record对象可增加进store队列中。
其格式
[ {key:'value',key:'value'}]
对于record的更多操作可以参考官方API Ext.data.store或者这篇博客
http://blog.csdn.net/seng3018/article/details/5898698
这里就对如何对单元格操作做一个例子：

var r = grid.getSelectionModel().getSelected();;  r.beginEdit();  r.set('id', '1');  r.endEdit();  //切记eidt函数必须要不然只修改了record中data的值grid是不会变化的//这样就把grid中的一个为id的列改为了1

另外如果grid出现了与用户交互，那么record会记录下被修改过的记录，并存入store队列，当需要获取grid中的修改过的所有值也可以过record获取：
var rds = store.getModifiedRecords();

5.js中的with运用

在Java中有JavaBean可以用来为对象设置属性，同样运用with可以把对象带入函数中

//创建一个Person的对象function Person() {         this.name = "zfx";         this.age = "28";         this.gender = "boy";  }  var people=new Person();  with(people)  {         var str = "姓名: " + name + "<br>";         str += "年龄：" + age + "<br>";         str += "性别：" + gender;         console.info(str);}  //同样的在对象中我们可以给他写set和get函数构建Bean用来设置其值，是不是就有了JavaBean开发的效果呢？

end：第一次写博文，不足有但是只做项目总结，当作笔记吧，如果有遇到同样问题的小伙伴能帮你解决到问题我也是很高兴的~~如果有什么问题也欢迎指正，同时感谢各大神的借鉴~站在巨人的肩膀上看世界