ExtJS -如何突出显示窗体本身

cbeh67ev 于 2022-11-04 发布在其他

关注(0)|答案(2)|浏览(155)

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

程式码片段

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

**Sencha 小提琴链接：**https：fiddle.sencha.com/#fiddle/fij

extjs

来源：https://stackoverflow.com/questions/27646390/extjs-how-to-highlight-form-itself

2条答案

按热度按时间

20jt8wwn1#

您的程式码运作正常。您正在表单面板上使用getEl（）方法来选取容器元素。文字区域会覆盖面板，所以您会在底部看到缓动效果。如果您想要反白显示字段，您必须使用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属性。
希望能有所帮助

赞(0）回复(0）举报 2022-11-04

mf98qq942#

....或者更好的方法是获取窗体的目标EL。
您不必手动迭代表单中的每个元素。

赞(0）回复(0）举报 2022-11-04