1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default Unanswered: ExtJs 4.1 - Issue with focusCls

    Unanswered: ExtJs 4.1 - Issue with focusCls


    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.jpgver4.1.0.jpg

  2. #2
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    Is no one else facing this issue?

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,872
    Answers
    653
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      1  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Feb 2011
    Posts
    174
    Answers
    10
    Vote Rating
    1
    netemp is on a distinguished road

      0  

    Default


    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?

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    25
    Vote Rating
    0
    Bill M is on a distinguished road

      0  

    Default Problem with focusCls on textareafield

    Problem with focusCls on textareafield


    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!
    Last edited by Bill M; 8 Jan 2013 at 2:38 PM. Reason: Clarification

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,872
    Answers
    653
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Use the following:

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

  7. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    25
    Vote Rating
    0
    Bill M is on a distinguished road

      0  

    Default Re: problem with focusCls on textareafield

    Re: problem with focusCls on textareafield


    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!

  8. #8
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,872
    Answers
    653
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  9. #9
    Sencha User
    Join Date
    Oct 2012
    Posts
    25
    Vote Rating
    0
    Bill M is on a distinguished road

      0  

    Default Re: Issue with focusCls

    Re: Issue with focusCls


    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

Thread Participants: 2

Tags for this Thread