Question

我有一个文本框，当我尝试使用NameId事件检索它afterrender时，它会返回undefined，但是当我使用时，我会说keypress事件使用let＆＃39; s表示输入键，它返回预期值。有人可以解释这是怎么以及为什么会发生这种情况？

以下是一个示例实现：

afterrender事件：

afterrenderTest: function (component, eOpts){
      var foo = Ext.ComponentQuery.query('#NameId')[0].value;
      console.log(foo); //returns undefined

onkeypress事件：

onkeyPressTest: function (button, e, eOpts){
      var foo = Ext.ComponentQuery.query('#NameId')[0].value;
      if (e.getKey() === e.ENTER){
      console.log(foo); //returns a value
      }

Answer 1

我刚刚发现Sencha提供了两种不同的ExtJS“工具包”，称为“Modern”和“Classic”。奇怪的是，它们具有相同的版本号，但它们的工作方式不同......事实上，afterrender事件似乎只在Classic工具箱中可用：

作为Modern工具包的解决方法，您可以像这样修补Ext.Component类：

Ext.define("My.override.Component", {
    override: "Ext.Component",
    afterRender: function () {
        this.callParent();
        this.fireEvent("afterrender");
    }
});

然后你可以像往常一样使用Ext.Component课程：

Ext.create("Ext.Component", {
    id: "my-cmp",
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function () {
            console.log("afterrender");
        }
    }
});

您可以在https://fiddle.sencha.com/#view/editor进行实时实验。借助屏幕右上角的下拉列表，您可以在Classic和Modern之间切换。如果出现Ext not defined错误 - 无评论x - ）

，请刷新整个页面

但是，修补框架可能是一种不好的做法。你最好试着弄清楚Sencha Architect是使用Classic还是Modern工具包，如果你可以选择你想要使用的工具包。如果可以的话，也可以尝试“绘制”事件而不是“后悔”。

我没有自己检查，因为我没有安装Sencha Architect。随时通知我： - ）

Answer 2

检查文档，textbox没有'value'属性，它只是配置。你应该使用getValue（）方法。

Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
    xtype: 'textfield',
    name: 'name',
    fieldLabel: 'Name',
    listeners:{
        afterrender: function(one,two,three){
            console.log(one.value); //undefined
            console.log(one.getValue()); //" " //empty string
        }
    }
}]
});

只有在config中发送它时才能使用value属性，但这是未记录的使用，建议改为使用getValue（）方法。

Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
    xtype: 'textfield',
    name: 'name',
    fieldLabel: 'Name',
    value: 'Hello world',
    allowBlank: false,  // requires a non-empty value,
    listeners:{
        afterrender: function(one,two,three){
            console.log(one.value); //Hello world
            console.log(one.getValue()); //Hello world
        }
    }
}]
});

Answer 3

如果在声明时传递text config中的textfield值，渲染后只会返回值。我建议你应该传递默认值，如下所示：

 xtype: 'textfield',
 itemId:'NameId'
 fieldLabel: 'Name',
 value: 'XYZ',  // This should be declare
 listeners: {
   afterrenderTest: function (component, eOpts){
       var foo = Ext.ComponentQuery.query('#NameId')[0].value;
       console.log(foo); //Then it will return value
   }
}

我建议你应该在afterrender或keypress上使用模糊事件。它将在每个选项卡单击或丢失焦点上返回当前文本字段值。检查一下：

xtype: 'textfield',
itemId:'NameId',
fieldLabel: 'Name',
listeners: {
  blur: function(field){
     var foo = Ext.ComponentQuery.query('#NameId')[0].value;
     console.log(foo); 
  }
}

后来与onkeypress

3 个答案: