formPanel inside a button in extjs 3.4

**Gery** · 23 Jul 2012 3:52 AM

Hello,

I'm trying to display/collapse a formPanel after pressing a button located in a tbar as it is in this ext js 4 script: http://jsfiddle.net/ErnestoRR/bYMP5/. This is basically what I need but I need it in ext js 3.4. Here I send you what I have:

Code:

<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>

</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 think I needed to put the ext.form.Panel inside a ext.Panel and then trigger this panel after pressing the ex.action button. However, I understand that the formPanel is actually a panel, so I wouldn't need to create a nex ext.panel (that's why it's commented in the code). I have problems to display this formPanel through the handler, which I think it's the one that creates such open/close effects.

I'm still confused about this, I really hope someone could point me to the right direction. I'd appreciate your support on this, thanks in advance.

**dracofyre** · 23 Jul 2012 8:30 AM

Gery,
This is probably not the exact answer you want, but the ExtJS3.4 examples that come with the product contain a button example that has a panel within a button.

See http://dev.sencha.com/deploy/ext-3.4.0/examples/menu/menus.html

Take a look at the users button. When clicked on it displays a panel with components on it. I would start with dissecting that to get a better understanding of what you need to do.

Dracofyre

**Gery** · 23 Jul 2012 9:08 AM

thanks Dracofyre for the link, I checked this example and tried to replicate it but nothing, I got stuck. From my code, I'm pretty sure the handler is wrong, but no idea how to fix that. The link of the ext 4 code tells me that I need a tbar and a panel (I undertand the dockeditems replaces that), but how to join that in ext js is what confused me. Thanks.

**scottmartin** · 23 Jul 2012 11:10 AM

See if this will help:

Code:

Ext.onReady(function() {

    PanelMain = Ext.extend(Ext.Panel, {
        height: 300,
        width: 500,
        title: 'My Panel',

        initComponent: function() {
            Ext.applyIf(this, {

                tbar: {
                    xtype: 'toolbar',
                    items: [
                    {
                        xtype: 'button',
                        text: 'Impresora',
                        menu: {
                            xtype: 'menu',
                            items: [{
                                xtype: 'container',
                                items: [{
                                    xtype: 'form',
                                    bodyPadding: 5,
                                    items: [{
                                        xtype: 'textfield',
                                        fieldLabel: 'Titulo'
                                    }, {
                                        xtype: 'textfield',
                                        fieldLabel: 'Comentario'
                                    }, {
                                        xtype: 'combo',
                                        fieldLabel: 'Resolucion'

                                    }, {
                                        xtype: 'button',
                                        text: 'boton'
                                    }]
                                }]
                            }]
                        }
                    }]
                }


            });

            PanelMain.superclass.initComponent.call(this);
        }

    });

    Ext.reg( 'panelmain', PanelMain ); // register xtype

    var panel = new PanelMain({
        renderTo: Ext.getBody()
    });

});

Scott.

**Gery** · 23 Jul 2012 12:10 PM

thank you very much Scott, it worked perfectly, even though I don't understand well how it works internally, you really replicated perfectly the code in extjs 4. One extra question, I need to adapt this cool piece of code to the one I posted before, is that possible? if so, how could I use my tbar instead of the tbar in your code? thank you again.

**dracofyre** · 23 Jul 2012 12:14 PM

Code:

       
    var mapPanelTbar = new Ext.Toolbar({            
           height: 30,
            items: [
                    {
                        xtype: 'button',
                        text: 'Impresora',
                        menu: {
                            xtype: 'menu',
                            items: [{
                                xtype: 'container',
                                items: [{
                                    xtype: 'form',
                                    bodyPadding: 5,
                                     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)
                                        }}]}]
                            }]
                        }
                    }]
        });

Try that. Not tested but you should be able to pass the configuration to the toolbar constructor.

**scottmartin** · 23 Jul 2012 12:16 PM

The items under the menu ... 'combo/combobox' are supported xtypes in Ext4, where only 'combo' is supported in Ext3

Scott.

**Gery** · 23 Jul 2012 1:37 PM

very cool Dracofyre and Scott, thanks very much, it worked nicely. Another question, is it possible to adapt this "items" structure to the Ext.Action I have in my first code? I was trying recently but it didnt work as with the Ext.Toolbar in the last code. I was thinking to use only:

Code:

var mapPanelTbar = new Ext.Toolbar({
            height: 30,
            items: [
                new Ext.Button(action)
            ]
        });

and put the "items" or better the Ext.form.FormPanel there, that makes sense?

Thanks for your nice support.

**dracofyre** · 24 Jul 2012 7:52 AM

I normally don't use actions but I think something like this could work. I haven't tested it but you can take the config information and pass it into your action which then you can pass into the button creation of the toolbar. In theory that should work.

Code:

   var actionConfig =  {                        
                        text: 'Impresora',
                        menu: {
                            xtype: 'menu',
                            items: [{
                                xtype: 'container',
                                items: [{
                                    xtype: 'form',
                                    bodyPadding: 5,
                                     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 action = new Ext.Action(actionConfig);

var mapPanelTbar = new Ext.Toolbar({ 
    height: 30,
    items: [
              new Ext.Button(action);
     ]
});

**dracofyre** · 24 Jul 2012 7:57 AM

Here is a working version using Scott's supplied example.

Code:

Ext.onReady(function() {

    var actionConfig = {
                        xtype: 'button',
                        text: 'Impresora',
                        menu: {
                            xtype: 'menu',
                            items: [{
                                xtype: 'container',
                                items: [{
                                    xtype: 'form',
                                    bodyPadding: 5,
                                    items: [{
                                        xtype: 'textfield',
                                        fieldLabel: 'Titulo'
                                    }, {
                                        xtype: 'textfield',
                                        fieldLabel: 'Comentario'
                                    }, {
                                        xtype: 'combo',
                                        fieldLabel: 'Resolucion'

                                    }, {
                                        xtype: 'button',
                                        text: 'boton'
                                    }]
                                }]
                            }]
                        }
                    };
    var action = new Ext.Action(actionConfig);

    
    PanelMain = Ext.extend(Ext.Panel, {
        height: 300,
        width: 500,
        title: 'My Panel',

        initComponent: function() {
            Ext.applyIf(this, {
                tbar: {
                    xtype: 'toolbar',
                    items: [                   
                      new Ext.Button(action)
                     ]
                }


            });

            PanelMain.superclass.initComponent.call(this);
        }

    });

    Ext.reg( 'panelmain', PanelMain ); // register xtype

    var panel = new PanelMain({
        renderTo: Ext.getBody()
    });

});

formPanel inside a button in extjs 3.4

Thread Tools

Search Thread

Display

formPanel inside a button in extjs 3.4

formPanel inside a button in extjs 3.4

Tags for this Thread