Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: add div dynamically to panel

  1. #1

    Default add div dynamically to panel

    I have a panel. Each time i click on a button, I need to add div into the panel. These divs should be draggable anywhere in the panel. How this can be done? can anybody paste a sample code?

  2. #2
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045

    Default

    Without more detail it's hard to say how one would do that - what's in the div? what is surrounding it? how is that content laid out?

    I know that the DataView examples are interesting, although I don't know that they do what you want out of the box, they may be customizable:

    http://dev.sencha.com/deploy/ext-4.0...r/chooser.html

    good luck!

    stevil

  3. #3

    Default

    hi,
    Thanks for response. I will explain my issue.
    I am preparing an app for making reports. The reports contain charts, graphs etc. I have a tools section at the bottom.These tools are nothing but charts/graphs etc. Each time i click on a tool, a component (tats wat i mentioned as div in my first post) should be added on the center panel. In the center panel all the customization is done. I need to drag and drop the components anywhere in the center panel. Finally when i click the save button i need to send width,height,position of each component to server side. Using these info an xhtml page (in my case it is report) is to be generated.
    Can anyone help?

  4. #4
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895

    Default

    Sounds like you're sort of describing an Ext.ux.Portal layout...

  5. #5

    Default

    hi friend,

    In portal when we drag and drop a portlet the rest of the portlets in that column will be rearranged automatically. I want the remaining portlets to stay in their original position.

  6. #6
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895

    Default

    Here's a start, using Panels for everything. The drop code needs a little work as it uses the top/left x/y coordinates as the drop position.

    Code:
    <html>
      <head>
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-blue.css" />
    
        <script type="text/javascript" src="ext/adapter/ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="ext/ext-all-debug-w-comments.js"></script>
        
        <script type="text/javascript">
          Ext.onReady(function() {
            Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
            Ext.QuickTips.init();
              
            var p = new Ext.Panel({
              border: false,
              layout: 'absolute',
              ref: 'containerPanel',
              title: 'Container Panel'
            });              
            
            var dragMeToHeckAndBack = {
              insertProxy: false,
                onDrag : function(e){
                  var pel = this.proxy.getEl();
                   this.x = pel.getLeft(true);
                   this.y = pel.getTop(true);
                   var s = this.panel.getEl().shadow;
                  if (s) {
                     s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
                   }
                 },
                endDrag : function(e){
               this.panel.el.setX(e.xy[0]);
               this.panel.el.setY(e.xy[1]);
               }
            };
            
            w = new Ext.Window({
              height: 600,
              layout: 'fit',
              resizable: false, 
              width: 800,
              items: [p],
              buttons: [{
                text: 'Add Panel',
                handler: function() {
                  var childPanelCount = w.containerPanel.items.length;
                  
                  var startYPosition = 10;
                  startYPosition = startYPosition * childPanelCount;
                  
                  var childPanel = new Ext.Panel({
                    draggable: dragMeToHeckAndBack,
                    layout: 'fit',
                    height: 100,
                    title: 'New Panel ' + (childPanelCount + 1),
                    width: 200,
                    x: 10,
                    y: startYPosition
                  });
                   
                  w.containerPanel.add(childPanel);
                  w.containerPanel.doLayout();              
                }
              }]
            });
            
            w.show();
          });
        </script>
        
      </head>
      <body>
      </body>
    </html>

  7. #7

    Default

    hi friend,
    Can u please explain how to make these child panels resizable

  8. #8

    Default

    Using your code i am able to drag items, but dropping doesnot seem to work well.can u pls fix that. Also i need the container to auto Expand if i resize the child panels beyond the height of container panel. Is there any way to do this

  9. #9

    Default

    After a lot of googling i have found out the method for dragging and resizing panels. Now the issue is as follows.
    I have a set of child panels created dynamically by clicking a button.These child panels are inside a container panel. I need to pass the width, height,position of all the child panels to server side when i click on save button. How this can be done?
    my code is as follows

    <script type="text/javascript">
    Ext.onReady(function() {
    Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
    Ext.QuickTips.init();
    var tools = [{
    id:'gear',
    handler: function(){
    Ext.Msg.alert('Message', 'The Settings tool was clicked.');
    }
    },{
    id:'close',
    handler: function(e, target, panel){
    panel.ownerCt.remove(panel, true);
    }
    }];

    Ext.override(Ext.Panel, {
    // private
    initEvents : function(){

    if(this.draggable){
    this.initDraggable();
    }
    this.resizer = new Ext.Resizable(this.el, {
    animate: true,
    duration: '.6',
    easing: 'backIn',
    handles: 'all', // handles:'s' gives vertical resizing only
    // minHeight: this.minHeight || 100,
    // minWidth:this.minWidth || 100,
    pinned: false,
    transparent:true
    });
    this.resizer.on("resize", this.onResizer, this);
    },
    onResizer : function(oResizable, iWidth, iHeight, e) {
    this.setHeight(iHeight);
    this.setWidth(iWidth);
    //alert(iHeight);
    }

    });
    var p = new Ext.Panel({
    border: false,
    layout: 'absolute',
    autoScroll:true,
    margins:'0 0 5 0',
    ref: 'containerPanel',
    resizable: true,
    //title: 'Container Panel',
    buttons: [{
    text: 'Add Panel',
    handler: function() {
    var childPanelCount = w.containerPanel.items.length;

    var startYPosition = 10;
    startYPosition = startYPosition * childPanelCount;

    var childPanel = new Ext.Panel({
    draggable: dragMeToHeckAndBack,
    layout: 'fit',
    height: 100,
    title: 'New Panel ' + (childPanelCount + 1),
    resizable: true,
    width: 200,
    x: 10,
    y: startYPosition,
    tools: tools

    });

    w.containerPanel.add(childPanel);
    w.containerPanel.doLayout();
    }
    }]
    });

    var dragMeToHeckAndBack = {
    insertProxy: false,
    onDrag : function(e){
    var pel = this.proxy.getEl();
    this.x = pel.getLeft(true);
    this.y = pel.getTop(true);
    var s = this.panel.getEl().shadow;
    if (s) {
    s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
    }
    },
    endDrag : function(e){
    this.panel.el.setX(this.x);
    this.panel.el.setY(this.y);
    }
    };

    w = new Ext.Window({
    height: 600,
    autoScroll:true,
    layout: 'fit',
    resizable: false,
    width: 800,
    items: [p]

    });

    w.show();
    });
    </script>

    can anybodyy help?

  10. #10
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895

    Default

    Quote Originally Posted by prajeesh_bs View Post
    hi friend,
    Can u please explain how to make these child panels resizable

    Add 'resizable: true' to the childPanel.

Page 1 of 2 12 LastLast

Similar Threads

  1. dynamically add child panel - specify order (render as first item) in parent panel
    By karstenvennemann in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 28 Jan 2011, 10:55 PM
  2. Replies: 2
    Last Post: 27 Nov 2010, 3:59 PM
  3. how do dynamically add a panel?
    By gmatty in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 14 Nov 2010, 7:22 PM
  4. Add a Panel to Tab dynamically
    By Nagadev in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 18 Aug 2009, 9:48 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •