Question

我想在特定事件后突出显示 ExtJS表单面板。我一直在尝试下面添加的代码，但它只是突出了几乎看不到的容器面板。

代码段

myForm.getEl().highlight("ffff9c", {
    attr: "backgroundColor",
    endColor: "ffc333",
    easing: 'easeIn',
    duration: 1000
});

Sencha Fiddle Link： https://fiddle.sencha.com/#fiddle/fij

Answer 1

您的代码工作正常。您正在使用formpanel上的getEl（）方法选择容器元素。 textarea覆盖了您的面板，因此您可以在底部看到缓和效果。如果要突出显示字段，则必须使用每种方法遍历表单字段：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.form.Panel', {
            title: 'My Form',
            id: 'myform',
            renderTo: Ext.getBody(),
            width: 500,
            height: 250,

            items: [{
                xtype: 'textarea',
                width: '100%',
                hideLabel: true,
                value: 'Some text'
            },
            {
                xtype: 'textfield',
                width: '100%',
                hideLabel: true,
                value: 'Some other text'

            }],
            buttons: [{
                text: 'Highlight',
                handler: function() {
                    Ext.getCmp('myform').getForm().getFields().each(function(field) {
                            field.inputEl.highlight("ffff9c", {
                            attr: "backgroundColor",
                            endColor: "ffc333",
                            easing: 'easeIn',
                            duration: 1000
                        });
                    });
                }
            }]
        });
    }
});

在此工作示例中，您将更改背景颜色。标准css类包含输入字段的背景图像，因此您必须在效果期间临时删除它。这可以使用自定义css类来覆盖background-image属性。

希望有所帮助

Answer 2

....或者甚至更好地获取表单的目标 EL。 App.myFormPanel.getTargetEl().highlight();

您不必手动遍历表单中的每个元素。

ExtJS - 如何突出表单本身

2 个答案: