Blur/Click on Formpanel ExtJS 4 does not access form fields correctly

Question

I have an ExtJS Formpanel and I have written a listener on a click for the form ( not on any fields of a form ) which is working fine.

1. Even after setting the Ext.FocusManager.Enable() to true, I am not able to get the even 'blur' working. What am I missing?

2. I am not able to access form fields from the event handlers for formpanel click event. When I do - this.up.('form').get.(fielname).value [which works fine in the event handlers on the form fields.] It says the element is undefined. How can I access the form elements here?

Adding the code snippet -

// 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');
    }

    }
    ]


    }

I am doing this so that I can access a value of another object, say B.field.

Onload I am able to fetch the value of B.field. But when the user changes the value of B.field which is on a different tab, I am not able to fetch the changed value of B.field in A. I am just finding ways to avoid an Ajax call to the database, if possible.

Thanks in advance for your time.

Answer 1

Without any sample from your code to reference, it's hard to determine what you are trying to do.

It could be that you just need to fix how you are querying for the form elements. For example, elements in a toolbar are not children of the form, so up/down doesn't work.

I don't think you can listen for the events focus, blur, or click on a form. Even if you could, I am not sure you would want to do. Instead, it's more common to listen for focus on a field or click on a button.

Example 1 form with field using focus and button using 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)