получить макет extjs и HTML-див

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')

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