1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    40
    Vote Rating
    0
    Gery is on a distinguished road

      0  

    Default formPanel inside a button in extjs 3.4

    formPanel inside a button in extjs 3.4


    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.

  2. #2
    Sencha Premium Member
    Join Date
    Jul 2010
    Posts
    18
    Vote Rating
    0
    dracofyre is on a distinguished road

      0  

    Default


    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

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

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    40
    Vote Rating
    0
    Gery is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,081
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    40
    Vote Rating
    0
    Gery is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2010
    Posts
    18
    Vote Rating
    0
    dracofyre is on a distinguished road

      0  

    Default


    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.
    Last edited by dracofyre; 23 Jul 2012 at 12:24 PM. Reason: editting, fixed

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,081
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  8. #8
    Sencha User
    Join Date
    Jun 2012
    Posts
    40
    Vote Rating
    0
    Gery is on a distinguished road

      0  

    Default


    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.

  9. #9
    Sencha Premium Member
    Join Date
    Jul 2010
    Posts
    18
    Vote Rating
    0
    dracofyre is on a distinguished road

      0  

    Default


    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);
         ]
    });

  10. #10
    Sencha Premium Member
    Join Date
    Jul 2010
    Posts
    18
    Vote Rating
    0
    dracofyre is on a distinguished road

      0  

    Default


    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()
        });
    
    });