0

在互联网上搜索后，我不明白我的代码中的窍门在哪里。我想要做的是将表单面板放在按钮内。看起来很简单，但基本上不知道我错过了什么。我使用 ext js 3.4。我在这里找到了这个很酷的代码：http: //jsfiddle.net/ErnestoRR/bYMP5/。这基本上是我需要的，但它在 ext js 4.0 中。在这里，我向您发送我所拥有的：

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

感谢您的支持，在此先感谢您。

4

1 回答 1

0

因为没有人回答我，我回答自己=）这里是解决方案：

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

});
于 2012-07-24T08:23:23.447 回答