Ext.get() 和 Ext.query() 取元素方式

本文介绍了如何使用ExtJS中的Ext.get()和Ext.query()方法来灵活地选择DOM元素,包括按标签名、ID、类名等多种方式,并给出了具体的示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

想要利用ExtJS的库函数对DOM进行各类操作,就要得到Element类型的对象,但是Ext.get()取到的虽然是Element,但是参数只能是id,如果大家对jQuery的selector方式很喜欢和崇拜,那么就一定要学习Ext.get()和Ext.query()的组合(个人推荐)方式。
前面写的get()和query()我都省略参数了,先看看文档中的函数原型:
Ext.get( Mixed el ) : Element
Parameters:
el : Mixed
The id of the node, a DOM Node or an existing Element.
Returns:
Element
The Element object

Ext.query( String path, [Node root] ) : Array
Parameters:
path : String
The selector/xpath query
root : Node
(optional) The start of the query (defaults to document).
Returns:
Array

query函数返回的其实是一个DOM Node的数组,而Ext.get的参数el可以是DOM Node,哈哈,明白了吗?就是说要实现最灵活的取法,应该用query取到DOM Node然后交给get去变成Element。也就是:

var x=Ext.query(QueryStr);

//我为什么不写成内联函数形式?因为这里的x只能是一个元素,而上面那句的x是一个Array,大家自己转换和处理吧

var y=Ext.get(x);

那么接下来需要介绍QueryStr的格式(其实和jQuery里的selector的格式很像啦),至于获得Element后可以干些啥,大家自己去看ExtJS文档里关于Ext.Element的说明,我就不摘过来了。

先给一个html代码,好做演示说明
(1)根据标记取:

Ext.query(“span”); // 这个查询会返回有两个元素的数组因为查询选中对整个文档的所有span标签。

Ext.query(“span”, “foo”); // 这个查询会返回有一个元素的数组因为查询顾及到了foo这个id。

Ext.query(“div p”); // 这会返回有一个元素的数组,内容为div标签下的p标签

Ext.query(“div span”); // 这会返回有两个元素的数组,内容为div标签下的span标签

(2)根据ID取:

