ExtJs 4.1 - Issue with focusCls

**netemp** · 6 Jun 2012 5:13 AM

Following code has been created using the examples:

Code:

    
    <html>
        <head>
            <title>Test Page</title>
             <link rel="stylesheet" type="text/css" href="ext-4.0.7/resources/css/ext-all.css">
             <style type='text/css'>
                .focusClass{
                    background:#B2F0B2 !important
                }
             </style>
             <script type="text/javascript" src="ext-4.0.7/ext-all-debug.js"></script>
             <script type='text/javascript'>
                Ext.onReady(function () {
                    var simple = Ext.create('Ext.form.Panel', {
                        url:'save-form.php',
                        frame:true,
                        title: 'Simple Form',
                        width: 350,
                        fieldDefaults: {
                            msgTarget: 'side',
                            labelWidth: 75
                        },
                        defaultType: 'textfield',
                        defaults: {
                            anchor: '100%'
                        },
                        items: [{
                            fieldLabel: 'First Name',
                            name: 'first',
                            allowBlank:false,
                            focusCls:'focusClass'//Associating the focusClass with focusCls
                        }, {
                            xtype: 'timefield',
                            fieldLabel: 'Time',
                            name: 'time',
                            minValue: '8:00am',
                            maxValue: '6:00pm',
                            focusCls:'focusClass'
                        }],
                        buttons: [{
                            text: 'Save'
                        },{
                            text: 'Cancel'
                        }]
                    });
                    simple.render(document.body);
                });
             </script>
        </head>
        <body>
        </body>
    </html>

This code works fine with ExtJs version 4.0.7 and whenever a field is focussed then its color changes to #B2F0B2 as mentioned in the focusClass.

But the same code does not have any effect in version 4.1.0.

Do I need to change something to make it work in 4.1 version or is this a bug? Attached are the screenshots for greater clarity.

Thanks for any help in advance.

ver4.0.7.jpg ver4.1.0.jpg

**netemp** · 6 Jun 2012 10:56 PM

Is no one else facing this issue?

**scottmartin** · 8 Jun 2012 1:33 PM

Please try the following:

Code:

.x-field-focusClass {
    background:#B2F0B2 !important
}

Code:

Ext.onReady(function() {
    var simple = Ext.create('Ext.form.Panel', {
        url: 'save-form.php',
        frame: true,
        title: 'Simple Form',
        width: 350,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 75
        },
        defaultType: 'textfield',
        defaults: {
            anchor: '100%'
        },
        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false,
            focusCls: 'focusClass' //Associating the focusClass with focusCls
        }, {
            xtype: 'timefield',
            fieldLabel: 'Time',
            name: 'time',
            minValue: '8:00am',
            maxValue: '6:00pm',
            focusCls: 'focusClass'
        }],
        buttons: [{
            text: 'Save'
        }, {
            text: 'Cancel'
        }]
    });
    simple.render(document.body);
});

Regards,
Scott.

**netemp** · 12 Jun 2012 7:28 AM

Thanks for the reply Scott.

But as per my understanding of the method suggested by you, by the use of "x-field-focusClass" are we not actually overriding the class in ext-all.css instead of using focusCls attribute?

And does this not make it a bug in this 4.1 version related to focusCls attribute?

**Bill M** · 8 Jan 2013 2:26 PM

Hi,

I saw the solution Scott posted to enable a focusCls and it does work on text fields and labels. However, it does not appear to work completely on textareafields. I tried focusCls: 'focusClass' on my textareafield, and while it does pickup my modified background color, it does not pickup the border width.Is there another solution for how to handle textareafields? Or am I doing something wrong?

Here is what I have in my .css file:
.x-field-focusClass {
background: #FAFAD2 !important; <-- textarea widget picks this up
border: 2px solid blue; <-- textarea widget ignores this. Why??
}

Thanks!

Thanks!

**scottmartin** · 8 Jan 2013 2:53 PM

Use the following:

Code:

.x-field-focusClass {
    background: #B2F0B2 !important;
    border: 2px solid blue !important;
}

Scott.

**Bill M** · 8 Jan 2013 3:15 PM

Hi Scott,

That worked! Thanks!

Could I throw another focus type question at you? Say I have a textfield, and I am really only using it for display purposes. The field has been set to ReadOnly. However, this does not seem to stop the textfield from accepting focus via a mouse click into it. Is there a way to disable the textfield from being able to receive focus?

Thanks!

**scottmartin** · 8 Jan 2013 3:43 PM

You could set the field to disabled: true .. then change the css to look as if it were RO.
Or just use a displayfield

Scott.

**Bill M** · 31 Jan 2013 10:04 AM

Hi Scott,

I was wondering if you could help me out with a similar problem I am having with a Editable Grid Cell. In this Cell I would also like the border to thicken, and be able to effect the background color of the Cell when it has focus (just like with the textfield solution you gave me).

I had posted this on this forum, but I am not getting much help. MitchellSimoens tried to assist, but his answer didn't work. I haven't heard back from him.

Here is a link to that post with all the fun details

http://www.sencha.com/forum/showthre...569#post934569

Thanks again!
Bill

ExtJs 4.1 - Issue with focusCls

Thread Tools

Search Thread

Display

Unanswered: ExtJs 4.1 - Issue with focusCls

Unanswered: ExtJs 4.1 - Issue with focusCls

Problem with focusCls on textareafield

Problem with focusCls on textareafield

Re: problem with focusCls on textareafield

Re: problem with focusCls on textareafield

Re: Issue with focusCls

Re: Issue with focusCls

Tags for this Thread