1. #1
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default tdgi.ux.tdgi_border - Extension to allow collapsed layout titles

    tdgi.ux.tdgi_border - Extension to allow collapsed layout titles


    In response to this thread, I initially created a simple override (click here to see it action) to the Ext Border Layout. The solution was a quick one hour deal with not magic or gloss. There was some posts soon there after that requested more functionality for this override. (TDGi Blog Entry)

    These requests include:
    • images for the east/west regions (for CBC)
    • ability to re-use the original title
    • the freedom to insert what ever element object or HTML fragment the end developer desired
    • change from override to extension.
    So, I've rolled up all of these requests into one Ext.ux.TDGi.BorderLayout class. This solution provides all of the freedom flexibility that was requested.
    Click here to view a working example of this extension.

    Click here to download the zip file of the full source and example. Click here to download the zip file of the full source and example.

    Simple Example:

    PHP Code:
    {
        
    region:'west',
        
    title:'West',
        
    /* tdgi_border layout collapsed title config option start */
        
    collapsedTitle: {
            
    //Just like an Ext.DomHelper config object
            
    element : {
                
    // Required0
                
    tag  'img',
                
    // Required
                
    src  'wSideLabel.jpg',
                
    // Set this if you need to.
                
    style  'border: 1px solid #FF0000;'
            
    }
        },
        
    /* tdgi_border layout collapsed title config option end */    
        
    split:true,
        
    width200,
        
    minSize175,
        
    maxSize400,
        
    collapsibletrue,
        
    margins:'0 0 0 5',
        
    html 'some Junk here'

    Screenshots:

    (Internet Explorer 6 and 7)


    (FF2.x/Safari on OS X)

  2. #2
    Ext User jerrybrown5's Avatar
    Join Date
    Sep 2007
    Location
    Port St Lucie, FL
    Posts
    185
    Vote Rating
    0
    jerrybrown5 is on a distinguished road

      0  

    Default


    Collapsed compass regions are not that helpful if the end user does not instinctively know what they are. This attention to detail goes a long way. Kudos, and thanks for saving me some coding time.

    Best regards,
    Jerry Brown

  3. #3
    Ext User
    Join Date
    Mar 2008
    Posts
    60
    Vote Rating
    1
    joku is on a distinguished road

      0  

    Default


    Very nice. I like those red boxes with arrows that you drew in the picture. Maybe you can make popups like that

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Truth be told, i'm looking at canvas tags, but IE seems to be the biggest hurdle.

  5. #5

  6. #6
    Ext User
    Join Date
    Apr 2008
    Posts
    3
    Vote Rating
    0
    InuyashaXTC is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    Truth be told, i'm looking at canvas tags, but IE seems to be the biggest hurdle.
    Have you tried looking at ExplorerCanvas?

  7. #7
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    64
    Vote Rating
    0
    MeDavid is on a distinguished road

      0  

    Default


    Nice extension! How about making it with the panel icons, just like eclipse does?

  8. #8
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by InuyashaXTC View Post
    Have you tried looking at ExplorerCanvas?
    thanks dude. i'm going to look into this

  9. #9
    Ext User
    Join Date
    May 2007
    Posts
    77
    Vote Rating
    0
    antimatter15 is on a distinguished road

      0  

    Default


    You can use SVG/VML for text, they both have full DOM, so it'll be an easier transition, and text-selection might be possible. (SVG is supported by most browsers including Opera, Safari, and Firefox, while VML is supported by IE)

  10. #10
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    From my understanding, SVG requires an adobe client for IE6, which is still a huge chunk of the corporate industry standard.