Получение макета 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 свойство, он всегда делает в теле документа, поэтому он не подчиняется:

renderTo: Ext.Element.get('#forms') 

Вам нужно будет пересмотреть макет, возможно, путем вложения вашего #forms div внутри видового экрана в его свойство «html», а затем добавление контейнера внутри div с подходящим макетом, а затем компоненты формы в контейнере.