得到一个extjs布局和html div

Question

我想要获得一个由extjs设计器生成的表单到我制作的html布局中，并且它不断渲染到整个布局中。我试图把它变成一个div，所以我可以把它放在外面。这里是JS代码：

Ext.define('MyApp.view.MyViewport', { 
    extend: 'MyApp.view.ui.MyViewport', 

    initComponent: function() { 
     var me = this; 
     me.callParent(arguments); 
    } 
}); 

Ext.define('MyApp.view.ui.MyViewport', { 
    extend: 'Ext.container.Viewport', 


    initComponent: function() { 
     var me = this; 
     me.items = [{ 
      xtype: 'form', 
      height: 250, 
      width: 400, 
      layout: { 
       type: 'absolute' 
      }, 
      bodyPadding: 10, 
      title: 'My Form', 
      items: [{ 
       xtype: 'fieldset', 
       height: 190, 
       width: 350, 
       layout: { 
        type: 'absolute' 
       }, 
       title: 'My Fields', 
       items: [{ 
        xtype: 'datefield', 
        width: 320, 
        fieldLabel: 'Intimation Date', 
        x: 0, 
        y: 20 
       }, { 
        xtype: 'datefield', 
        width: 320, 
        fieldLabel: 'Date of Loss', 
        x: 0, 
        y: 60 
       }, { 
        xtype: 'textfield', 
        width: 320, 
        fieldLabel: 'Estimated Loss', 
        x: 0, 
        y: 100 
       }, { 
        xtype: 'combobox', 
        autoShow: true, 
        width: 320, 
        name: 'name', 
        fieldLabel: 'Client Insured', 
        hideTrigger: true, 
        displayField: 'name', 
        forceSelection: true, 
        minChars: 1, 
        store: 'MyJsonStore', 
        typeAhead: true, 
        valueField: 'name', 
        x: 0, 
        y: 140 
       }] 
      }] 
     }]; 
     me.callParent(arguments); 
    } 
}); 


Ext.Loader.setConfig({ 
    enabled: true 
}); 

Ext.application({ 
    name: 'MyApp', 

    stores: [ 
     'MyJsonStore'], 

    launch: function() { 
     Ext.QuickTips.init(); 

     var cmp1 = Ext.create('MyApp.view.MyViewport', { 
      renderTo: Ext.Element.get('#forms') 
     }); 
     cmp1.show(); 
    } 
}); 

Answer 1

视口不使用它的renderTo财产，它总是呈现到文档的身体，这就是为什么它不服从：

​​

您将需要重新思考可能是通过将#forms div嵌套在视图中的'html'属性中，然后使用适合的布局在div内添加一个容器，然后在容器中添加表单组件。