将 extjs 布局放入 html div 中

Question

我试图将 extjs 设计器生成的表单放入我制作的 html 布局中，它不断渲染到正文中并弄乱整个布局。我正在尝试将其放入 aa 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 内添加一个具有合适布局的容器，然后在容器中添加表单组件。