Ext.query(“#foo”); //这个查询会返回包含我们一个id为foo的元素的数组!或者直接Ext.get(“foo”);

(3)根据class的Name去取:Ext.query(“.foo”); // 这个查询会返回多个含有class为foo的元素的数 组。

Ext.query(“*[class]“);

(4)万能法去取:(用这个方法可以通过id、name、class、css等取)

Ext.query(“*[class=bar]“); // 这会得到class等于“bar”的所有元素

Ext.query(“*[class!=bar]“); // 这会得到class不等于“bar”的所有元素

Ext.query(“*[class^=b]“); // 这会得到class从“b”字头开始的所有元素

Ext.query(“*[class$=r]“); //这会得到class由“r”结尾的所有元素

Ext.query(“*[class*=a]“); //这会得到在class中抽出“a”字符的所有元素

Ext.query(“*[name=BlueLotus7]“); //这会得到name等于“BlueLotus7”的所有元素
<think>好的,我现在需要帮助用户解决在使用Ext.js时,新增数据后关闭窗口并刷新列表的问题。首先,我得确认用户的具体需求使用的Ext.js版本,因为不同版本的API可能有所不同。不过通常来说,Ext JS 6及以上的版本是主流,所以我假设用户使用的是这个版本。 接下来,用户提到的场景是在新增数据后关闭窗口并刷新父窗口的列表。这意味着用户可能有一个窗口(Window组件)用于表单提交,提交成功后需要关闭这个窗口,并且更新父容器中的Grid列表。 首先,我需要考虑如何关闭窗口。在Ext.js中,窗口可以通过调用close()方法或者destroy()方法来关闭。通常,使用close()会隐藏窗口,而destroy()会彻底销毁它。根据最佳实践,如果窗口可能会重复使用,应该用close();如果不再需要,则用destroy()。不过,为了保险起见,这里可能直接关闭即可。 然后,刷新列表。这通常涉及到获取到Grid组件的引用,然后调用它的store的reload()方法。但问题是如何在窗口关闭后触发这个操作。通常,用户可能在提交表单成功后执行这些操作。因此,需要在表单提交成功的回调函数中处理关闭窗口刷新列表。 接下来,我需要考虑如何获父窗口或父组件中的Grid。在Ext.js中,可以通过up()、down()方法或者组件查询(Ext.ComponentQuery)来获引用。例如,如果Grid在父容器中有itemId,可以使用this.up('window').down('#gridId')来获。 另外,如果窗口是通过某个按钮打开的,可能在创建窗口时传递了回调函数,以便在关闭时执行刷新操作。或者,使用事件机制,在窗口关闭时触发一个自定义事件,父组件监听该事件并执行刷新。 还有一个需要注意的点是,确保在关闭窗口之前,所有数据已经成功提交到服务器,否则可能会出现数据不一致的问题。因此,应该在表单的submit成功的回调函数中处理关闭刷新。 可能的代码结构大致如下: 在表单的提交处理中: ``` onSubmit: function() { var form = this.getForm(); if (form.isValid()) { form.submit({ url: 'submit-url', success: function(form, action) { // 关闭窗口 this.up('window').close(); // 获父组件中的Grid并刷新 var grid = Ext.ComponentQuery.query('#gridId')[0]; grid.getStore().reload(); }, failure: function(form, action) { // 处理失败情况 } }); } } ``` 不过,用户可能需要更具体的步骤,比如如何获取到父组件中的Grid,或者如何确保作用域正确。例如,在success回调函数中,this可能指向表单而不是窗口,所以需要使用适当的作用域绑定,或者使用up()方法来获窗口。 此外,使用Ext.window.Window的closeAction配置项也可能影响窗口的行为,默认可能是'destroy',但需要确认。 还需要考虑是否有多个Grid实例的情况,这时候通过itemId或其它选择器来准确获取到需要刷新的Grid。 总结来说,步骤应该是: 1. 在表单提交成功的回调中关闭窗口。 2.取到需要刷新的Grid组件。 3. 调用Grid的Store的reload()方法。 另外,可能需要处理异步操作,确保reload在窗口关闭之后执行,但通常关闭窗口是同步的,所以顺序不会有问题。 最后,可能需要给出完整的代码示例,并提醒用户替换选择器URL等部分,同时处理可能的错误情况。</think>在 Ext.js 中实现“新增数据后关闭窗口并刷新列表”需要以下步骤,以 **Ext JS 6+ 经典工具包**为例: --- ### 一、核心思路 1. **关闭窗口**:通过 `close()` 方法关闭弹窗。 2. **刷新列表**:获父容器中的 `Grid` 并调用 `store.reload()` 重新加载数据。 --- ### 二、代码实现(分步说明) #### 1. 表单提交成功后操作 假设你的表单是 `Ext.window.Window` 的子组件,在表单提交成功的回调函数中处理逻辑: ```javascript Ext.define('MyApp.view.FormWindow', { extend: 'Ext.window.Window', title: '新增数据', items: [{ xtype: 'form', reference: 'myForm', items: [ // 表单字段... ], buttons: [{ text: '提交', handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ url: 'your-api-url', success: function(form, action) { // 步骤1:关闭窗口 this.up('window').close(); // 步骤2:刷新父容器中的Grid列表 var grid = Ext.ComponentQuery.query('#yourGridId')[0]; if (grid) { grid.getStore().reload(); } }.bind(this), // 绑定作用域确保this指向正确 failure: function(form, action) { Ext.Msg.alert('错误', '提交失败'); } }); } } }] }] }); ``` --- #### 2. 关键点说明 - **`Ext.ComponentQuery.query('#yourGridId')`** 通过组件查询语法获父容器中的 Grid(假设 Grid 定义了 `itemId: 'yourGridId'`)。 - **`store.reload()`** 强制重新加载 Store 数据,确保列表显示最新内容。 - **作用域绑定** 使用 `.bind(this)` 或 `scope: this` 确保回调函数中的 `this.up('window')` 能正确指向窗口。 --- ### 三、优化方案(事件驱动) 如果窗口 Grid 不在同一层级,可通过**自定义事件**解耦: #### 1. 窗口内触发事件 ```javascript // 表单提交成功后 Ext.GlobalEvents.fireEvent('dataadded'); // 触发全局事件 this.up('window').close(); ``` #### 2. 父容器监听事件 ```javascript Ext.GlobalEvents.on('dataadded', function() { Ext.ComponentQuery.query('#yourGridId')[0].getStore().reload(); }); ``` --- ### 四、注意事项 1. **组件查询效率** 频繁使用 `Ext.ComponentQuery` 可能影响性能,建议通过 `references` 或 `controller` 的 `lookupReference` 获组件。 2. **窗口复用** 如果窗口需要复用,调用 `close()` 而非 `destroy()`。 3. **错误处理** 在 `failure` 回调中务必添加错误提示。 --- ### 五、完整流程图示 ``` [用户点击提交] → [表单验证] → [API提交] → [成功回调] → 关闭窗口 → 刷新Grid列表 → [失败回调] → 提示错误 ``` 通过以上步骤,即可实现 Ext.js 中“新增数据后关闭窗口并刷新列表”的完整功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值