CODEWITHSUNDEEP
domextjsextjs4extjs4.2
talha06
talha06

Reputation: 6466

ExtJS - How to highlight form itself

I want to highlight ExtJS Form Panel itself after a specific event. I have been trying the code added below but it just highlights the container panel which is hardly seen.

Code Snippet

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

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

Upvotes: 0

Views: 691

Answers (2)

Adekunle Owolabi
Adekunle Owolabi

Reputation: 21

....or even Better just get the form's Targeted EL. App.myFormPanel.getTargetEl().highlight();

You won't have to manually iterate through each elements within the form.

Upvotes: 0

Tyr
Tyr

Reputation: 2810

Your code is working correct. You are selecting the container element by using getEl() method on your formpanel. The textarea is covering your panel, so you see the easing effect at the bottom. If you want to highlight your fields, you have to iterate through the form fields by using the each method:

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
                        });
                    });
                }
            }]
        });
    }
});

In this working example, you are changing the background color. The standard css class contains a background image for input fields, so you have to remove it temporarily during the effect. This can be made with a custom css class to override the background-image property.

Hope it helps

Upvotes: 1

Related Questions