How to define get/setName methods on form field with Panel as a component?

[szimek]

Hi,

I'm using Signature Pad Field and the problem is that while it extends from field.Text, is uses Panel as its component:

Ext.define('ux.signaturefield', {
      extend: 'Ext.field.Text',
      xtype : 'signaturefield',
      config: {
            component: { xtype: 'panel' }
          }
});

The issue with it is that when I call form.getValues(), value of signature field is not returned, as it doesn't have name value. I can get it "manually" by finding signature field and calling getValue on it, but it would be more convenient, if it worked just like the rest of fields.

I can't set name value like this:

{
    xtype: "signaturefield",
    name: "signature"
}

because Sencha calls setName method on a component, which in this case is a Panel instance that doesn't have such method. I tried this:

Ext.define('ux.signaturefield', {
      extend: 'Ext.field.Text',
      xtype : 'signaturefield',
      config: {
            component: { 
                        xtype: 'panel',
                        name: null
                    }
          }
});

but it didn't defined getter and setter methods for name attribute on panel component.

Any tips how to do it?

[eastlander]

Not sure if this will work, otherwise you should try to extend panel and use that as component for the signaturefield:

Ext.define('ux.signaturefield', {
      extend: 'Ext.field.Text',
      xtype : 'signaturefield',
      config: {
            component: { 
                        xtype: 'panel',
                        config: {name: null}
                    }
          }
});

[szimek]

Thanks, I've already tried it as well

If extending Panel is the only way - is it ok to define 2 classes in a single file? I'd like to keep the Signature Field extension in a single file.

[EDIT]: Creating a custom panel with name attribute inside signaturefield.js file and using it as a component instead of a plain panel works (at least in the browser). It's still strange that specifying name attribute when specifying form field component config doesn't create getters/setters. Not sure if it's a bug or is it supposed to work like that.

[nicksav]

You can see, that text field will try to match component ( what is a panel in our case). What you need to do, is inside plugin insert:

    updateName: function(newName) {
        debugger;


            this.setName(newName);
        
    },

where you set name to text field instead of Panel.
Hope that helps.
Nick