1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    49
    Answers
    2
    Vote Rating
    0
    chaddjohnson is on a distinguished road

      0  

    Default Unanswered: Docking layout?

    Unanswered: Docking layout?


    Does any sort of dockable layout functionality exist in ExtJS? Something like described here. Even something third-party or in plugin form is fine.

    DockPreview_1.png

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    750
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You mean the ability when you drag to use arrow buttons?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    49
    Answers
    2
    Vote Rating
    0
    chaddjohnson is on a distinguished road

      0  

    Default


    I mean the ability to dock windows in a user-defined configuration, as shown in the screenshot, as in Visual Studio, and Eclipse.

    The arrows are helpful but just one way of dealing with this this. Eclipse uses a different method. The method doesn't matter.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,770
    Answers
    355
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I would call this not pretty at all and not efficient and not reusable, but maybe a start?
    Lets you drag a toolbar from side to side to side and re-dock it (with its owning container only).

    http://jsfiddle.net/slemmon/4WxEs/1/

    Code:
    Ext.widget('panel', {
        renderTo: Ext.getBody()
        , title: 'User defined docking'
        , height: 350
        , width: 350
        , dockedItems: [{
            xtype: 'toolbar'
            , dock: 'top'
            , items: [{
                text: 'test button'
            }]
            , listeners: {
                afterrender: function (tb) {
                    var proxy
                        , tbOwner = tb.ownerCt;
    
    
                    function getProxy() {
                        if (!proxy) {
                            proxy = tb.ownerCt.el.createChild({
                                tag: 'div'
                                , html: '<div style="width:50px;height:50px;background-color:rgba(15,15,15,.5);"></div>'
                                //, html: 'some drag text'
                            });
                        }
                        return proxy;
                    }
    
    
                    tb.tracker = new Ext.create('Ext.dd.DragTracker', {
                        el: tb.el
                        , dir: false
                        , tolerance: 10
                        , onStart: function () {
                            var p = getProxy();
                            p.show();
                        }
                        , onDrag : function () {
                            var threshold = 90;
                            var x = this.getXY()[0];
                            var y = this.getXY()[1];
                            var LEFT = x - tbOwner.el.getLeft();
                            var TOP = y - tbOwner.el.getTop() - tbOwner.header.el.getHeight();
                            var RIGHT = tbOwner.el.getWidth() - x + tbOwner.el.getLeft();
                            var BOTTOM = tbOwner.el.getHeight() - y + tbOwner.el.getTop();
    
    
                            tbOwner.removeDocked(tb, false);
    
    
                            //
                            this.dir = false;
    
    
                                if (TOP < threshold) { this.dir = 'top'; }
                                if (RIGHT < threshold) { this.dir = 'right'; }
                                if (LEFT < threshold) { this.dir = 'left'; }
                                if (BOTTOM < threshold) { this.dir = 'bottom'; }
    
    
                                if (this.dir !== false) {
                                    var indicators = tbOwner.query('[myCtType="indicator"]');
                                    Ext.each(indicators, function (ind) {
                                        if (ind.dock != this.dir) { tbOwner.removeDocked(ind, true); }
                                    });
                                    var exists = tbOwner.down('#temp-ind-' + this.dir);
    
    
                                    if (!exists) {
                                        tbOwner.addDocked({
                                            xtype: 'container'
                                            , myCtType: 'indicator'
                                            , itemId: 'temp-ind-' + this.dir
                                            , dock: this.dir
                                            , height: (this.dir == 'top' || this.dir == 'bottom') ? 40 : undefined
                                            , width: (this.dir == 'top' || this.dir == 'bottom') ? undefined : 40
                                            , style: {
                                                background: 'yellow'
                                                , border: '1px solid red'
                                            }
                                        });
                                    }
                                }
    
    
                            Ext.apply(this.dragRegion, {
                                top: this.getXY()[1] - 25
                                , left: this.getXY()[0] - 25
                                //, right: 300
                                //, bottom: -50
                            });
                            
                            var bd = tbOwner.body.getRegion();
                            bd.right = bd.right - 50;
                            bd.bottom = bd.bottom - 50;
    
    
                            this.dragRegion.constrainTo(bd);
                            getProxy().setRegion(this.dragRegion);
                        }
                        , onEnd  : function () {
                            getProxy().hide({ duration: 150 });
    
    
                            tb.dock = this.dir;
                            tbOwner.addDocked(tb);
                            
                            var indicators = tbOwner.query('[myCtType="indicator"]');
                            Ext.each(indicators, function (ind) {
                                tbOwner.removeDocked(ind, true);
                            });
                        }
                    });
                }
            }
        }]
    });

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    49
    Answers
    2
    Vote Rating
    0
    chaddjohnson is on a distinguished road

      0  

    Default


    Very cool man! Definitely a good start.

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,770
    Answers
    355
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    This always seemed like a cool thing to have - that and tear-away tabs, but I'd just not taken the time to start trying to put something like it together.

  7. #7
    Sencha User
    Join Date
    Mar 2010
    Posts
    49
    Answers
    2
    Vote Rating
    0
    chaddjohnson is on a distinguished road

      0  

    Default


    I've seen a tear-away tab plugin for ExtJS 3 where you can re-dock tabs to other tab panels or undock them into their own windows. It wasn't perfect, but it was pretty darn good.

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,114
    Answers
    346
    Vote Rating
    507
    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


    The problem with the tab ripping is a lot of the behaviour is going to be app dependent, so it's difficult to implement in a generic manner.

    I'd agree that something similar to what @slemmon implemented would make for a nifty official example one day.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  9. #9
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,770
    Answers
    355
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Still tinkering, but here's what I've got to date:
    http://jsfiddle.net/slemmon/4WxEs/2/

    Now it's a plugin that's applied per draggable docked item.

    Stuff I'd like to still do (or figure out):
    Optional CSS config for the container
    Optional indicator config (draw path, fill color, stroke color, etc.)
    In the config pass in participating containers for the drop
    Indicate drops not only by edge, but as inserts between existing other docked items
    Optional delegate for drag handling
    Prevent drag when not dragged from the root el / delegate handler
    Allow tear away to floating container/window
    Optional config/CSS for the drag proxy
    Opt-in participating drag locations per container (i.e. ['top', 'bottom'])
    Give some indication on the drag proxy what sides are opted in for the given container
    Sort out the border stuff per docked item once re-docked
    Figure out how to re-orient items on a vertical toolbar when originally horizontal (and visa versa)
    Have this work for tabs in a tab.Bar component (or maybe that's another whole plugin)

    But now I must sleep instead.

  10. #10
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,770
    Answers
    355
    Vote Rating
    165
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Still not final, but here's my progress to date:
    http://jsfiddle.net/slemmon/4WxEs/3/

    Only the top toolbar is draggable and only if you start dragging from the toolbar itself, not an item on the toolbar (so it doesn't interfere with things like sliders, though I think I'll have an opt-out config for that at some point).
    You can now drag and drop on all edges and even between other existing docked items.
    You can specify a redockGroup on a container as well as in the plugin and the dragged docked item will be dockable in the participating container.
    You can specify which sides are dockable using redockEdges as a config on the container. Omitting the config enables all 4 sides.

    All the functionality isn't there like I want it, yet, and there are some bugs. Including a bug I believe I found with addDocked when you specify a position - but need to test more and with 4.2 beta before reporting it.

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