1. #1
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    231
    Answers
    3
    Vote Rating
    6
    bseddon is on a distinguished road

      0  

    Default Answered: Split DOM: what triggers ExtJS to generate buttons in a <table> vs <div>

    Answered: Split DOM: what triggers ExtJS to generate buttons in a <table> vs <div>


    I'm working with an alternative theme and have encountered a problem when it used in IE 7. When the ExtJS default theme is used in in FF, Chrome, IE 9/10 it generates <button> in a <div>. However when used in IE 7 it generates <buttons> within a <table>. This is important.

    However when my theme is used in IE 7 ExtJS generates <button> within a <div> not <button> within a <table>. The consequence is that any button with just an icon (without any text) is rendered at 100% of the available width of the container (for example, a toolbar).

    In this post, Ed Spencer confirms there are two layout generated by ExtJS.
    http://www.sencha.com/forum/showthre...ne-Theme/page2

    What trigger does ExtJS use to generate a table or not. It can't be the browser because the rendering is different in the same browser. The only difference being the theme used.

    Below are three screenshots to show the difference. Each shows the same toolbar and buttons from an ExtJS app. The first uses my theme rendered in FF (as it should be rendered). Here, ExtJS generates <div> and <button> elements. The second shows the same content rendered using the default ExtJS theme in IE 7. It looks OK because ExtJS generates <table> and <button>. The third shows the same content rendered using my theme in IE 7. As you can see it fails miserably because the buttons are rendered to the left. This occurs because something about the theme causes ExtJS to render using <div> elements not <table> elements. Why?

    FF + my theme = OK
    Button-problem-FF.png

    IE 7 + ExtJS default theme = OK
    Button-problem-IE-blue.png

    IE 7 + my theme = NOT OK (buttons squashed to the left)
    Button-problem-IE-theme.png

  2. Sorry, I misread.

    Have a look at Ext.util.Renderable::calculateFrame.

    The css comes from frame.scss, around line 120.

  3. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,104
    Answers
    343
    Vote Rating
    501
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It renders that way because oldIE doesn't support border-radius. To get rounded corners in modern browsers is pretty trivial, in older browsers you have to render the old ugly wrapping table and generate images for the corners.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #3
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    231
    Answers
    3
    Vote Rating
    6
    bseddon is on a distinguished road

      0  

    Default


    Hi Evan

    I know why ExtJS uses two different rendering schemes. What I meant to ask is what triggers ExtJS to render buttons using tables vs divs. It cannot be as simple as the browser being used. When using IE 7 and the ExtJS default theme, ExtJS renders using tables. When I use my theme (same app, same IE 7) ExtJS renders using divs. You can see this in the images in the original post.

    What am I missing from my theme that make ExtJS think it is OK to generate using divs? What should I being looking to add so that ExtJS will render using a table?

    Regards

    Bill Seddon

  5. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,104
    Answers
    343
    Vote Rating
    501
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Sorry, I misread.

    Have a look at Ext.util.Renderable::calculateFrame.

    The css comes from frame.scss, around line 120.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #5
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    231
    Answers
    3
    Vote Rating
    6
    bseddon is on a distinguished road

      0  

    Default


    Thanks. I think that makes sense. It seems I need to find out why my theme is not generating the information needed to have the rendering mechanism use the 'frameTableTpl' template.

    Bill

Thread Participants: 1

Tags for this Thread

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