Getting the form to submit when clicking the submit button

I'm trying to submit the form when the button is clicked, however it wasn't as simple as i thought, i always end up getting a fp.getForm is not a function, although the submit handler is taken directly from the ExtJs doc, any clue?

Players.panel.Subscription = function(config) {
    config = config || {};
    Ext.apply(config,{
        border: false
        ,baseCls: 'modx-formpanel'
        ,process: 'mgr/player/getSubscribers'
        ,standardSubmit: true
        ,url: Players.config.connectorUrl
        ,baseParams: { action: 'mgr/player/getSubscribers' }
        ,buttons: [{
                    text: 'Export er'
                    ,formBind: true
                    ,type: 'submit'
                    ,handler: function(){


                            var fp = this.ownerCt.ownerCt,
                                form = fp.getForm();
                            if (form.isValid()) {
                                // check if there are baseParams and if
                                // hiddent items have been added already
                                if (fp.baseParams && !fp.paramsAdded) {
                                    // add hidden items for all baseParams
                                    for (i in fp.baseParams) {
                                        fp.add({
                                            xtype: 'hidden',
                                            name: i,
                                            value: fp.baseParams[i]
                                        });
                                    }
                                    fp.doLayout();
                                    // set a custom flag to prevent re-adding
                                    fp.paramsAdded = true;
                                }
                                form.submit();
                            }

                }
                }]

    });
    Players.panel.Subscription.superclass.constructor.call(this,config);

};

I also tried replacing the base class from modx-formpanel to formpanel and basicform with no success.

Thanks

Solution

It's because you have not a form panel. Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext/bootstrap.js"></script>
</head>
<body>
<script>
Ext.ns('Players.panel');
Ext.onReady(function() {  
  Players.panel.Subscription = Ext.extend(Ext.form.Panel, {
    constructor : function(config) {
      config = Ext.apply({
          border: false
            ,baseCls: 'modx-formpanel'
            ,process: 'mgr/player/getSubscribers'
            ,standardSubmit: true
            ,url: '-'
            ,baseParams: { action: 'mgr/player/getSubscribers' }
            ,buttons: [{
                        text: 'Export er'
                        ,formBind: true
                        ,type: 'submit'
                        ,handler: function(){


                                var fp = this.ownerCt.ownerCt,
                                    form = fp.getForm();
                                if (form.isValid()) {
                                    // check if there are baseParams and if
                                    // hiddent items have been added already
                                    if (fp.baseParams && !fp.paramsAdded) {
                                        // add hidden items for all baseParams
                                        for (i in fp.baseParams) {
                                            fp.add({
                                                xtype: 'hidden',
                                                name: i,
                                                value: fp.baseParams[i]
                                            });
                                        }
                                        fp.doLayout();
                                        // set a custom flag to prevent re-adding
                                        fp.paramsAdded = true;
                                    }
                                    form.submit();
                                }

                    }
                    }]
       }, config);
        Players.panel.Subscription.superclass.constructor.call(this,config);
    }
  });

  var f = Ext.create(Players.panel.Subscription, {id:'formPanel', renderTo: Ext.getBody()});;
});
</script>
</body>
</html>