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内のコンテナをフィットレイアウトでコンテナに追加してコンテナ内のフォームコンポーネントに追加します。