Question

我们在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的图片

Answer 1

好像每次打开portlet时，都会再次触发Ext.onReady。

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

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

在liferay中，最小化和恢复portlet会将表单面板呈现两次

1 个答案: