`

Extjs与js相关的方法

 
阅读更多
1.注册事件
a.listeners
listeners:{
click: function() {//方法
		this.doReset();//方法体
		}
          }

b.on
Ext.on(事件类型,方法,参数(可选));
c.handler
执行控制的默认事件

2.Ext中获取html
Ext.get(id).dom.innerHTML或Ext.get(id).getAttribute("innerHTML")

3.Ext.get

var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存

4. Ext.fly

var el = Ext.fly('myElementId')//不需要缓存。

注:享元模式(Flyweight Design Pattern)是一种节省内存的模式,该模式的大概原理是建立单个全体对象然后不断反复使用它。

5、CSS元素
a.addClass
Ext.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式

b.removeClass

Ext.fly('elId').removeClass('myCls'); // 移除元素的样

c.replaceClass

Ext.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式

d.setStyle
Ext.fly('elId').setStyle({
display : 'block',
overflow : 'hidden',
cursor : 'pointer'

});//设置元素的样式,也可以用一个对象参数包含多个样式。

6.appendChild

把送入的元素归为这个元素的子元素。

var el = Ext.get('elId1');
// 用id指定
Ext.fly('elId').appendChild('elId2');
// Ext.Element添加
Ext.fly('elId').appendChild(el);
// 选择符组合地添加
Ext.fly('elId').appendChild(['elId2','elId3']);
// 直接添加dom节点
Ext.fly('elId').appendChild(el.dom);
// 添加CompositeElement,一组的div
Ext.fly('elId').appendChild(Ext.select('div'));
7.appendTo

把这个元素添加到送入的元素里面。

var el = Ext.get('elId1');
// 'elId'添加到'elId2'里面
Ext.fly('elId').appendTo('elId2');
Ext.fly('elId').appendTo(el);  //
    添加到Ext.Element el
8.insertBefore

传入一个元素的参数,将其放置在当前元素之前的位置。

var el = Ext.get('elId1');

// dom节点在前面插入
Ext.fly('elId').insertBefore('elId2');
//Ext.Element el在前面插入
Ext.fly('elId').insertBefore(el);
9.insertAfter

传入一个元素的参数,将其放置在当前元素之后的位置。


var el = Ext.get('elId1');

// dom节点在后面插入
Ext.fly('elId').insertAfter('elId2');
// Ext.Element el在后面插入

Ext.fly('elId').insertAfter(el);
10.insertFirst

可以是插入一个元素,也可以是创建一个元素(要创建的话请使用“DomHelper配置项对象”作为参数传入),总之,这个元素作为当前元素的第一个子元素出现。

var el = Ext.get('elId1');

// 插入的dom节点作为第一个元素
Ext.fly('elId').insertFirst('elId2');
// 插入的Ext.Element作为第一个元素
Ext.fly('elId').insertFirst(el);

// 用DomHelper配置项创建新节点,新节点会作为第一个子元素被插入。
Ext.fly('elId').insertFirst({
tag: 'p',
cls: 'myCls',
html: 'Hi I am the new first child'

});

11.insertHtml

插入HTML片断到这个元素。至于要插入的html放在元素的哪里,你可指定beforeBegin, beforeEnd, afterBegin, afterEnd这几种。第二个参数是插入HTML片断,第三个参数是决定是否返回一个Ext.Element类型的DOM对象。

Ext.fly('elId').insertHtml(
'beforeBegin',
'<p><a href="anotherpage.html'>点击我</a></p>'

); // 返回dom节点
Ext.fly('elId').insertHtml(
'beforeBegin',
'<p><a href="anotherpage.html'>点击我</a></p>',
true

); // 返回Ext.Element
12.remove

从DOM里面移除当前元素,并从缓存中删除。.

Ext.fly('elId').remove(); //
                        elId在缓存和dom里面都没有
13.removeNode

移除document的DOM节点。如果是body节点的话会被忽略。

Ext.removeNode(node); // 从dom里面移除(HTMLElement)

14..hasClass
if (Ext.fly('elId').hasClass('myCls')) {//判断是否已加上这个样式
// 是有样式的……
}
15.getStyle
var color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。
var zIndx = Ext.fly('elId').getStyle('z-index');//返回该元素的统一化当前样式和计算样式。
16.根据id取值
Ext.get(id).dom.value;
分享到:
评论

相关推荐

    Extjs 2.2 Extjs 3.21 js

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...

    Extjs 计算器 javascript计算器

    2. `PBVM70.DLL`:这可能是PowerBuilder运行时库的一部分,可能与计算器的某些功能有关,但通常不直接与JavaScript或Web应用相关。 3. `libjcc.dll`:这个可能是Java相关的一个库文件,但在此场景下可能并非必需,...

    extjs图表js代码

    extjs图表js代码

    EXTJs江湖 JavaScript框架

    EXT江湖 ExtJs ,javascript 有兴趣的人看看吧

    Extjs+Gride使用方法

    在本篇文章中,我们将深入探讨如何使用ExtJS与Gride进行交互,创建功能丰富的数据网格。 首先,理解ExtJS Grid的基本结构至关重要。Grid由以下几个主要部分组成: 1. **Store**: 存储数据的容器,可以是本地数据...

    ExtJs Eclipse 插件及安装方法

    1、将下载回来的文件解压,并将eclipse文件夹下面的两个文件夹复制你的eclipse目录下。 2、Window → Preferences → Spket → JavaScript Profiles → New...8、最后确认你的.js文件是用 Spket Javascript Editor 打开

    ExtJs中引用的三个js

    ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件、布局管理和数据绑定机制,使得开发者可以构建出功能丰富、交互性强的用户界面。在“ExtJs中引用的三个js”这个主题中,...

    ExtJs部署及使用方法

    ### ExtJs部署及使用方法详解 #### 一、ExtJs部署与配置 ##### 1.1 ExtJs库的安装 为了正确地安装ExtJs库,首先需要将ExtJs的源码包放置到项目的WebRoot目录下,即项目的根目录。在安装过程中,需要创建以下...

    ExtJs与.Net结合开发实例

    在IT行业中,Web开发是一项关键任务,而ExtJS与.Net框架的结合使用为开发者提供了强大的工具来构建功能丰富的、交互式的Web应用程序。本实例聚焦于如何利用这两个技术进行协同开发,特别是关注于数据网格(grid)的...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    Extjs 与后台交互的实例

    首先,ExtJS是一个强大的JavaScript库,用于构建富客户端应用。它提供了丰富的组件模型、数据绑定机制以及优雅的API,使得开发者能够创建具有桌面应用体验的Web应用。在"用户管理"这个实例中,ExtJS将作为用户界面层...

    EXTJS与.NET开发

    EXTJS是一种基于JavaScript的前端框架,它用于构建交互式的、数据驱动的Web应用程序。EXTJS提供了丰富的组件库,包括网格、表单、菜单、工具栏等,这些组件可以帮助开发者快速构建用户界面。与此同时,.NET是一种由...

    extjs4.0引用的JS和CSS

    ExtJS 4.0 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件、布局管理和数据绑定机制,使得开发者可以创建复杂的、交互式的用户界面。本资源包含的是ExtJS 4.0版本中需要用到的主要...

    ExtJs2相关书籍

    ExtJS是一种基于JavaScript的开源富客户端框架,专为构建企业级Web应用程序而设计。它提供了丰富的组件库,包括数据网格、表单、菜单、工具栏等,使得开发者能够创建具有桌面应用般用户体验的Web应用。在您提供的...

    ExtJs官方网站中文的入门指南 javascript

    #### 一、ExtJs简介与环境搭建 **ExtJs**是一款基于JavaScript的企业级Web应用开发框架,它提供了丰富的UI组件和强大的功能,帮助开发者快速构建高性能的Web应用程序。本文档旨在引导初学者快速入门ExtJs,通过实例...

    轻松搞定Extjs 带目录

    Extjs是一个基于JavaScript的框架,用于构建交互式的web应用。本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中...

    HTML、JS、ExtJS、jQuery智能提示Eclipse插件

    与ExtJS插件类似,Eclipse的jQuery插件增强了JavaScript编辑器,使开发者在编写jQuery代码时能获得智能提示,比如`eclipse-spket1.6.23_pojie.zip`。 5. **GEF (Graphical Editor Framework)**:`GEF-ALL-3.8.2.zip...

    ExtJS 7.6 SDK trial

    ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...

Global site tag (gtag.js) - Google Analytics