在extjs 3.4中的一个按钮里面的formPanel 3.4

在互联网搜索后我无法理解我的代码中的诀窍在哪里。我想要做的是将一个表单面板放在一个按钮中。这似乎很简单，但基本上不知道我错过了什么。我使用的是ext js 3.4。我在这里找到了这个很酷的代码：http://jsfiddle.net/ErnestoRR/bYMP5/。这基本上是我需要的，但它在ext js 4.0中。在这里，我给你我有什么：在extjs 3.4中的一个按钮里面的formPanel 3.4

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

我希望你的支持，在此先感谢。

来源

2012-07-21 Gery

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

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-24 08:23:23 Gery

在extjs 3.4中的一个按钮里面的formPanel 3.4

回答

相关问题