在 liferay 中最小化和恢复 portlet 两次呈现表单面板答案

【问题标题】：in liferay minimize and restore portlet renders the form panel twice在 liferay 中最小化和恢复 portlet 两次呈现表单面板
【发布时间】：2016-09-21 14:41:11
【问题描述】：

我们在 liferay portlet 中创建了一个 Ext.form.panel。这是一个简单的表单，包含电子邮件、密码文本框和保存按钮。当我们最小化和恢复 liferay portlet 时。 Extjs 表单元素被渲染两次。

请有人帮我解决这个问题。

提前致谢。

<div id="configPanel"></div>

    <script type="text/javascript">
 Ext.onReady(function() {

 var addUserForm = Ext.create('Ext.form.Panel', {
        renderTo: "configPanel",
        bodyStyle: 'padding: 5px 5px 0 5px;',
        defaults: {
            xtype: 'textfield',
            anchor: '100%',
         },
        items: [{
         xtype: 'textfield',
        name: 'url',
        alias:'ac-url',
        id:'ac-field-url',
        itemId:'configPortlet_URL',
        fieldLabel: 'URL',
        labelSeparator:'',
        allowBlank: false,
        vtype: 'url',
        emptyText:'[Required e.g. http://google.com]',
            listeners: {
                //specialkey: submitOnEnter
            }
        },{
            xtype: 'textfield',
        name: 'password',
        alias:'ac-password',
        id:'ac-field-password',
        fieldLabel: 'Password',
        labelSeparator:'',
        inputType: 'password',
        allowBlank: false,
        enforceMaxLength: true,
        maxLength: 256,
        emptyText: '[Required]',
                listeners: {
                    //specialkey: submitOnEnter
                }
            }, {
                xtype: 'button',
                text: 'Random',
                tooltip: 'Generate a random password',
                style: 'margin-left: 4px;',
                flex: 0,
                handler: function() {
                    //this.prev().setValue(password(8, false));
                    //this.prev().focus()
                }
            }],
        buttons: [{
            id: 'saveBtn',
            itemId: 'saveBtn',
            text: 'Submit',
            handler: function() {
                this.up('form').getForm().submit();
            }
        },{
            text: 'Cancel',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }],
        submit: function() {
            var currentForm = this.owner.form;

            if (currentForm.isValid()) {
                // var newSomething = Ext.create('Something', currentForm.getFieldValues());
            }
        }
    });
    addUserForm.show();
 });
 </script>

下面是liferay portlet的图片

【问题讨论】：

标签： javascript extjs liferay

【解决方案1】：

似乎每次打开 portlet 时，Ext.onReady 都会再次被触发。

我想最简单的解决方案是在重新创建表单之前检查表单是否存在：

Ext.onReady(function() {
    if(!Ext.getCmp('ac-field-url')) {
        Ext.create('Ext.form.Panel', {
            renderTo: "configPanel",
            ...
            id:'ac-field-url',
            ...
    }
});

【讨论】：