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方法来设置该面板的标题。
时间: 2024-07-30 09:20:19

Ext.Js( 三)的相关文章

Ext JS学习第三天 我们所熟悉的javascript(二)

•javascript之函数 •对于Ext开发者,我还是希望你能对javascript原生的东西非常了解.甚至熟练掌握运用.那么函数,无疑是非常重要的概念.首先在前面一讲,我们知道了函数也是一种数据类型,创建函数一共有三种方式.每种方式他们都会有区别,分别为: –function语句形式 –函数直接量形式 –构造函数形式 •函数中的arguments对象 –argument的作用一:接受函数的实际参数 –argument的作用二:用于做递归操作 栗子代码 1 //Function 函数 2 //

Ext JS学习第四天 我们所熟悉的javascript(三)

此文用来记录学习笔记: •javascript之函数 •this关键字的使用 –this关键字总是指向调用者,谁调用函数,this就指向谁 •call.apply的使用 –call和apply主要应用与框架底层,用于绑定函数的执行环境/作用域 •块的概念 –和高级程序语言不同,js里没有块的概念,我们一般用小括号包裹块级作用域 •闭包:掌握闭包必须要深入清楚的概念 –执行环境 –作用域链 –垃圾回收机制 附上栗子 代码 1 // This 关键字 在javascript里的使用 2 //this

Ext JS 6开发实例(三) :主界面设计

在上文中,已经将CMD创建的应用程序导入到项目里了,而且也看到默认的主界面了,今天的主要工作就是修改这个主界面,以符合项目的需要.除了设计主界面,还有一些其他的东西需要配置一下. 添加本地化包 打开app.json文件,找到requires,代码如下:     "requires": [      "font-awesome"     ],12341234 以上代码说明项目默认已经引用了Font Awesome的图标,可以在项目中直接使用.这个在项目的后续开发中会经

Ext JS学习第九天 Ext基础之 扩展原生的javascript对象

此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位置找到这几个扩展的js源码: •extjs-4.1.1\src\core\src\lang\ •ExtJS扩展原生Javascript –Ext.Object –Ext.Number –Ext.String –Ext.Array –Ext.Function –Ext.Date –Ext.Error

[Ext JS 4] 实战之Chart 坐标控制(单坐标,双坐标)

前言 在Extjs 中, 单一的 Column Chart 的展示效果如上. 定义的步骤如下: 1.  创建一个 Ext.chart.Chart 2. 创建两个坐标轴, axes 一个 Category 类型的横坐标用来显示日期 一个Numeric 类型的纵坐标用来显示数据 3. 配置显示的图 series 配置 column 类型的柱状图. 具体代码如下: <!-- Author : oscar999 Date : ALL RIGHTS RESERVED --> <!DOCTYPE h

&lt;ext JS&gt; EXTJS的安装、sencha Cmd的安装、EXTJS数据包等

一.EXT的安装 Ext JS SDK. 在右方选择EXTJS,在输入邮箱,选中接受,然后下载,通过邮件的方式发送下载链接. 二.EXTJS的类声明方式与实例化操作 EXTJS声明方法:Ext.define(); EXTJS实例化方法:Ext.create(); 三.组件 组件(component) 是对数据和方法的简单封装. 组件体系: 这种元素间的关系使得组件呈现层级关系.下图 展示了 ExtJS4.x 中组件间层级关系一种实例. 子组件通过容器的items加入到容器中,下面这个例子通过Ex

谈谈Ext JS的组件——布局的使用方法续二

绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为输入控件的 高度基本是固定的,所以不需要设置.在可视化编程没有出现之前,开发界面算是个苦差事,因为布局是需要花费不少功夫的,例如想要在已经定义好的组件中插入 一个组件,那就得重新修改插入位置以下的组件的坐标,这工作是比较枯燥无聊的,因而,在没必要的情况下,还是少选择这种布局模式. 绝对布局是使用CS

谈谈Ext JS的组件——组件基类:Ext.Component

概述 Ext.Component是所有Ext组件的基类,这在Ext.Component的API中第一句话就提到了.然后第二段说明了它包含的基本功能:隐藏/显示.启用/禁用以及尺寸控制等.除了以上这些基本功能,其实还包含了很多东西.当然,在API中不可能面面俱到,那么,我们应当如何去理解这个组件基类呢? Ext.Component===DIV 如果将一个Ext.Component渲染到页面,会看到该组件会简单的在页面中添加一个DIV标记,就是这么简单.也就是说,Ext.Component就相当于一

谈谈Ext JS的组件——布局的使用方法续一

盒子布局 盒子布局主要作用是以水平(Ext.layout.container.HBox)或垂直方式(Ext.layout.container.VBox)来划分容器区域.这也是比较常有的布局方式. 使用盒子布局,除了要在容器定义layout配置项外,还需要在子组件指定子组件的宽度(HBox)或高度(VBox).指定宽度或高度有两种方 式,一是直接使用width或height来定义,一是使用flex配置项,根据比例来划分.下面通过一些示例来了解一下盒子布局的使用,这里只使用水平 盒子作为示例,垂直盒