模糊/单击表单面板 ExtJS 4 无法正确访问表单字段

Question

我有一个ExtJS表单面板，我已经在单击表单时编写了一个侦听器（而不是在表单的任何字段上），它工作正常。

1. 即使在将 Ext.FocusManager.Enable（） 设置为 true 后，我也无法让"模糊"工作。我错过了什么？

2. 我无法从表单面板单击事件的事件处理程序访问表单字段。当我这样做时 - 这个。（"表单"）.get。（fielname）.value [在表单字段上的事件处理程序中工作正常。它说元素是未定义的。如何在此处访问表单元素？

添加代码片段 -

// Call it Object A     
Ext.create.('Ext.form.Panel', {
       id : xyz,

       items: [
       {
          xtype : 'textfield',
          name : 'test',
          fieldLabel : 'Name'
    }
    listeners : { // listener on the formPanel; not on any of its element
      click : {
            console.log("this works" );
     },
     focus : {
            console.log('this does not work');
    }
    }
    ]

    }

我这样做是为了可以访问另一个对象的值，比如 B.field。

加载我能够获取 B.field 的值。但是当用户更改不同选项卡上的 B.field 的值时，我无法获取 A 中 B.field 的更改值。 如果可能的话，我只是想办法避免对数据库进行 Ajax 调用。

提前感谢您的时间。

Answer 1

如果没有代码中的任何示例可供参考，很难确定您要尝试执行的操作。

您可能只需要修复查询表单元素的方式。例如，工具栏中的元素不是窗体的子元素，因此向上/向下不起作用。

我不认为你可以监听focus、blur或click在表单上的事件。即使你可以，我也不确定你会愿意这样做。相反，更常见的是在字段上侦听focus或在按钮上侦听click。

示例 1 表单，其中字段使用 focus，按钮使用 click

http://codepen.io/anon/pen/qEPRge?editors=001

;(function(Ext) {
  Ext.onReady(function() {
    console.log("Ext.onReady")
    var form = new Ext.create("Ext.form.Panel", {
      title: "person"
      ,items: [
        {itemId: "fld-id", fieldLabel: "id", name: "id", value: "1", xtype: "textfield", labelAlign: "top", labelSeparator: ""}
        ,{itemId: "fld-name", fieldLabel: "name", name: "name", value: "Emily", xtype: "textfield", labelAlign: "top", labelSeparator: ""}
        ,{itemId: "btn-submit", text: "submit", xtype: "button"}
      ]
    })
    form.on("afterrender", function(component) {
      console.log("form.afterrender")
    })
    form.render(Ext.getBody())
    form.queryById("fld-id").on("focus", function(component) {
      console.log("fld-id.focus")
    })
    form.queryById("fld-name").on("focus", function(component) {
      console.log("fld-name.focus")
    })
    form.queryById("btn-submit").on("click", function(component) {
      console.log("btn-submit.click")
      console.log("fld-id.value:")
      console.log(component.up("form").queryById("fld-id").getValue())
      console.log("fld-name.value:")
      console.log(component.up("form").queryById("fld-name").getValue())
    })
  })
})(Ext)