formPanel inside a button in extjs 3.4
===

after searching in internet I couldn't understand where is the trick in my code. What I'm trying to do is to put a form panel inside a button. It seems very simple but basically don't know what I'm missing. I work with ext js 3.4. I found this cool code here: http://jsfiddle.net/ErnestoRR/bYMP5/. This is basically what I need but it's in ext js 4.0. Here I send you what I have:

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"></link>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-gray.css"></link>
    <link rel="stylesheet" type="text/css" href="ext/examples/shared/examples.css"></link>
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
    <script type="text/javascript" src="geoext/lib/GeoExt.js"></script>
    
    </head>
    <body>
    <script type="text/javascript">
    
    Ext.onReady(function() {
    
    // Print
            var formPanel = new Ext.form.FormPanel(
            {
                    id: "myformpanel",
    //                collapsed: true,
                    width: 200,
                    bodyStyle: "padding:5px",
                    labelAlign: "top",
                    defaults:
                    {
                            anchor: "100%"
                    },
                    items:
                    [
                    {
                            xtype: "textarea",
                            name: "comment",
                            value: "",
                            fieldLabel: "Comment"
                    },
                    {
                            xtype: "combo",
                            displayField: "name",
                            fieldLabel: "Layout",
                            typeAhead: true,
                            mode: "local",
                            triggerAction: "all"
                    },
                    {
                            xtype: "combo",
                            displayField: "name",
                            fieldLabel: "Resolution",
                            tpl: '<tpl for="."><div class="x-combo-list-item">{name} dpi</div></tpl>',
                            typeAhead: true,
                            mode: "local",
                            triggerAction: "all",
    
                            // the plugin will work even if we modify a combo value
                            setValue: function(v)
                            {
                                    v = parseInt(v) + " dpi";
                                    Ext.form.ComboBox.prototype.setValue.apply(this, arguments);
                            }
                    },
                    {
                            xtype: "combo",
                            displayField: "name",
                            fieldLabel: "Scale",
                            typeAhead: true,
                            mode: "local",
                            triggerAction: "all",
                    },
                    {
                            xtype: "textfield",
                            name: "rotation",
                            fieldLabel: "Rotation"
                    }
                    ],
                    buttons:
                    [
                    {
                            text: "Create PDF",
                            handler: function()
                            {
                                    // convenient way to fit the print page to the visible map area
                                    printPage.fit(true)
                            }
                    }
                    ]
            }
            );
    
    /*
            var displayPanel = new Ext.Panel({
                    id: "myformpanel",
                    width    : 300,
                    height   : 500,
                    layout: 'fit',
                    items    : [formPanel]
      });
    */
    
            var action = new Ext.Action({
                text: 'toggle print panel',
                handler: function(){
                    var winPanel = Ext.getCmp("myformpanel");
                    if(!winPanel)
                    function showWindow()
                    { 
                            winPanel.show(); 
                    }
    
                    function hideWindow()
                    { 
                            Ext.getCmp("myformpanel").hide(); 
                    }
                    }
            });
    
            var mapPanelTbar = new Ext.Toolbar({
                height: 30,
                items: [
                    new Ext.Button(action)
                ]
            });
    
            var mapPanel = {
                    region: 'center',
                    html: 'map panel content',
                    tbar: mapPanelTbar
                };
    
            var viewport = new Ext.Viewport({
                layout: 'border', // main viewport 
                items: [
                    mapPanel // center part of the main region
                ]
            });
    
    });
    </script> 
    
    </body>
    </html>

I'd appreciate your support, thanks in advance.
