1. #1
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,113
    Vote Rating
    4
    jratcliff is on a distinguished road

      0  

    Default Ext equivalent to YAHOO.widget.Panel

    Is there an equivalent Ext widget that looks similar to the YAHOO.widget.Panel? What I'm wanting to do is have several 'panels' on a page that I can set their header, body, and footer. They would not function like dialogs but instead always stay visible and would be used to group like content.

    Here's a link to show you what I'm referring to.
    http://developer.yahoo.com/yui/examp...r/panel/1.html


    Thanks!
    Jack

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    18
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default

    Looks like a dialog with some stuff turned off to me. What is the difference if I might ask?

    If you need something even more stripped down, check out a Ext.Layer. It has a lot of nifty features and supports most Element functionality. It does not provide a header/body/footer though. Those would be pretty easy to add:

    var layer = new Ext.Layer({some config options});
    layer.hd = layer.createChild({cls:'hd'}); // tag defaults to 'div'
    layer.bd = layer.createChild({cls:'bd'});
    layer.ft = layer.createChild({cls:'ft'});

    You could easily create another class to automate this as well.

    You might peak at the source for QuickTips which creates a dialog-like Layer.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,555
    Vote Rating
    55
    Animal will become famous soon enough

      0  

    Default

    or

    Code:
        var layer = new Ext.Layer({dh:{cls:"x-layer", children:[{cls:"hd"},{cls:"bd"},{cls:"ft"}]}});


    Jack, do you think it would be a good idea to enable:

    Code:
        var layer = new Ext.Layer({children:[{cls:"hd"},{cls:"bd"},{cls:"ft"}]});
    By adding to the the Layer constructor:

    Code:
        Ext.each(config.children, this.createChild, this);

  4. #4
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,113
    Vote Rating
    4
    jratcliff is on a distinguished road

      0  

    Default thanks!

    Thanks for the suggestions. You are right in that it is basically a stripped down version of a dialog. We were using the panel as a way to 'group' fields and data together on the screen and in our use of it, we had the panels always displayed.

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    18
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default

    Animal,

    Your code is much cleaner than mine.

    On the syntax suggestion, it makes the code slightly shorter, but isn't as efficient. That code makes 4 separate injections, whereas the your original makes only 1.
    Jack Slocum
    Sencha Co-Founder, Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    64
    Vote Rating
    0
    kitepad is on a distinguished road

      0  

    Default

    How to add draggable and movable to Ext.Layer?

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,555
    Vote Rating
    55
    Animal will become famous soon enough

      0  

    Default

    Use a BasicDialog