Ext.Js核心函数( 三)

ExtJs 核心函数简介

1.ExtJs提供的常用函数
2.get、fly、getCmp、getDom、getBody、getDoc
3.query函数和select函数
4.encode函数和decode函数
5.Ext.each函数
6.Ext.util.Format对数据进行格式化
7.Ext.util.TaskRunner
8.update方法局部更新网页内容

 

 Ext中包含了几个以get开头的方法，这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等，在使用中要注意区别使用
1、get方法
        get方法用来得到一个Ext元素，也就是类型为Ext.Element的对象，

        Ext.Element类是Ext对DOM的封装，代表DOM的元素，可以为每一个DOM创建一个对应的Element对象，

       可以通过Element对象上的方法来实现对DOM指定的操作，比如用hide方法可以隐藏元素

      initDD方法可以让指定的DOM具有拖放特性等。get方法其实是Ext.Element.get的简写形式。
          get方法中只有一个参数，这个参数是混合参数，可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。看下面的示例代码：

Ext.onReady(function(){

var e=new Ext.Element(“oa");

alert(Ext.get(“oa"));

alert(Ext.get(document.getElementById(“oa")));

alert(Ext.get(e));});

Html页面中包含一个id为oa的div，

代码如下：<div id=“oa">myoffice</div> 

 Ext.get(“oa")、Ext.get(document.getElementById(“oa"))、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。

 

二： 1. Ext.fly和Ext.get

       Ext.fly在参数方面与Ext.get的完全相同，但其内置控制返回Ext.Element的方法就完全不同，

       Ext.fly从不保存享元对象的引用，每次调用方法都返回独立的享元对象。

       其实区别在于“缓存”中，因为缓存的缘故，Ext.get需要为每个元素保存其引用，就形成了缓存，

        如果有相同的调用就返回，但Ext.fly没有所谓的缓存机制，得到什么就返回什么，

       不是多次使用的情况下“一次性地”使用该元素就应该使用Ext.fly（例如执行单项的任务）。

           使用Ext.fly的例子：
        // 引用该元素一次即可，搞掂了就完工
        Ext.fly('elId').hide();
2、getCmp方法－获得Ext组件。
         getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，

         getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。getCmp方法中只有一个参数，也就是组件的id。比如下面的代码：

Ext.onReady(function(){
var h=new Ext.Panel({

id:"h2",title:"　",renderTo:"hello",width:300,height:200});

Ext.getCmp("h2").setTitle("新的标题");
}); 
在代码中，我们使用Ext.getCmp("h2").来得到id为h2的组件，
并调用其setTitle方法来设置该面板的标题。 

 3、getDom方法－获得DOM节点

 getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。比如下面的代码：

Ext.onReady(function(){
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);});
Html：<div id="hello">tttt</div> 
         在上面的代码中，Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。

 4、getBody方法－得到文档的body节点元素(Element)。

该方法直接得到文档中与document.body这个DOM节点对应的ExtJS元素（Element），实质就是把document.body对象封装成ExtJS元素对象返回，该方法不带任何参数。比如下面的代码把面板h直接渲染到文档的body元素中。

 Ext.onReady(function(){
var h=new Ext.Panel({title:"测试",width:300,height:200});
h.render(Ext.getBody());
}); 

 5、getDoc方法－获得与document对应的Ext元素(Element)

     getDoc方法实质上就是把当前html文档对象，也就是把document对象封装成ExtJS的Element对象返回，该方法不带任何参数。

6.Ext.query函数和Ext.select函数批量获取元素

语法：
query( String path, Node root ) : Array 选定一个通过CSS/XPath选择符获取的DOM节点组成的数组。
选定一个通过CSS/XPath选择符获取的DOM节点组成的数组。Ext.DomQueryselect的简写方式。 参数项：
path : String 查询时使用的 XPath 或选择符
root : Node （可选）查询的起点（默认为 document）。
返回值：
Array @member Ext

 

7.select( String selector, Node root ) : Array 选择一组元素。
选择一组元素。 参数项：
selector : String 选择符 / xpath 查询（可以是以逗号分隔的选择符列表）
root : Node （可选）查询的起点（默认为：document）。
返回值：
Array 匹配选择符而形成的DOM元素数组，如果没有匹配的结果，返回一个空的数组

两者的区别：
Ext.query返回搜索到的元素数组，Ext.select返回的是一个Ext.CompositeElement类型的对象。

对于query返回的数组，只能循环迭代处理；而对于select返回的对象，可以调用它提供的各种函数执行特殊操作。
如：

  function selectP() {
                var array = Ext.query('p');
                for (var i = 0; i < array.length; i++) {
                    Ext.get(array[i]).highlight();
                }
            }

            function selectDiv() {
                var array = Ext.query('div.red');
                for (var i = 0; i < array.length; i++) {
                    Ext.get(array[i]).highlight();
                }
            }

 

在query和select函数中，可以通过css元素选择符来批量获取HTML页面中的元素
1、元素选择符：
     任意元素
     E 一个标签为 E 的元素
     E F 所有 E 元素的分支元素中含有标签为 F 的元素
     E > F 或 E/F 所有 E 元素的直系子元素中含有标签为 F 的元素
     E + F 所有标签为 F 并紧随着标签为 E 的元素之后的元素
     E ~ F 所有标签为 F 并与标签为 E 的元素是侧边的元素

2、属性选择符：
    @ 与引号的使用是可选的。例如：div[@foo='bar'] 也是一个有效的属性选择符。
    E[foo] 拥有一个名为 “foo” 的属性
    E[foo=bar] 拥有一个名为 “foo” 且值为 “bar” 的属性
    E[foo^=bar] 拥有一个名为 “foo” 且值以 “bar” 开头的属性
    E[foo$=bar] 拥有一个名为 “foo” 且值以 “bar” 结尾的属性 =bar] 拥有一个名为 “foo” 且值包含字串 “bar” 的属性
    E[foo%=2] 拥有一个名为 “foo” 且值能够被2整除的属性
    E[foo!=bar] 拥有一个名为 “foo” 且值不为 “bar” 的属性

 

3、CSS 值选择符：
   E{display=none} css 的“display”属性等于“none”
   E{display^=none} css 的“display”属性以“none”开始
   E{display$=none} css 的“display”属性以“none”结尾 =none} css 的“display”属性包含字串“none”
   E{display%=2} css 的“display”属性能够被2整除
   E{display!=none} css 的“display”属性不等于“none”

 

4、伪类：
     E:first-child E 元素为其父元素的第一个子元素
     E:last-child E 元素为其父元素的最后一个子元素
     E:nth-child(n) E 元素为其父元素的第 n 个子元素（由1开始的个数）
     E:nth-child(odd) E 元素为其父元素的奇数个数的子元素
     E:nth-child(even) E 元素为其父元素的偶数个数的子元素
     E:only-child E 元素为其父元素的唯一子元素
     E:checked E 元素为拥有一个名为“checked”且值为“true”的元素（例如：单选框或复选框）

     E:first 结果集中第一个 E 元素
     E:last 结果集中最后一个 E 元素
     E:nth(n) 结果集中第 n 个 E 元素（由1开始的个数）
     E:odd :nth-child(odd) 的简写
     E:even :nth-child(even) 的简写
     E:contains(foo) E 元素的 innerHTML 属性中包含“foo”字串
     E:nodeValue(foo) E 元素包含一个 textNode 节点且 nodeValue 等于“foo”
     E:not(S) 一个与简单选择符 S 不匹配的 E 元素
     E:has(S) 一个包含与简单选择符 S 相匹配的分支元素的 E 元素
     E:next(S) 下一个侧边元素为与简单选择符 S 相匹配的 E 元素
     E:prev(S) 上一个侧边元素为与简单选择符 S 相匹配的 E 元素

5.encode函数和decode函数

   Ext中有两个很重要的方法,一个是decode;一个是encode.顾名思义,一个是编码,一个是解码,你难道真的这么想吗?     严格的说,

   一个是将json字符串转换成对象;一个是将对象转换成json字符串.
   注： Ext.decode()和Ext.encode()分别是是 Ext.util.JSON.decode()和Ext.util.JSON.encode的简写

 

 <link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
        <script src="extjs/ext-base.js" type="text/javascript"></script>
    <script src="extjs/ext-all.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ready() {
 
            //先使用decode方法，这个方法是将json字符串转换成对象的

            //第一步：先定义一个json字符串吧
            var 刘天王 = "{姓名:'刘德华',性别:'男',老家:'香港'}";

            //第二步：现在我们要把刘天王转换成对象了
            var who = Ext.decode(刘天王);

            //第三步：who成了对象后就相当于是类的对象了，里面的姓名，性别，老家都成了who的属性了，现在知道怎么通过对象访问属性了吧
            var name = who.姓名;    //获取who对象的[姓名]属性
            var sex = who.性别;     //获取who对象的[性别]属性
            var home = who.老家;    //获取who对象的[老家]属性

            //第四步：下面将获取的信息组合起来
            var result = "刘天王资料的信息：姓名是--" + name + "；性别--" + sex + "；老家--" + home;

            //第五步：我们把获取的who对象的信息用弹出消息的方式显示出来吧
            Ext.Msg.alert("刘天王的资料信息", result);

            //以上就是将一个json字符串转换成对象后，再逐个访问对象的属性的示例

            //下面使用encode方法
            //encode方法很简单了，就是将上面生成的who对象再转换成第一步定义的json字符串

            //定义一个到时间执行的函数
            var getJson = function() {
                //你完全可以把这段写在函数外面，之所以包含在里面纯属是为了在显示第一个消息框后再隔3秒显示下面这个消息窗口

                var jsonStr = Ext.encode(who);

                //我们还是通过弹出消息的方式把这个json字符串显示出来吧
                Ext.Msg.alert("jsonStr信息内容", jsonStr);
            };

            //下面这个方法意思是：在3秒之后会调用函数getJson执行里面包含的脚本

            setTimeout(getJson, 3000);



            //Ext.decode()和Ext.encode()分别是是 Ext.util.JSON.decode()和Ext.util.JSON.encode的简写

        }
        Ext.onReady(ready);

 6.Ext.each函数
    语法：Ext.each( Array/NodeList/Mixed array, Function fn, Object scope ) : void
    遍历array并对每项分别调用fn函数。如果array不是数组则只执行一次。

    如果某项fn执行结果返回false（必须是false，undefined无效），遍历退出，后面的array项将不被遍历。 

   遍历过程中每次为fn传入参数分别为[当前数组项]，[当前索引]和[数组array]三个参数。 Scope用于设定fn函数中的this指针。

 Ext.onReady(function () {
            //1.数组   2.元素   2.索引   3.数组
                       Ext.each([1, 3, 5, 7], function(item, index, arry) {
                          alert("item:" + item + " index:" + index + " arry.length=" + arry.length);
                      });

7.Ext.util.Format对数据进行格式化
    ellipsis( String value, Number length, Boolean word ) : String 对大于指定长度部分的字符串，进行裁剪，增加省略号（“...”）的显示。
    对大于指定长度部分的字符串，进行裁剪，增加省略号（“...”）的显示。 参数项：
    value : String 要裁剪的字符串
    length : Number 允许的最大长度
    word : Boolean True表示尝试以一个单词来结束
    返回值：
    String 转换后的文本

 var str = "this";
         var oStr = Ext.util.Format.ellipsis(str, 5,true);
         alert(oStr);
                var money = "1000";
                 var newmoney = Ext.util.Format.usMoney(money);
                   alert(newmoney);
                    var oDate = Ext.util.Format.date(new Date(), "Y-m-d H:i:s");
                    alert(oDate);

 

8、defaultValue( Mixed value, String defaultValue ) : String 检查一个引用值是否为空，若是则转换到缺省值。
检查一个引用值是否为空，若是则转换到缺省值。 参数项：
value : Mixed 要检查的引用值
defaultValue : String 默认赋予的值（默认为""）
返回值：
String

9、trim( String value ) : String 裁剪一段文本的前后多余的空格。
裁剪一段文本的前后多余的空格。
参数项：
value : String 要裁剪的文本
返回值：
String 裁剪后的文本

10.usMoney( Number/String value ) : String 格式化数字到美元货币
格式化数字到美元货币 参数项：
value : Number/String 要格式化的数字
返回值：
String 已格式化的货币

  var money = 10009.9;
        var newmoney = Ext.util.Format.number(money, "0,000.00");
        alert(newmoney);

 

11.date( Mixed value, String format ) : Function 将某个值解析成为一个特定格式的日期。
    将某个值解析成为一个特定格式的日期。
    参数项：
    value : Mixed 要格式化的值
    format : String （可选的）任何有效的日期字符串（默认为“月/日/年”）
    返回值：
   Function 日期格式函数
   如：Ext.util.Format.date(new Date(), "Y-m-d H:i:s");

 

12.dateRenderer( String format ) : Function 返回一个函数，该函数的作用是渲染日期格式，便于复用。
返回一个函数，该函数的作用是渲染日期格式，便于复用。 参数项：
format : String 任何有效的日期字符串
返回值：
Function 日期格式函数
如：renderer: Ext.util.Format.dateRenderer('Y年m月d日')

13.stripTags( Mixed value ) : String 剥去所有HTML标签。
剥去所有HTML标签。 参数项：
value : Mixed 要剥去的文本

 

14.number( Number v, String format ) : String 依据某种（字符串）格式来转换数字。例子 (123456.789): ...
依据某种（字符串）格式来转换数字。 例子 (123456.789): 0 - (123456) 只显示整数，没有小数位0.00 - (123456.78) 显示整数，保留两位小数位0.0000 - (123456.7890) 显示整数，保留四位小数位0,000 - (123,456) 只显示整数，用逗号分开0,000.00 - (123,456.78) 显示整数，用逗号分开，保留两位小数位0,0.00 - (123,456.78) 快捷方法，显示整数，用逗号分开，保留两位小数位在一些国际化的场合需要反转分组（,）和小数位（.），那么就在后面加上/i 例如： 0.000,00/i
参数项：
v : Number 要转换的数字。
format : String 格式化数字的“模”。
返回值：
String 已转换的数字。@public

 

15.undef( Mixed value ) : Mixed 检查一个引用值是否为underfined，若是的话转换其为空值。
检查一个引用值是否为underfined，若是的话转换其为空值。 参数项：
value : Mixed 要检查的值
返回值：
Mixed 转换成功为空白字符串，否则为原来的值

 

16.defaultValue( Mixed value, String defaultValue ) : String 检查一个引用值是否为空，若是则转换到缺省值。
检查一个引用值是否为空，若是则转换到缺省值。 参数项：
value : Mixed 要检查的引用值
defaultValue : String 默认赋予的值（默认为""）
返回值：
String
返回值：
String 剥去后的HTML标签

17.Ext.util.TaskRunner
执行一个连续的计划任务
Eg:// Start a simple clock task that updates a div once per second
var task = {
     run: function(){
               Ext.fly('clock').update(new Date().format('g:i:s A'));
              },
     interval: 1000
}
var runner = new Ext.util.TaskRunner();
runner.start(task);

18.

<script type="text/javascript">
        Ext.onReady(function() {
            var task = {
                run: function() {
                   Ext.get('clock').update(new Date().format('g:i:s A'));
                },
                interval: 1000
            }
            var runner = new Ext.util.TaskRunner();
            runner.start(task); 

        });
    </script>

 19.update方法局部更新网页内容

<script type="text/javascript">
Ext.onReady(function() {

    Ext.get('updatePlain').on('click', function() {
        Ext.get('result').getUpdater().update({
            url: '07-02.html'
        });
    });

    Ext.get('updateJavascript').on('click', function() {
        Ext.get('result').getUpdater().update({
            url: '07-03.html',
            scripts: true
        });
    });
});

 前台页面：

 <script type="text/javascript" src="../shared/examples.js"></script>
        <div style="align:center; width:300px; margin:50px;">
            <button id="updatePlain"><b>变化成静态页面</b></button>
            <button id="updateJavascript"><b>变化成带javascript的页面</b></button>
        </div>
        <div id="result"> </div>
    </body>
</html>

 

<script type='text/javascript'>
Ext.get('div').setWidth(100, {
    duration: 2,
    callback: this.highlight,
    scope: this
});
</script>