Блог

Я пытаюсь получить форму, сгенерированную extjs designer, в созданный мной 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();
    }
});
  

Окно просмотра не использует его свойство renderTo, оно всегда отображается в теле документа, поэтому оно не подчиняется:

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

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