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

您需要重新考虑布局，可能是将#forms div嵌入视口中的'html'属性中，然后在div中添加一个容器布局，然后在容器中添加表单组件。

得到一个extjs布局和html div

1 个答案: