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
    Mar 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    rdowling is on a distinguished road

      0  

    Default Answered: Draggable Grid in TabPanel in ViewPort

    Answered: Draggable Grid in TabPanel in ViewPort


    I am trying to create a draggable grid inside of a TabPanel item inside of a TabPanel inside of a Viewport (Viewport > TabPanel > items[] > gridpanel), bound by the fullpage TabPanel container. I could put the following grid panels into windows, getting draggability out of the box, and then add this window to a TabPanel, but the Extjs4 layout documentation seems to explicitly warn against this: "Overnesting is a common problem. An example of overnesting occurs when a GridPanel is added to a TabPanel by wrapping the GridPanel inside a wrapping Panel (that has no layout specified) and then add that wrapping Panel to the TabPanel. The point to realize is that a GridPanel is a Component which can be added directly to a Container."

    -- Note: Data and example code heavily lifted from sencha designed example I put together; pls ignore that the grids are empty. --

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    
      <link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />    
    
    
      <script src="/ext/bootstrap.js"></script>
    
    
      <script type="text/javascript">
      
        Ext.onReady( function() {
          Ext.create('Ext.container.Viewport', {    
            renderTo: Ext.getBody(),
            items: 
            [
              { xtype: 'tabpanel',
                activeTab: 0,
                items: 
                [
                  { xtype: 'panel',
                    title: 'Tab 1',
                    items: 
                    [
                      { xtype: 'gridpanel',
    
    
                        title: 'Grid Panel One',
                        closable: true,
                        collapsible: true,  animCollapse: true,
                        resizable: true,
                        constrain: true,
                        headerPosition: 'top',
                        height: 300,
                        width: 500,
                        draggable: true,
    
    
                        columns: 
                        [
                          { xtype: 'gridcolumn',
                            text: 'String'
                          },
                          { xtype: 'numbercolumn',
                            text: 'Number'
                          },
                          { xtype: 'datecolumn',
                            text: 'Date'
                          },
                          { xtype: 'booleancolumn',
                            text: 'Boolean'
                          }
                        ],//columns
                        viewConfig: {
                          plugins: [
                            Ext.create('Ext.grid.plugin.DragDrop', {
                              ptype: 'gridviewdragdrop'
                            })
                          ]//plugins
                        }//viewConfig
    
    
                      },//gridpanel1
    
    
                      { xtype: 'gridpanel',
                        
                        title: 'Grid Panel Two',
                        closable: true,
                        collapsible: true,  animCollapse: true,
                        resizable: true,
                        constrain: true,
                        headerPosition: 'top',
                        height: 300,
                        width: 500,
                        draggable: true,
    
    
                        columns: 
                        [
                          { xtype: 'gridcolumn',
                            text: 'String'
                          },
                          { xtype: 'numbercolumn',
                            text: 'Number'
                          },
                          { xtype: 'datecolumn',
                            text: 'Date'
                          },
                          { xtype: 'booleancolumn',
                            text: 'Boolean'
                          }
                        ],//columns
    
    
                        viewConfig: {
                          plugins: [
                            Ext.create('Ext.grid.plugin.DragDrop', {
                              ptype: 'gridviewdragdrop'
                            })
                          ]//plugins
                        }//viewConfig
    
    
                      } //gridpanel
                    ]//tabpanel1.items[]
                  },//tabpanel1
                  
                  { xtype: 'panel',
                    title: 'Tab 2'
                  },//tabpanel2
                  
                  { xtype: 'panel',
                    title: 'Tab 3'
                  }//tablpanel3
                ]//tabpanel.items[]
              }//tabpanel
            ]//Viewport.items[]
    
    
          });//Viewport
          
        });//onReady
    
    
      </script> 
    
    
    </head>
    
    
    <body>
    </body>
    
    
    </html>

    This code results in a grid that is draggable (clickable and draggable), but snaps back into the original position as it's dropped (unclicked). What's the best way forward, from a code-to-work as well as a best-practice (if I'm reading the Extjs cautioning I quoted above)? Taking a look at the Window source, I could add the code below to DD, but that does not seems appropriate here (i.e. I am creating a default Grid class to inherit my components from):

    Code:
    initDraggable: function() {
        var me = this,
            ddConfig;
    
    
        if (!me.header) {
            me.updateHeader(true);
        }
    
    
        /*
         * Check the header here again. If for whatever reason it wasn't created in
         * updateHeader (preventHeader) then we'll just ignore the rest since the
         * header acts as the drag handle.
         */
        if (me.header) {
            ddConfig = Ext.applyIf({
                el: me.el,
                delegate: '#' + me.header.id
            }, me.draggable);
    
    
            // Add extra configs if Window is specified to be constrained
            if (me.constrain || me.constrainHeader) {
                ddConfig.constrain = me.constrain;
                ddConfig.constrainDelegate = me.constrainHeader;
                ddConfig.constrainTo = me.constrainTo || me.container;
            }
    
    
            me.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
            me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
        }
    }
    Is there a mixin available that I'm not aware of, or if not would it be appropriate to create a mixin from the above code?
    Last edited by rdowling; 10 Apr 2012 at 6:48 AM. Reason: formatting

  2. Although the help warns against it, I ended up adding the GridPanels to Windows as needed, then managed the windows (show/hide) through the activate/deactivate listeners on the tab panel. This was actually recommended to me by a colleague who works heavily with Ext products, and proved to be a very simple solution to implement.

    It wouldn't hurt if this was a bit easier somehow, however. This draggable-grid-inside-tabpanel would most likely be pretty common behavior. I've seen other posts trying to get similar drag-and-drop functionality on grids in containers.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,862
    Answers
    651
    Vote Rating
    438
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Have a look at our portal example and see if this helps:
    http://dev.sencha.com/deploy/ext-4.0...al/portal.html

    Regards,
    Scott.

  4. #3
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    rdowling is on a distinguished road

      0  

    Default


    Hi Scott --

    Thanks for following up so quickly. I looked at the portal and I have a couple of questions:
    1) It looks as though the drag/drop is from one location to another - if I were to allow for an absolute layout-structure, so that the grids could be dropped anywhere in the view...?
    2) Maybe I could get #1 by looking at the code for this page? Best way to do that?

  5. #4
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    rdowling is on a distinguished road

      0  

    Default


    I've spent some more time trying to figure this out, and below is the dragzone I'm setting up within my grid panel. However, I think the problem I now have is that the event target (e.getTarget()), could be one of a number of grid subcomponents. What's the best way to capture the whole grid element so that I could clone it?

    Code:
     afterRender: function() {
        this.callParent(arguments);
    
    
        var oGridEl = this.el,
            oView = this.getView();
    
    
        new Ext.dd.DragZone(oGridEl, {
    
    
            getDragData: function(e) {
    
    
                var oTargetEl = e.getTarget();
    
    
                console.log(oTargetEl);
    
    
                if (oTargetEl) {
                    var d =  oTargetEl.cloneNode(true);
                    d.id = Ext.id();
                    return {
                        ddel: d,
                        repairXY: Ext.fly(oTargetEl).getXY()
                    };
                }
            },
    
    
            getRepairXY: function() {
                return this.dragData.repairXY;
            }
        });

  6. #5
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    4
    Answers
    1
    Vote Rating
    0
    rdowling is on a distinguished road

      0  

    Default Final workaround

    Final workaround


    Although the help warns against it, I ended up adding the GridPanels to Windows as needed, then managed the windows (show/hide) through the activate/deactivate listeners on the tab panel. This was actually recommended to me by a colleague who works heavily with Ext products, and proved to be a very simple solution to implement.

    It wouldn't hurt if this was a bit easier somehow, however. This draggable-grid-inside-tabpanel would most likely be pretty common behavior. I've seen other posts trying to get similar drag-and-drop functionality on grids in containers.

Thread Participants: 1

Tags for this Thread