2011-10-04 73 views
0

我想要獲得一個由extjs設計器生成的表單到我製作的html佈局中,並且它不斷渲染到整個佈局中。我試圖把它變成一個div,所以我可以把它放在外面。這裏是JS代碼:得到一個extjs佈局和html 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(); 
    } 
}); 

回答

1

視口不使用它的renderTo財產,它總是呈現到文檔的身體,這就是爲什麼它不服從:

​​

您將需要重新思考可能是通過將#forms div嵌套在視圖中的'html'屬性中,然後使用適合的佈局在div內添加一個容器,然後在容器中添加表單組件。