extjs 레이아웃 가져 오기 및 html div

Question

내가 만든 html 레이아웃으로 extjs 디자이너에 의해 생성 된 양식을 얻으려고하고 있으며 그것은 본문으로 렌더링을 유지하고 전체 레이아웃을 엉망으로 만듭니다. 나는 그것을 이것을 놓을 수 있도록 div에 넣으려고합니다.

이

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 재산, 그것은 항상 순종하지 왜 인 문서 본문에 렌더링있어 사용하지 않습니다 : 다음은 JS 코드는

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

당신은 다시 생각해야합니다 레이아웃은 # html 속성에있는 뷰포트 내부에 #forms div를 중첩 한 다음 해당 레이아웃을 사용하여 div 내부의 컨테이너를 추가 한 다음 컨테이너의 양식 구성 요소를 추가하여 배치합니다.