Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    14
    Vote Rating
    1
    masood is on a distinguished road

      0  

    Default Drag and Drop inside panels with scrolling

    Drag and Drop inside panels with scrolling


    Hi

    I am porting an access like query builder written in js (from a legacy web product) into ExtJs for a complete rewrite. I used the portal example as a starting point. I am having trouble with drag and drop of the child panels and ensuring that the parent container scrolls if you pass outside its boundaries. My implementation at the moment works but I dont think it is the ideal way to do it. I am wondering if anybody could give me some pointers. I have only been using ExtJs for a couple of months so I might have missed some documentation about this kind of stuff.

    //Drag Panel
    PHP Code:
                Ext.ns('WebApp.Filter');
                
    //DragPanel
                
    WebApp.Filter.DragPanel Ext.extend(Ext.Panel, {
                    
    frametrue,
                    
    collapsibletrue,
                    
    initComponent: function () {
                        
    this.draggable = { insertProxytrue };
                        
    WebApp.Filter.DragPanel.superclass.initComponent.call(this);
                    }
                });
                
    Ext.reg('xDragPanel'WebApp.Filter.DragPanel); 
    //Drop panel
    PHP Code:
                WebApp.Filter.DropSurface Ext.extend(Ext.Panel, {
                    
    initComponent: function () {
                        
    this.autoScroll true;
                        
    WebApp.Filter.DropSurface.superclass.initComponent.call(this);
                    },

                    
    initEvents: function () {
                        
    WebApp.Filter.DropSurface.superclass.initEvents.call(this);
                        
    this.dd = new WebApp.Filter.DropSurface.DropZone(this);
                    },

                    
    beforeDestroy: function () {
                        if (
    this.dd) {
                            
    this.dd.unreg();
                        }
                        
    WebApp.Filter.DropSurface.superclass.beforeDestroy.call(this);
                    }
                });
                
    Ext.reg('xDropSurface'WebApp.Filter.DropSurface); 
    At the moment I am cheating by extending the proxy by 100px to force the scroll bars to appear. An additional problem is if the child panel is in a position where you have to scroll to get to it and if you click on it then the scroll position disappears as the 'ghost' /drag proxy is not part of the parent container.

    //Sample page with all code
    PHP Code:
    <html>
        <
    head>
            <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <
    link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css" />
            <
    script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="ext-3.3.1/ext-all-debug.js"></script>

            <script type="text/javascript">
                // Path to the blank image should point to a valid location on your server
                Ext.BLANK_IMAGE_URL = 'ext-3.3.1/resources/images/default/s.gif';

                Ext.ns('WebApp.Filter');
                //DragPanel
                WebApp.Filter.DragPanel = Ext.extend(Ext.Panel, {
                    frame: true,
                    collapsible: true,
                    initComponent: function () {
                        this.draggable = { insertProxy: true };
                        WebApp.Filter.DragPanel.superclass.initComponent.call(this);
                    }
                });
                Ext.reg('xDragPanel', WebApp.Filter.DragPanel);

                //DropSurface
                WebApp.Filter.DropSurface = Ext.extend(Ext.Panel, {
                    initComponent: function () {
                        this.autoScroll = true;
                        WebApp.Filter.DropSurface.superclass.initComponent.call(this);
                    },

                    initEvents: function () {
                        WebApp.Filter.DropSurface.superclass.initEvents.call(this);
                        this.dd = new WebApp.Filter.DropSurface.DropZone(this);
                    },

                    beforeDestroy: function () {
                        if (this.dd) {
                            this.dd.unreg();
                        }
                        WebApp.Filter.DropSurface.superclass.beforeDestroy.call(this);
                    }
                });
                Ext.reg('xDropSurface', WebApp.Filter.DropSurface);

                //DropZone
                WebApp.Filter.DropSurface.DropZone = Ext.extend(Ext.dd.DropTarget, {

                    constructor: function (dropPanel, cfg) {
                        this.dropPanel = dropPanel;
                        Ext.dd.ScrollManager.register(dropPanel.body);
                        WebApp.Filter.DropSurface.DropZone.superclass.constructor.call(this, dropPanel.bwrap.dom, cfg);
                        dropPanel.body.ddScrollConfig = this.ddScrollConfig;
                    },

                    notifyEnter: function (dd, e, data) {
                        var proxy = dd.proxy.getProxy();
                        var scroll = this.dropPanel.body.getScroll();
                        var width = this.dropPanel.body.getWidth();
                        var height = this.dropPanel.body.getHeight();

                        proxy.setWidth(width + scroll.left + 100);
                        proxy.setHeight(height + scroll.top + 100);
                    },

                    notifyOver: function (dd, e, data) {
                        this.scrollPos = this.dropPanel.body.getScroll();
                        return this.dropAllowed;
                    },

                    getScrollXY: function () {
                        if (!this.scrollPos)
                            return [0, 0];

                        return [this.scrollPos.left, this.scrollPos.top];
                    },

                    notifyDrop: function (dd, e, data) {

                        var proxyXY = dd.getProxy().getEl().getXY();
                        var surfaceXY = this.dropPanel.body.getXY();
                        var scrollXY = this.getScrollXY();
                        var x = (proxyXY[0] - surfaceXY[0]) + scrollXY[0];
                        var y = (proxyXY[1] - surfaceXY[1]) + scrollXY[1];
                        data.panel.setPosition(x, y);
                        return true;
                    },

                    // unregister the dropzone from ScrollManager
                    unreg: function () {
                        Ext.dd.ScrollManager.unregister(this.dropPanel.body);
                        WebApp.Filter.DropSurface.DropZone.superclass.unreg.call(this);
                    }

                });


                Ext.onReady(function () {                               

                    // create and show window
                    var win = new Ext.Window({   
                        width: 800,
                        height: 600,                        
                        modal: true,
                        border: false,
                        closable: true,
                        center: true,
                        resizeable: true,
                        layout: 'border',
                        items : [
                            {                            
                                region: 'west',
                                title: 'Item list',
                                width: 200                      
                            },
                            {                            
                                region: 'center',
                                layout: 'border',
                                items :[
                                    {
                                        xtype: 'xDropSurface',                                    
                                        region: 'center',
                                        title: 'WorkSpace',
                                        layout: 'absolute',
                                        items: [
                                                {
                                                    xtype: 'xDragPanel',
                                                    id: 'dragPanelA',
                                                    title: 'A',
                                                    x: 50,
                                                    y: 50,
                                                    height: 100,
                                                    width: 100
                                                },
                                                {
                                                    xtype: 'xDragPanel',
                                                    id: 'dragPanelB',
                                                    title: 'B',
                                                    x: 200,
                                                    y: 50,
                                                    height: 100,
                                                    width: 100
                                                }
                                        ]                                    
                                    },
                                    {                                    
                                        region: 'south',
                                        title: 'Criteria',
                                        height: 250
                                    }
                                ]
                            }
                        ]
                    });
                    win.show();

                });      //end onReady
            </script>
        </head>
        <body>
        </body>
    </html> 

    Cheers
    Masood

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    14
    Vote Rating
    1
    masood is on a distinguished road

      0  

    Default Update for drag drop + code for links

    Update for drag drop + code for links


    Update:
    Found some more information about drag drop and scrolling at http://www.sencha.com/forum/showthre...with-constrain
    So I changed my implementation however this still does not completely solve the scrolling problem.
    Since the last post I have managed to link the panels with lines and have them move as you drag them around. All the code has been put into one page so if anyone wants to try it they just need to add a ref to the ext base.



    PHP Code:
    <html>
        <
    head>
            <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <
    link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css" />
            <
    script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="ext-3.3.1/ext-all-debug.js"></script>

            <script type="text/javascript">
                // Path to the blank image should point to a valid location on your server
                Ext.BLANK_IMAGE_URL = 'ext-3.3.1/resources/images/default/s.gif';

                Ext.ns('WebApp.Filter');
                //DragPanel
                WebApp.Filter.DragPanel = Ext.extend(Ext.Panel, {
                    frame: true,
                    collapsible: true,

                    initComponent: function () {
                        WebApp.Filter.DragPanel.superclass.initComponent.call(this);
                    },

                    afterRender: function () {
                        WebApp.Filter.DragPanel.superclass.afterRender.call(this, arguments);

                        var parentId = this.ownerCt.body.id;
                        this.dd = new Ext.dd.DD(this);

                        this.dd.startDrag = function (x, y) {
                            this.DDM.dragCurrent.constrainTo(parentId, { left: 0, right: -200, top: 0, bottom: -200 });
                        };

                        this.dd.onDrag = function (e) {
                            var panelEl = Ext.fly(e.getTarget()).up('div.x-panel', 10);
                            if (!panelEl || panelEl == null)
                                return;

                            var panel = Ext.getCmp(panelEl.id);
                            if (panel.linkers) {
                                for (var i = 0; i < panel.linkers.length; i++) {
                                    panel.linkers[i].reDrawLink();
                                }
                            }
                        };
                    }
                });
                Ext.reg('xDragPanel', WebApp.Filter.DragPanel);


                WebApp.Filter.Linker = Ext.extend(Ext.Component, {
                    panel1: undefined,
                    panel2: undefined,
                    panel1Half: {},
                    panel2Half: {},
                    h1Link: undefined,
                    h2Link: undefined,
                    vLink: undefined,
                    lineWeight: 2,
                    tpl: new Ext.Template("<div style='display:block;' >",
                                "<div class='x-link-h1' style='overflow:hidden; position:absolute; left:{h1_left}px;  top:{h1_top}px;  width:{h1_width}px; height:{h1_height}px;  background-color: red;'></div>",
                                "<div class='x-link-v'  style='overflow:hidden; position:absolute; left:{v_left}px;   top:{v_top}px;   width:{v_width}px;  height:{v_height}px;   background-color: green;'></div>",
                                "<div class='x-link-h2' style='overflow:hidden; position:absolute; left:{h2_left}px;  top:{h2_top}px;  width:{h2_width}px; height:{h2_height}px;  background-color: blue;'></div>",
                              "</div>"),

                    initComponent: function () {

                        this.initPanel(this.panel1);
                        this.initPanel(this.panel2);

                        WebApp.Filter.Linker.superclass.initComponent.call(this);
                    },

                    initPanel: function (panel) {
                        if (!panel)
                            throw "Panel required."

                        if (!panel.linkers) {
                            panel.linkers = [];
                        }
                        panel.linkers.push(this);
                        panel.halfWidth = parseFloat(panel.getWidth() / 2);
                    },

                    reDrawLink: function () {
                        var dims = this.linkRedim();
                        this.h1Link.setPositioning({ left: dims.h1.x, top: dims.h1.y, width: dims.h1.width });
                        this.h2Link.setPositioning({ left: dims.h2.x, top: dims.h2.y, width: dims.h2.width });
                        this.vLink.setPositioning({ left: dims.v.x, top: dims.v.y, height: dims.v.height });
                    },

                    linkRedim: function () {
                        var pos1 = this.panel1.getPosition(true)
                        var pos2 = this.panel2.getPosition(true)

                        var p1 = {
                            x: pos1[0] + this.panel1.halfWidth,
                            y: pos1[1] + 5,
                            halfWidth: this.panel1.halfWidth
                        };

                        var p2 = {
                            x: pos2[0] + this.panel2.halfWidth,
                            y: pos2[1] + 5,
                            halfWidth: this.panel2.halfWidth
                        };

                        var hPos = p2.x > p1.x ? true : false;
                        var vPos = p2.y > p1.y ? true : false;

                        var hLen = Math.abs(p2.x - p1.x);
                        var vLen = Math.abs(p2.y - p1.y) + this.lineWeight;

                        var hBoxDist = hLen - p2.halfWidth - p1.halfWidth;
                        var hBoxDistBy2 = Math.abs(parseFloat(hBoxDist / 2));
                        var minLinkLen = Math.abs(parseFloat(p1.halfWidth - p2.halfWidth)) + 10;

                        var h1 = { x: 0, y: p1.y, width: hBoxDistBy2, height: this.lineWeight };
                        var h2 = { x: 0, y: p2.y, width: hBoxDistBy2, height: this.lineWeight };
                        var v = { x: 0, y: p2.y, width: this.lineWeight, height: vLen };

                        if (vPos) v.y = p1.y;

                        if (hPos) {
                            h1.x = p1.x + p1.halfWidth;
                            h2.x = p1.x + p1.halfWidth + hBoxDistBy2;
                            v.x = h2.x;

                            if (hBoxDist <= 1) {
                                hBoxDist = hLen - p1.halfWidth + p2.halfWidth + minLinkLen;

                                h1.x = p1.x + p1.halfWidth;
                                h1.width = hBoxDist;

                                h2.x = p2.x + p2.halfWidth;
                                h2.width = minLinkLen;

                                v.x = p1.x + p1.halfWidth + hBoxDist;
                                if (vPos) v.y = p1.y;
                            }
                        }
                        else {
                            h1.x = p2.x + p2.halfWidth + hBoxDistBy2;
                            h2.x = p2.x + p2.halfWidth;
                            v.x = h1.x;

                            if (hBoxDist <= 1) {
                                hBoxDist = hLen - p1.halfWidth + p2.halfWidth + minLinkLen;

                                h1.x = p2.x - p2.halfWidth - minLinkLen;
                                h1.width = hBoxDist;

                                h2.x = h1.x;
                                h2.width = minLinkLen;

                                v.x = h1.x;
                                if (vPos) v.y = p1.y;
                            }
                        }

                        if (v.height == 0) v.height = 1; //IE bug fix

                        return { h1: h1, h2: h2, v: v };
                    },

                    onRender: function (ct) {
                        var dims = this.linkRedim();

                        var conf = {
                            h1_left: dims.h1.x,
                            h1_top: dims.h1.y,
                            h1_width: dims.h1.width,
                            h1_height: dims.h1.height,
                            
                            h2_left: dims.h2.x,
                            h2_top: dims.h2.y,
                            h2_width: dims.h2.width,
                            h2_height: dims.h2.height,
                            
                            v_left: dims.v.x,
                            v_top: dims.v.y,
                            v_width: dims.v.width,
                            v_height: dims.v.height                        
                        };

                        this.el = this.tpl.append(ct, conf);
                        WebApp.Filter.Linker.superclass.onRender.apply(this, arguments);

                        this.h1Link = Ext.select('#' + this.el.id + '> .x-link-h1').first();
                        this.h2Link = Ext.select('#' + this.el.id + '> .x-link-h2').first();
                        this.vLink = Ext.select('#' + this.el.id + '> .x-link-v').first();
                    },

                    destroy: function () {
                        this.panel1 = null;
                        this.panel2 = null;
                        Ext.fly(this.h1Link).remove();
                        Ext.fly(this.h2Link).remove();
                        Ext.fly(this.vLink).remove();
                        Ext.fly(this.el).remove();
                        WebApp.Filter.Linker.superclass.destroy.apply(this, arguments);
                    }
                });
                Ext.reg('xLinker', WebApp.Filter.Linker);


                Ext.ns('WebApp');
                WebApp.workspace = function () {
                    return {
                        viewPort: {},
                        init: function () {
                            this.viewPort = new Ext.Viewport({
                                layout: 'border',
                                items: [
                                    {
                                        region: 'west',
                                        title: 'Item list',
                                        width: 200,
                                        items: [
                                            {
                                                xtype: 'button',
                                                text: 'Press Me',
                                                scope: this,
                                                handler: this.addPanel
                                            }
                                        ]
                                    },
                                    {
                                        region: 'center',
                                        layout: 'border',
                                        items: [
                                            {
                                                xtype: 'panel',
                                                id: 'workSurface',
                                                region: 'center',
                                                title: 'Work Surface',
                                                layout: 'absolute',
                                                autoScroll: true
                                            },
                                            {
                                                region: 'south',
                                                title: 'Criteria',
                                                height: 250
                                            }
                                        ]
                                    }
                                ]
                            });
                        },

                        addPanel: function () {
                            var workSurface = Ext.getCmp('workSurface');

                            var panelA = new WebApp.Filter.DragPanel({
                                title: 'Panel A',
                                x: 50,
                                y: 100,
                                height: 200,
                                width: 150
                            });
                            workSurface.add(panelA);                        

                            var panelB = new WebApp.Filter.DragPanel({
                                title: 'Panel B ',
                                x: 500,
                                y: 100,
                                height: 200,
                                width: 150
                            });
                            workSurface.add(panelB);
                            workSurface.doLayout();


                            var link = new WebApp.Filter.Linker({
                                xtype: 'xlinker',
                                panel1: panelA,
                                panel2: panelB
                            });
                            workSurface.add(link);
                            workSurface.doLayout();
                        }
                    };
                } ();             
                Ext.onReady(WebApp.workspace.init, WebApp.workspace);
            </script>
        </head>
        <body>
        </body>
    </html> 

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    14
    Vote Rating
    1
    masood is on a distinguished road

      0  

    Wink Progress

    Progress


    Got the query builder this far.ScreenShot.jpg