Ext problem: FormPanel inside of Panel?

30 Posts

michael.graham Reply #1, 14 years, 5 months ago

I'm trying to put a form inside of an Ext accordion panel.

Below is a simplified version of what I'm trying to do, but it illustrates the problem. When I click the button, I get an error in the console:

this.getForm is not a function

This is about my third attempt to get this to work, and I've spent all day experimenting. If anybody could help me, it would be greatly appreciated!!

Here's my code:

app.panel.Home = function(config) {
    config = config || {};
    Ext.apply(config,{
        id: 'mycomponent-panel-container'
        ,url: app.config.connectorUrl 
        ,baseParams: {
            action:    'mgr/mycomponent/mycomponent'
        }
        ,layout: 'fit'
        ,items: [
            {
                id: 'the-real-form'
                ,xtype: 'modx-formpanel'
                ,layout: 'form'
                ,border: false
                ,fileUpload: true
                ,baseCls: 'modx-formpanel'
                ,cls:'main-wrapper'
                ,items: [
                    {
                        xtype: 'textfield'
                        ,inputType: 'file'
                        ,fieldLabel: 'upload'
                        ,name: 'csv-file'
                        ,id: 'csv-file'
                        ,allowBlank: false
                        ,width: 300
                        ,labelSeparator: ''
                        ,anchor: '100%'
                    }
                    ,{
                        xtype: 'checkbox'
                        ,fieldLabel: 'chk1'
                        ,name: 'chk1'
                        ,id: 'chk1'
                        ,width: 300
                        ,labelSeparator: ''
                        ,anchor: '100%'
                    }
                    ,{
                        xtype: 'button'
                        ,text: 'button' 
                        ,name: 'button'
                        ,id:   'button'
                        ,scope: this
                        ,handler: function() {
                            var form = this.getForm();

                            console.log("form values: %o", form.getValues());
                        }
                    }
                ]
            }
        ]
    });
    app.panel.Home.superclass.constructor.call(this,config);
};

Ext.extend(app.panel.Home,MODx.Panel);
Ext.reg('mycomponent-panel-home',app.panel.Home);

30 Posts

michael.graham Reply #2, 14 years, 5 months ago

Incidentally, my first attempt was to try this the other way round: put the input widgets inside of the accordion and put the accordion inside of a top level FormPanel.

However, while I was able to get the form properly, when the form was submitted, all of the values were blank. This may be related to this Ext issue:

http://www.sencha.com/forum/showthread.php?41093-New-template-method-for-the-Container-architecture.

4,149 Posts

splittingred Reply #3, 14 years, 5 months ago

Your panel needs to extend MODx.FormPanel, not MODx.Panel, if you expect this.getForm() to work, since .getForm() is a FormPanel-only method, and the scope of 'this' in your example is a MODx.Panel.

I would recommend extending MODx.FormPanel, and then you don't need the 'xtype' on the place where you used "xtype: 'modx-formpanel'" (Ext defaults to panel/container if you dont specify one, which is fine). Move your fileUpload: true to the top layer as well.

shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com

30 Posts

michael.graham Reply #4, 14 years, 5 months ago

Okay, I tried this approach and it is working. Thank you!

I had previously taken this approach, and it didn't work, and I don't know why. I'll go back through my revisions to try and figure that out.

But here's a problem. I want to have multiple forms on the page - each accordion section would have its own form. How do I do that if all panels are children of the same FormPanel?

30 Posts

michael.graham Reply #5, 14 years, 5 months ago

In other words: How can I put a bunch of FormPanels inside of an accordion?

4,149 Posts

splittingred Reply #6, 14 years, 5 months ago

Define each separately, giving each formpanel an xtype and doing your handling in each, then reference those xtypes in the accordion definition:

{
  xtype: 'accordion'
  ,items: [{
      xtype: 'my-formpanel-1'
  },{
      xtype: 'my-formpanel-2'
      /* etc */
  }]
}

shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com

30 Posts

michael.graham Reply #7, 14 years, 4 months ago

Okay, I've tried that, but I'm now getting an error deep within ExtJs:

a.header.addClass is not a function
http://act.caliope/manager/assets/ext3/ext-all.js
Line 7

Here's the code. I've simplified it as much as I could (but perhaps not enough?)


ImportUsers.panel.SampleForm = function(config) {
    config = config || {};
    Ext.apply(config,{
        id: 'x-sample-form'
        ,header: false
        ,border: false
        ,items: [
           {
               xtype: 'button'
               ,text: 'button'
               ,name: 'export-button'
               ,id:   'export-button'
               ,scope: this
               ,handler: function() {
                   alert('hello');
               }
           }
        ]
    });
    ImportUsers.panel.SampleForm.superclass.constructor.call(this,config);
}
Ext.extend(ImportUsers.panel.SampleForm,MODx.FormPanel);
Ext.reg('x-sample-form',ImportUsers.panel.SampleForm);


ImportUsers.panel.Home = function(config) {
    config = config || {};
    Ext.apply(config,{
        id: 'import-users-panel-container'
        ,url: ImportUsers.config.connectorUrl 
        ,items: [
            {
                html: '<h2>Heading</h2>'
                ,id: 'import-users-header'
                ,cls: 'modx-page-header'
                ,border: false
                ,anchor: '100%'
            }
            ,{
                id: 'import-users-panel-accordion'
                ,layout: 'accordion'
                ,defaults: {
                    bodyStyle: 'padding:15px'
                }
                ,layoutConfig: {
                    titleCollapse: true
                    ,animate: true
                    ,activeOnTop: false
                    ,fill: false
                }
                ,items: [
                    {
                        xtype: 'x-sample-form'
                    }
                ]
            }
        ]
    });
    ImportUsers.panel.Home.superclass.constructor.call(this,config);
};


Ext.extend(ImportUsers.panel.Home,MODx.Panel);
Ext.reg('importusers-panel-home',ImportUsers.panel.Home);

30 Posts

michael.graham Reply #8, 14 years, 4 months ago

Based on some debugging, it appears to be failing during the construction of the containing panel:

 ImportUsers.panel.Home.superclass.constructor.call(this,config);