Referencing a Form

[netnutmike]

Hi everyone,

I have created my first Sencha Architect app, very small and a great one to cut my teeth on. I am still not totally up to speed on initcomponent and applyIf method of creating classes. I have it working all except being able to reference the form. I have a button that I want to submit the form but I cannot figure out how to reference the form. My code example is below. Any help would be appreciated and if you can point me to somewhere where I can read and try to understand this a little better that would be awesome as well.

Ext.define('MyApp.view.VendorTokenWin', {
    extend: 'Ext.window.Window',

    height: 282,
    width: 400,
    layout: {
        type: 'fit'
    },
    title: 'Token Provider',
    modal: true,
    plain: true,
    autoShow: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'form',
                    bodyPadding: 10,
                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Vendor',
                            items: [
                                {
                                    xtype: 'combobox',
                                    fieldLabel: 'Label',
                                    hideLabel: true,
                                    allowBlank: false,
                                    store: 'VendorStore',
                                    valueField: 'uid',
                                    displayField: 'VendorName',
                                    anchor: '100%',
                                    listeners: {
                                            select: function(combobox, rcds, opts) {
                                                    
                                                Ext.getStore('TokenStore').getProxy().extraParams = { vendor: combobox.getValue()};
                                                Ext.getStore('TokenStore').load();                                
                                                
                                            }
                                        }
                                }
                            ]
                        },
.....
....
{
                    xtype: 'button',
                    text: 'Assign',
                    style: 'background: #00FF44',
                    textAlign: 'center',
                    id: 'savebuttonid',
                    handler: function() {
                        var form = this.getVendorTokenWin;
                        if(form.isValid()){
                            form.submit({
                                url: '/json/gaylordassigntoken.php',
                                waitMsg: 'Assigning Token...',
                                success: function(fp, o) {
                                    Ext.Msg.alert('Success', 'Token has been successfully assigned "'); // + o.result.file + '" has been uploaded.');
                                }
                            });
                        }
                    }
                }

Thank You

Mike

[scottmartin]

In your define, you are creating a reference right away .. just need to use it

initComponent: function() {
var me = this;
}

Please note you are creating window with a form. In your code your calling:

var form = this.getVendorTokenWin;

For readability, this is a window, you still need access the form that is inside the window.

Place a few breakpoints in your code and see what is what in your button handler.
console.log(me);

Also look at componentQuery for referencing items using itemId, etc.

If you were in your controller, you would create a entry in refs:[] and then you could use
getVendorTokenWin()

Scott.

[netnutmike]

Thanks scott, that helped to look through the dom. What is the advantage to using the initComponent->applyIf compared to just putting the items into the items for the class?

[scottmartin]

I simply initializes the components, an enhanced constructor for Ext.
ApplyIf is designed to add the component if if does not already exist.

Scott.