ExtJS - 如何突出显示表单本身答案

【问题标题】：ExtJS - How to highlight form itselfExtJS - 如何突出显示表单本身
【发布时间】：2014-12-25 10:30:23
【问题描述】：

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

代码片段

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

煎茶小提琴链接： https://fiddle.sencha.com/#fiddle/fij

【问题讨论】：

标签： dom extjs extjs4 extjs4.2

【解决方案1】：

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

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 属性。

希望对你有帮助

【讨论】：

这正是我想要的；谢谢你的帮助。正如您所提到的，唯一缺席的是覆盖背景以突出显示字段的内容。否则，它只会突出显示表单的其余部分。 p.s.煎茶小提琴已更新。

【解决方案2】：

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

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

【讨论】：