1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    108
    Vote Rating
    0
    PierceSD is on a distinguished road

      0  

    Default [2.3.0] Checkbox/Radio label in IE8 strict mode

    [2.3.0] Checkbox/Radio label in IE8 strict mode


    We recently added a doctype to our pages to encourage IE8 to use standards mode, and noticed it affected positioning of the checkbox labels, especially in a CheckboxGroup (see attachment: checkboxgroup-strict.jpg). Taking off the doctype fixed the issue (see attachment: checkboxgroup-quirks.jpg). It appears to have something to do with the resizeEl.

    Here is the test case:
    HTML Code:
    <!DOCTYPE HTML>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="/ExtJS/2.3.0/resources/css/ext-all.css"></link>
            <script type="text/javascript" src="/ExtJS/2.3.0/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="/ExtJS/2.3.0/ext-all-debug.js"></script>
            <script type="text/javascript">
                Ext.BLANK_IMAGE_URL = "/ExtJS/2.3.0/resources/images/default/s.gif";
                Ext.onReady( function() {
                    var w = new Ext.Window({
                        title: "Test Combo",
                        layout: "anchor",
                        bodyStyle: "padding: 5px;",
                        resizable: true,
                        width: 450,
                        height: 200,
                        items: [{
                            xtype: "checkboxgroup",
                            hideLabel: true,
                            name: "description_tables",
                            anchor: "0",
                            columns: 5,
                            defaults: {getResizeEl: function(){ return this.wrap; } },
                            items: [{
                                boxLabel: "Requests",
                                inputValue: "request"
                            }, {
                                boxLabel: "Journals",
                                inputValue: "journal"
                            }, {
                                boxLabel: "Solutions",
                                inputValue: "solution"
                            }, {
                                boxLabel: "Calls",
                                inputValue: "call"
                            }, {
                                boxLabel: "Assignments",
                                inputValue: "assignment"
                            }]
                        }]
                    });
                    w.show();
                });
            </script>
        </head>
        <body></body>
    </html>
    I tried it with 3.0 and didn't see any problem, so I used the 3.0 getResizeEl() method in an override with the 2.3.0 libraries, and that fixed the problem:

    Code:
    Ext.override(Ext.form.Checkbox, {
        getResizeEl: function() {
        	return this.wrap;
        }
    });
    I guess since it's fixed in 3.0, this is more of a FYI to the community.
    Attached Images
    --Chad Eberle
    Web Application Architect
    Pierce County Software Development
    Pierce County, Washington

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar