Extjs -父组件的侦听器不是从子组件触发的
Extjs是一种基于JavaScript的前端开发框架，它提供了丰富的组件和工具，用于构建交互性强、功能丰富的Web应用程序。在Extjs中，父组件的侦听器可以通过监听子组件的事件来触发。
父组件的侦听器不是从子组件触发的意味着父组件的侦听器不会直接响应子组件的事件。相反，父组件可以通过监听子组件所在的容器的事件来间接响应子组件的事件。
在Extjs中，组件可以嵌套在容器中，容器可以是面板、窗口、布局等。当子组件触发事件时，事件会冒泡到容器层次结构中的父组件，父组件可以通过监听容器的事件来捕获并处理子组件的事件。
父组件可以通过使用Extjs提供的事件监听器来监听容器的事件。例如，可以使用addListener方法或on方法来为容器添加事件监听器。当容器的事件被触发时，父组件的事件监听器将被调用，从而实现对子组件事件的响应。
在Extjs中，父组件的侦听器不是从子组件触发的，这种设计可以提高代码的灵活性和可维护性。通过将事件处理逻辑放在父组件中，可以更好地组织和管理代码，减少重复代码的编写，并且可以方便地对多个子组件的事件进行统一处理。
对于Extjs开发者来说，了解父组件的侦听器不是从子组件触发的特性，可以帮助他们更好地设计和实现复杂的交互逻辑，提高应用程序的用户体验和可扩展性。
腾讯云提供了一系列与云计算相关的产品和服务，其中包括云服务器、云数据库、云存储等。这些产品可以帮助开发者在云计算领域构建和部署应用程序。具体的产品介绍和相关链接可以在腾讯云的官方网站上找到。
相关·内容
在选项卡面板中，有一个选项卡，在该选项卡中有一个网格面板。网格中的一列需要有一个渲染器。呈现器需要使用在tabpanel的作用域级别定义的属性。那么，从列模型内部，我们可以访问tabpanel的外部作用域吗？
谢谢。
浏览 1提问于2011-02-17得票数 1
我有两个组件--父组件和子组件。我已经将主机侦听器附加到这两个组件以检测关键事件。我想检测两个组件中的空间键事件。如果用户在子组件文本字段中按空格键，那么我希望父组件什么也不做。但是，如果用户不在子组件文本字段中并按空格键，那么我希望父组件触发一个函数。
export class ParentComponent {
constructor() { }
@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
console.log("PARENT
浏览 3提问于2017-12-05得票数 3
回答已采纳
2回答
我已经尝试了很长一段时间，但除了在视图中的侦听器中添加一个afterrender之外，我还没有找到解决这个问题的方法。但我想让控制器来处理它。
有谁知道我怎么解决这个问题吗？
这是我目前在我的文件中的内容，
controller/App.js
Ext.define('HD.controller.App', {
extend: 'Ext.app.Controller'
,views: [
'core.Header',
'core.Navigation',
浏览 0提问于2011-10-25得票数 6
回答已采纳
我有一个应用程序监听器，它应该在每个webapp启动时只执行一次，因为它加载了基本的用户信息数据。
public class DefaultUsersDataLoader implements ApplicationListener<ContextRefreshedEvent> {
@Override
@Transactional
public void onApplicationEvent(ContextRefreshedEvent e) {...}
}
不知怎么的，它会被执行两次:在应用程序启动时，以及当第一个请求到达服务器时。为什么会发生这种情况，我怎样才能防止它
浏览 0提问于2015-01-09得票数 10
回答已采纳
1回答
我有一个定制的vue指令。
Vue.directive('click-outside', {
bind: function (el, binding, vnode) {
document.addEventListener(clickHandler, (event) => {
const clickedInsideDropdown = el.contains(event.target);
if (!clickedInsideDropdown && el.classList.contains(openClass)) {
浏览 2提问于2017-11-11得票数 1
回答已采纳
我有一个有多条记录的页面。每条记录都有一个按钮，用于打开用于创建名称的对话框。然后，该名称在数据库中创建相关记录并更新源记录。
有一个实例化的对话框，我想要显示该对话框，获取结果并将其返回到正确的记录。
下面的代码可以运行一次，但不能运行第二次。我可以看到单击了Create按钮，但没有捕捉到事件。
非常感谢你的帮助。
TrailNamePresenter.prototype.onCreateTrailClick = function (trailSegment, combo, personalRouteId) {
if (!this.createTrailWindow) {
this.
浏览 0提问于2010-10-13得票数 0
1回答
我有一个父组件，通常在其中呈现输入字段。有没有办法知道孩子的输入是否有焦点？
<Component>
<input />
</Component>
const Component = (props) => return (<div className="nice">{props.children}</div>)
浏览 1提问于2020-11-29得票数 0
在子组件中有一个名为yes的按钮，在该按钮中，我使用从父组件传递的props.id从数组和本地存储中删除列表项。
问题是该项已从数组和本地存储中删除，但在屏幕上仍然可见，直到我按下父组件中另一项上的“删除”按钮。
当我按下父组件中的delete按钮时，它会打开一个覆盖。当我按下“是”按钮时，我希望立即从屏幕上移除列表项。
以下是子组件中的代码。
import React, { useCallback, useState } from "react";
import styles from "./Delete.module.css";
functi
浏览 5提问于2022-06-03得票数 1
回答已采纳
我已经为包含地址字段、输入框和SelectItems的示例创建了FC say子组件，当从另一个组件父级调用此FC时，我需要访问输入框的值并选择用户添加的项。
您能给我一个简单的例子，比如父组件通过函数组件样式TypeScript调用时子组件中的1文本框。
下面是具有两个输入和一个SelectItem的子组件的示例代码
return (
<>
<Accordion varient={'grouped'} expanded theme={theme}
items={[
{
浏览 5提问于2022-08-31得票数 0
我不能用vue.js将数据从子路由器传递给父路由器。
从很少的研究(包括堆栈溢出)来看，非常清楚的是，我们必须从子级使用$emit()方法。我在文档、堆栈溢出和youtube教程之间四处游玩，但我仍然错过了一些东西，我做错了。
下面是我的路由器Menubar.vue
<template>
<div id="app" class="container-fluid">
<div @clicked="onClickChild">
<p>login is s
浏览 0提问于2019-04-07得票数 4
回答已采纳
1回答
我有一组风格相似但行为完全不同的模态，我想在我的应用程序中的不同场景中使用。所以，对于我来说，使用它们的最简单的方法是在这些不同的场景中将逻辑作为输入传递。对于简单的函数，它是有效的(假设我的custom-button在点击时需要() => Observable<any>，所以它可以正确地锁定，直到回调： export class SimpleComponent {
@Input() fetchFun: () => Observable<any>;
}
export class ParentComponent {
funToPass = () =
浏览 52提问于2021-07-02得票数 0
我有组件A，它有两个子组件C1和C2。在C1组件中，有一个函数使用它从C2中相同的源获取数据。对于C1
<template>
</template>
<script>
export default {
url = 'abc.com';
name: 'c',
data () {
return {
users:'',
}},
methods: {
getData: function () {
$.get(url, function( data ) {
浏览 1提问于2017-09-27得票数 1
回答已采纳
1回答
如何获得组件中的列表值？
、、、
例如，我在模板中导入了一个名为<pic-upload>的组件，如
<template>
<pic-upload></pic-upload>
</template>
export default {
data: () => ({
show: {
content: '',
recommend: false,
albums: []
}
}),
components: {
picUpload
},
methods: {
submit: function () {
浏览 3提问于2016-12-22得票数 2
回答已采纳
3回答
如何从父组件访问子组件数据？我有一个父组件"MissionPlanner“，我想要访问子组件"chosenHeroes”数组"ChosenHeroes“。如果一个元素在数组中，我想最终呈现一个div --并且能够更新父元素中的数组 我不确定是否应该使用emit()，以及如何使用它。我尝试创建一个自定义事件"addHero“，并将其传递回来。但是我得到了一些错误 ChosenHeroes.vue <template>
<div>
<select v-model="chosenHero">
浏览 30提问于2020-03-30得票数 0
我想打印到控制台'hello‘上的自动完成面板是打开的。怎么做？
这就是我尝试过的template.html
<mat-form-field>
<input class="selectCustomer" opened id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">
<mat-aut
浏览 2提问于2019-12-10得票数 1
回答已采纳
3回答
我已经实现了一个自定义SSO服务，它工作得很好，但我想打开一个弹出窗口来请求用户授权，而不是将他重定向到此页面。
问题是，当用户接受或拒绝连接他的帐户时，我需要刷新我的父窗口( web应用程序)并关闭弹出窗口(授权)。
因此，我正在考虑将弹出窗口中的操作分派到父窗口，以刷新其状态，例如：
componentWillMount() {
window.opener.loginSuccess(this.props.user);
}
但是我没有看到来自window对象的任何操作。我们如何实现这个特性呢？
浏览 24提问于2016-08-01得票数 1
回答已采纳
2回答
Vue3将值发送到父级
、、、
我是Vue的新手，目前正在创建一个带有动态显示缩写的表。
我尝试从子组件向父组件发出一个searchTerm，但是我不知道该怎么做。
我的问题是，当我试图分离搜索输入和表时，值不会发送给父级。
我尝试通过定义属性和导出默认值来解决这个问题，但不知何故我的组件不接受这一点。
const SzNavbar = {
template: `
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand"
浏览 16提问于2021-06-07得票数 0
回答已采纳
1回答
GetComponentAt故障
、、、、
在分层情况下，我对getcomponentat有问题。我已经做了很多研究，发现了下面的线索，这是我真正需要的，但它对我不起作用。我在线程中下载了代码，它可以工作，但是当我在我的项目中实现它时，它没有工作。我可能做了一些很愚蠢的错误，我不能指手画脚。
我有一个JFrame，它有一个基本面板。我添加了一个gridPanel (它扩展了JPanel并实现了mouselistner )。在网格面板上，我要添加单元格(它扩展了JPanel并实现了mouselistener)。当我单击任何单元格时，我想知道该单元格在网格中的位置，但是一切都返回为0,0。
就这样开始了。
MAINCLASS
mainF
浏览 2提问于2015-05-08得票数 2
回答已采纳
我在我的应用程序中有以下层次结构：
AppComponent » ThemeComponent » HeaderNavComponent
ThemeComponent有一个方法
qrIconClicked(){
}
我需要从HeaderNavComponent调用此方法。
我该怎么做呢？
浏览 0提问于2017-10-13得票数 3
1回答
extjs组件的between和afrer呈现事件之间的区别是什么。
另外，我是否可以引用任何描述extjs事件触发顺序的文档(或者描述组件在屏幕上显示之前发生的步骤)？
浏览 1提问于2014-01-04得票数 4
我正在创建一个代表我的货币字段的组件。我的目标是列表中的add元素，在money字段上设置0以添加列表中的下一个元素.但是，我的问题是，当发送使用$emit事件清除输入以提高可用性时，无法工作。$emit的工作方式如下图所述
我的金钱领域：
<template>
<div class="input-group" @clear="clearInputField()">
<span>{{ title }}</span>
<input ref="displayMoney"
浏览 1提问于2022-01-24得票数 0
回答已采纳
1回答
如何用NgRX数据更新存储？
、、、、
我的组件结构
在case.component中，im缓存存储的case实体中的案例数据，然后从子组件(案例操作、案例活动)中获取.等)。
但是，当我从任何子组件远程更新情况时，我不知道如何刷新父组件(case.component)中缓存的数据，以便再次在子组件上复制该数据。
我试着做最好的实践。
浏览 3提问于2020-06-12得票数 0
回答已采纳
1回答
我有一个父组件，它有两个模板()：
第一个包含一个简单的数据绑定文本。
第二个组件包含一个子组件，它更新数据模型(来自本演示中的constructor和ngOnInit )
下面是父组件模板：
<ng-template [ngIf]="true">
<div>
<b>Value from TemplateComponent: </b>{{ dataService.value | async }}
</div>
</ng-template>
<ng-template [
浏览 0提问于2018-06-20得票数 4
我的自定义组件click函数被触发两次-自定义组件的事件和采样级事件都被触发。
这是我的短裤：
浏览 0提问于2017-02-08得票数 5
我的子组件中有下面的代码
@Component({
selector: 'app-child'
})
export class ChildComponent {
@Output()
dataDeleted: EventEmitter<boolean>;
constructor() {
this.dataDeleted = new EventEmitter<boolean>();
}
delete() {
this.dataDeleted.emit(true);
浏览 3提问于2022-07-25得票数 -1
回答已采纳
1回答
当任何深度嵌套的children组件dispatches时，如何notify父组件
例如：
class ParentComponent extends Component {
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
注意，孩子可以是任何深度的，例如
<Component1>
<Component2>
<Com
浏览 1提问于2017-09-13得票数 0
3回答
我尝试在我的两个组件(父组件和子组件)之间使用双向绑定，并尝试在这两个组件的ngOnChanges中检测由此引起的更改。我可以通过改变父组件(App组件)的输入/输出属性来触发子组件(测试组件)的ngOnChanges。但是，我无法通过更改子组件中的双向绑定属性来触发父组件的ngOnChanges。
工作柱塞可以在这里找到：
import { Component, OnInit, OnChange, Output, Input, EventEmitter } from '@angular/core';
@Component({
selector: 'my-app&
浏览 3提问于2017-06-09得票数 1
1回答
我有一个角度PWA，这应该可以让用户上传图像到亚马逊网络服务S3桶。它可以在任何浏览器的Windows和Android上运行，但在IOS上使用“图片库”时，无论是在Firefox和Chrome中还是在Safari中都不能使用。 选项“拍摄照片或视频”实际上没有问题，但当使用“图片库”选项时，它让我选择一个图像，但选择后没有任何反应。移动Chrome控制台的调试表明processFile($event)函数甚至没有被调用，但我找不到原因。 由于设计上的选择，输入的样式是"display: none“，我使用另一个按钮来打开它，但是因为它可以让我上传一张新的照片，让我实际选择图像，我不会
浏览 18提问于2021-09-22得票数 0
我正在编写我的第一个reactjs + flux应用程序，我已经设法让基本代码正常工作。但是，有一个列表，它根据单击的列表项填充另一个列表。在我将我的列表数据硬编码到存储中之前，这一直运行得很好。但是，当我开始从服务器获取列表项的数据时，第二个列表不会通过一次单击来填充-它需要两次单击才能完成。我不认为从服务器获取数据是一个问题，因为默认数据是正确填充的。经过调试，我发现存储也正确地返回了数据，但是setState()没有设置数据。我做错了什么？下面是我的代码：
function getInitialData(){
return{
items:DataStore.get
浏览 1提问于2015-05-21得票数 0
我从子事件发射器获得'date‘返回，我试图将返回的'date’作为参数传递给我父组件的函数，该函数需要在页面加载时被初始化，以便我可以缓存模板视图。我尝试了以下操作，但找不到在页面加载时将该值作为"getData()“函数的参数传递的方法。任何帮助都将不胜感激，谢谢！
parentComponent.html
<child (todaysDate)="getTodaysDate($event)"></child>
parentComponent.ts
import { Component } from '@angular
浏览 4提问于2020-10-29得票数 0
1回答
我使用的是extJS 3.4。我有一个弹出菜单项，其中有一个文本框，可以接受键盘输入(表单提交)。
但是，如果必须修改文本字段中已键入的内容，则无法遍历已键入的文本。
经过分析后，我发现在事件侦听器中存在通过父div (mainMenu)连接到此组件的侦听器，这导致了问题的发生。
一旦这些侦听器被删除(从调试器中)，左右键就开始在textfield组件上工作。
我不知道如何在代码中删除这个侦听器。
任何帮助都很感激。
下面是代码示例(HTML)：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt
浏览 0提问于2018-03-21得票数 1
回答已采纳
我的第一个组件(子组件)如下：
<template>
...
</template>
<script>
export default {
...
methods: {
addPhoto() {
const data = { id_product: this.idProduct}
const item = this.idImage
this.$store.dispatch('addIma
浏览 1提问于2017-07-14得票数 0
回答已采纳
5回答
我对角质还不熟悉。我正在尝试从子组件访问/变异父组件的变量。我画了一张小图来解释我的结构。
标签1:变量(要变异)所在的父组件。
标签2:子组件，它将在单击事件上更改父变量。
标签3:子区域内的按钮将触发更改。
我检查了许多解决方案，例如：
但我解决不了我的问题。我还创建了一个。请看一下我的密码。
timeselector.component.ts
import { Component, ViewChild } from '@angular/core';
import { MonthpickerComponent } fr
浏览 2提问于2020-03-03得票数 3
回答已采纳
4回答
有没有可能把一个函数传递给一个组件，然后在组件内部调用这个传递参数的函数？
示例：
帖子列表
<post-list posts="blog.posts"
loading="blog.loadingPosts"
get-post-url="blog.getPostUrl"
is-user-authenticate="blog.user">
</post-list>
getPostUrl是一个函数(在容器控制器内)：
const getPost
浏览 96提问于2016-04-27得票数 11
回答已采纳
3回答
我有一个VBox，我为click分配了一个处理程序，而在VBox中，我有图像和文本等组件，但没有为click分配处理程序。当我单击文本和图像时，会调用click函数吗？如果没有，我如何才能做到这一点，而不是在容器级别上单独分配处理程序呢？谢谢
浏览 0提问于2010-07-17得票数 0
回答已采纳
我有一个父组件，它有3个子组件在里面。在父组件中，我有一个保存按钮。
我的要求是，如果任何子组件中的任何元素或变量被触摸，那么我只希望启用父组件中的“保存”按钮。
<div>
<h3>Parent Component</h3>
<child-component1>
</child-component1>
<child-component1>
</child-component1>
<child-component1>
</child-component
浏览 2提问于2021-04-22得票数 0
回答已采纳
我要做到以下几点：
当选择ComboBox中的某个项时，隐藏表单中的其他字段或完整的div.。
这是我的ComboBox：
var typeIDcombo = new Ext.form.ComboBox({
fieldLabel: 'Type',
name: 'typeid',
store: typeIdData,
displayField:'name',
valueField: 'typeid',
hiddenName: 't
浏览 2提问于2011-05-16得票数 3
回答已采纳
有没有办法查询"up"？我在一个组件中，想用control()注册它的父事件的监听器。这需要一个查询来获取我的主视图的父视图。
浏览 2提问于2012-05-09得票数 0
回答已采纳
2回答
这篇文章被完全更新，以便将所有代码放在一个类中，并试图使它尽可能地向前.。
项目的工作非常完美，除了一件事:当学生记录被更新时，数据库被更新，但是可见列表不更新。
看到更改的唯一方法是刷新整个页面(请参阅代码底部的NavigationManager行)。
你能帮我理解一下我不在这里做什么吗？
@page "/Students2";
@using ParentChild.Models;
@inject IJSRuntime JS; // Used for Confirmation Dialog & Alert Box
@i
浏览 3提问于2020-09-08得票数 5
因此，我有一个更高级别的导航组件，如下所示：
<Navigation ref="nav">
<Children>
<Footer>
在我的一个子组件中，我想在导航组件中调用一个方法。我该怎么做呢？我试了一下：
如果导航有一个名为
toggle() {
this.setState({open: true})
}
我可以在子组件中这样调用它吗？
孩子们：
openSomething = () => {
console.log(this.refs);
this.refs.nav.toggle();
}
<Somebu
浏览 0提问于2015-12-27得票数 1
假设我有一个名为child的组件。我想在父组件中访问那里的数据。在最终在父挂载中检索事件之前，我希望在childs挂载：this.$emit('get-data', this.data)中发出一个事件。这样做可行吗？如果是的话，怎样才能做到呢？如果没有，还有什么更好的选择？
干杯。
浏览 1提问于2019-02-17得票数 2
回答已采纳
我正在对一个使用ExtJS网格的网站使用web自动化工具，并想运行一些JavaScript来模拟一行的'onlick‘事件……当我在相应的div标签上触发一个常规的onclick事件时，什么也没有发生。
我做了一个'Ext.version‘，得到了2.2，所以我在这里查找了Ext2.2API：，但我真的搞不懂它。我不关心创建一个新的网格，而是操纵一个现有的网格。有什么想法吗？
浏览 1提问于2011-12-01得票数 0
回答已采纳
我试图通过理解一个完成的代码来学习电子-虚拟。对于源，我使用的是Eplee，这是一个用vue js +电子构建的epub阅读器，这里是到Eplee的源链接。
<!-- BookmarkMenu.vue -->
<template>
<el-popover :popper-class="`popper ${theme}`" width="350" trigger="hover">
<div class="el-popover__title">
浏览 2提问于2019-12-23得票数 0
回答已采纳
1回答
我有两个组件子组件和父组件，这个子组件的角色是星等评级，现在我想从子组件中获取要在父组件中显示的值，并使用来自子组件的数据。
添加:我使用Redux并响应导航2.0
子组件
import React, { Component } from 'react';
//import react in our code.
import {
StyleSheet,
View,
Platform,
Text,
Image,
TouchableOpacity,
} from 'react-native';
class Rate extends Co
浏览 0提问于2019-06-14得票数 2
我有一个调用接口的按钮组件，我想将返回的响应推送到父级，在那里它将成为'translatedText‘属性，然而，我认为我错误地使用了$emit，因为出现错误：’`Uncaught (in promise) TypeError: Cannot read properties of undefined (read '$emit')。如何最好地捕获响应数据并将其传递给我的父母道具，在这种情况下使用$emit是最好的选择吗？ TranslationButton.vue <template>
<b-button type="is-prim
浏览 50提问于2021-11-16得票数 0
我拼命想解决一个烦人的问题：
我有一个父组件和一个子组件。孩子有绝对的位置和动态的高度。我需要根据孩子的身高来计算父母的保证金。我试着做这样的事
const Parent = () => {
const childRef = useRef(null);
return (
<Child saveRef={ref} />
);
const Child = ({saveRef}) => (<div ref={saveRef}> </div>);
但是问题是，当Ref实现时，父组件不会重发。在收到Ref之后，我如何重新选择父组件？
提
浏览 0提问于2019-02-16得票数 2
回答已采纳
我对fs函数很困惑。我的意思是，我不明白什么时候应该使用函数参数，函数，以及当 this .For示例代码：
e.target.addEventListener('mouseout',function handler(d)
{
var divE=d.target.parentNode.querySelector('div.preview');
divE.parentNode.removeChild(divE);
e.target.removeEventListene
浏览 1提问于2014-05-22得票数 1
回答已采纳
2回答
首先，这是我目前的结构
CHILD COMPONENT
// HTML
<v-select
v-bind:items="selectItems"
v-model="selectedItemModel"
label="Category"
item-value="text"
></v-select>
<v-text-field
label="Enter Value"
type="number"
v-model="compValModel"
&g
浏览 4提问于2017-10-05得票数 0
回答已采纳
2回答
在我的父组件中有以下内容：
obj: any = { row1: [], row2: [], total: [], sumTotal: 0 };
我将obj传递给子组件：
<tr table-tr-tr *ngFor="let key1 of channels[name];let i=index" [key1]="key1" [data]="array" [field]="key1"
[width]="width" [plantype]="plantype" [custom]=&
浏览 0提问于2019-09-05得票数 1
回答已采纳
好的，这里涉及的组件有:任务列表-组件添加-分配-按钮添加-分配-弹出。
我的父组件在NgFor中显示一个赋值列表，对于每个表行，都有一个子组件‘assignments’，上面有一个单击事件。
如果单击它，我的父组件将整个赋值(而不是复数)传递给一个服务，其中可以在该服务上订阅。问题是，它发送了整个列表。我不知道如何使点击事件具体。尝试在每个按钮上使用索引，但这没有任何作用。
编辑：，我想澄清两件事。No1:我试过在popover中输入@输入，结果是一样的。No2:当我说出整张单子时，我的意思是每一份作业都会被一个接一个地发送出去.当我使用控制台日志时，(如果我在列表中有五个任务)，就会有五个
浏览 0提问于2018-10-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
