Extjs4.x中,每个组件都新增加了两个方法up()和down()方法。这两个方法都是用来获取组件的,下面我们来看下up()方法和down()方法的官方解释。
Extjs4.x中,新增加了两个方法up()和down()方法。这两个方法都是用来获取组件的,下面我们来看下官方解释。
up( String selector, [Number/Mixed maxDepth] ) : Ext.core.Element
selector:必选,字符串形式,表示要匹配的组件。
Maxdepth:可选,表示要匹配的最大深度。
up方法的API解释为:通过简单的选择,获得相匹配的dom,使用up方法总是返回一个Ext.core.Element,也就是ext的组件。
down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.core.Element
selector:必选,字符串形式,表示要匹配的组件,
returnDom:可选,布尔类型,如果为true,则返回DOM节点,而不是Ext.core.Element。值默认为false。
down方法的API解释,通过选择器,来获得任何深度的子组件,在down方法中,不应该包含组件的id,而应该是组件的xtype。
下面我们来看他的用法。先看一段代码。
-
Ext.require(
'Ext.*'
);
-
Ext.onReady(
function
(){
-
var
win = Ext.create(
'Ext.window.Window'
,{
-
height: 160,
-
width: 280,
-
title:
'用户登陆'
,
-
closeAction:
'hide'
,
-
closable :
false
,
-
iconCls:
'win'
,
-
layout:
'fit'
,
-
modal :
true
,
-
plain :
true
,
-
resizable:
false
,
-
items:[{
-
xtype:
'form'
,
-
items:[{
-
-
}],
-
button:[{
-
text:
'登录'
,
-
handler:
function
(){
-
-
}
-
}]
-
}]
-
})
-
});
Ext.require('Ext.*');
Ext.onReady(function(){
var win = Ext.create('Ext.window.Window',{
height: 160,
width: 280,
title: '用户登陆',
closeAction: 'hide',
closable : false,
iconCls: 'win',
layout: 'fit',
modal : true,
plain : true,
resizable: false,
items:[{
xtype:'form',
items:[{
//.....
}],
button:[{
text:'登录',
handler:function(){
}
}]
}]
})
});
这段代码中,我们创建了一个window,然后在window中添加了一个form。最后增加了一个button。button的handler,我们定义了一个function。下一步,我们在这个function中添加代码。
-
var
form =
this
.up(‘form’).getForm();
var form = this.up(‘form’).getForm();
这里用到了this.up。具体解释下。这里this。就是button组件,up(‘form’)是指匹配form组件。那么合起来,我们就得到了form组件,并且得到整个form。
在这个例子中,我们并不需要down方法。因为无论是获取form还是window.我们都可以使用this.up(‘form’)或this.up(‘window’)来获取form组件和window组件。
为了介绍下down方法。我们将整个过程复杂化一些。
-
var
form =
this
.up(‘window’).down(‘form’).getForm();
var form = this.up(‘window’).down(‘form’).getForm();
相信大家已经很明白了,this.up(‘window’)获取了顶级的window组件。接着使用down()方法获取了window的子组件form组件,最后使用getForm()来获取整个form。
结语:在extjs4中,extjs给每个组件增加了up()和down()方法,这样使得我们更加容易得到每个组件的父级组件和子级组件。当然,
除了这些方法,extjs还增加了更加强大的ComponentQuery类,通过这个类,我们可以使用更多的方法来找到所需要的任何组件。具体
ComponentQuery的用法
转自http://blog.csdn.net/li_xiao_ming/article/details/7063610
分享到:
相关推荐
Extjs4中up()和down()的用法 ExtJS4学习笔记(一)---window的创建 ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4...
为了更好地理解和掌握ExtJS,下面将通过一个简单的示例来演示如何使用ExtJS构建一个基本的Web应用程序。 假设我们要创建一个包含文本框和按钮的简单表单,当点击按钮时,文本框中的内容会显示在一个弹出的对话框中...
在这个例子中,`Ext.getDoc().on('keydown'...)` 注册了一个全局的键盘事件监听器,当用户按下`PAGE_UP`或`PAGE_DOWN`键时,`prevPage`和`nextPage`方法会被调用,分别执行上一页和下一页的操作。 快捷键的应用不仅...
同时,你还可以使用`this.up()`, `this.down()`, `this.query()`等方法找到特定的子组件并为其添加事件监听。 总结,重写Ext JS的Panel并添加click事件是一个常见的需求,通过继承Panel并使用事件监听机制,我们...
以上就是ExtJS中的一些核心方法,它们涵盖了元素获取、DOM操作、样式设置、对齐和尺寸调整等多个方面,是开发过程中经常会用到的功能。掌握这些方法能够帮助开发者更加高效地构建和操作ExtJS应用程序。
这个文档主要总结了ExtJS中的常用方法,涉及页面元素获取、DOM操作、样式操作、对齐和尺寸操作等多个方面。 1. 页面元素获取: - `Ext.get()`:这是一个获取页面元素的方法,但因为消耗内存,不推荐频繁使用。 - ...
xtype:在EXTJS的可视化组件部署中的一种机制,即通过指定xtype的值,来告诉容量如何初始化所包含的级件,如xtype:”textfiled”,表示使用Ext.form.TextFile来进行初始化当前组件。 xtype Class ————- ————...
在ExtJS中,容器对象是框架的核心组成部分,用于组织和管理UI组件。它们提供了一种方式来布局、...在实际开发中,根据具体需求,可能还需要配合其他属性和方法,如`up()`、`down()`等,来更高效地遍历和操作组件树。
从DOM里面移除当前元素,并从缓存中删除。. Ext.fly('elId').remove(); // elId在缓存和dom里面都没有 40.removeNode 移除document的DOM节点。如果是body节点的话会被忽略。 Ext.removeNode(node); // 从dom...