基础篇Exts 核心函数简介.ppt

北的 北风网项目培训 ExtJs版国讯教育通用智能OA办公平台 基础篇(3): ExtJs核心函数简介 讲师:风舞烟 目录 Exts提供的常用函数 get、fly、 getup、 getOn、 getBody、 getdoc query函数和 select函数 encode函数和deco函数 Exteach函数 Ext util. Format对数据进行格式化 Ext util. TaskRunner update方法局部更新网页内容 Exts提供的常用函数 Ext中包含了几个以get开头的方法,这些方法可以用来得 到文档中DOM、得到当前文档中的组件、得到Ext元素等, 在使用中要注意区别使用 1、get方法 et方法用来得到一个Ext元素,也就是类型为 Ext Element的对象, Ext element类是EXt对DOM的封装,代 表DOM的元素,可以为每一个DOM创建一个对应的 Element 对象,可以通过 Element对象上的方法来实现对DOM指定的 操作,比如用hide方法可以隐藏元素、 initRD方法可以让指 定的DOM具有拖放特性等。get方法其实是 Ext Element. get的 简写形式。 、8e方法中只有,个参数,这个参数是混合参数,可以是 点对点的d、也可以是个 Element、或者是一个DOM节 象等。看下面的示例代码: Ext onReady (functionot var e new Ext Element(oa); alert(Ext get(oa )) alert(Ext get(document. getElementByld(oa))); alert(Ext get(e)); Htm页面中包含一个d为oa的dⅳv,代码如下: div id=oamyoffice /div Ext get(oa), Ext.get(document getElement Byld(oa)) Ext. get(e)等三个方法都可以得到一个与DOM节点hell对应 的Ext元素。 Ext fly在参数方面与 Ext. get的完全相同,但其内置控制返回 Ext ElementI的方法就完全不同,Exfy从不保存享元对象的 引用,每次调用方法都返回独立的享元对象。其实区别在于 “缓存”中,因为缓存的缘故,Ext.get需要为每个元素保存 其引用,就形成了缓存,如果有相同的调用就返回,但 Exty没有所谓的缓存机制,得到什么就返回什么,不是多 次使用的情况下“一次性地”使用该元素就应该使用 Ext fly (例如执行单项的任务) 使用Exty的例子: ∥引用该元素一次即可,搞掂了就完工 Ext fly(,).hide(; 2、 getCmp方法一获得Ext组件。 getCmp方法用来获得一个Ext组件,也就是一个已 经在页面中初始化了的 Component或其子类的对象 , getCmp方法其实是 Ext ComponentMgr. get方法的 简写形式。 getCmp方法中只有一个参数,也就是组 件的id。比如下面的代码: Ext on Ready(functional var h=new Ext Panel( id:h2, renderTo: hello width: 300 height: 2001) Ext. getCmp(h2). setTitle(新的标题); 在代码中,我们使用 Ext. getCmp(h2.来得到d为h2的组 件,并调用其 setTitle方法来设置该面板的标题。 3、 getOn方法一获得DOM节点 getOn方法能够得到文档中的DOM节点,该方法中包含 参数,该参数可以是DOM节点的id、DOM节点对象或 DOM节点对应的Ext元素( Element等。比如下面的代码 Ext on Ready (functional var e=new Ext Element(hello); Ext. getDom(hello); Ext. getDom(e) Ext. getDom(edom) Html diy id=hellotttt/div 在上面的代码中,Ext: getOn( hello)、 Ext geton(e)、 Ext getOn(e.dom)等三个语句返回都是同一个DoM节点对 象 4、 getBody方法一得到文档的body节点元素( Element)。 该方法直接得到文档中与 document. body这个DOM节点对 应的ExtS元素( Element),实质就是把 document. body对象 封装成 Exts元素对象返回,该方法不带任何参数。比如下 面的代码把面板h直接渲染到文档的body元素中。 Ext onReady(func