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

Thread: [Solved]TreePanel Scrollbars not working when in Panel?

  1. #1

    Default [Solved]TreePanel Scrollbars not working when in Panel?

    This problem is driving me crazy: I have a TreePanel loaded inside a Panel (with accordion layout) which height adapts to the size of the browser window.

    Well... see this demo to understand what I mean:
    http://vps.minux.it/extjs-test/

    I'm referring to the treepanel on the left.
    I can't find a way to show the TreePanel scrollbars when needed. The only way is removing its autoHeight and setting a fixed height for that div.

    Could anyone help me, please?

  2. #2

    Default

    Please, anyone can help me?

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    Beta1?? You're kidding. Please upgrade to RC1 and retest.

  4. #4

    Default

    Done, now it is based on RC1.
    Same url as above.
    Same results...

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854

    Default

    Give the panel a height and set autoScroll:true

  6. #6

    Default

    Yes, that's exactly what I'm trying to avoid.
    I'd like to have that tree list fit all the available vertical space inside the accordion tab.

    Do you think there's any workaround?

    Thanks!

  7. #7

    Smile I'm using ....

    I use this lot to create an accordian with a number of trees. Maybe something in here will help you?

    Libraries excerpt :
    Code:
    function buildTree(title, node_name, id) {
      var tree = new Ext.tree.TreePanel({
    //    layout:'fit',
    
        title:title, //'Projects',
        id:node_name, //'tree',
        autoScroll:true,
        sorting:true,
        animate:true,
        enableDD:true,
        rootVisible:false,
        containerScroll: true, 
        loader: new Ext.tree.TreeLoader({
          dataUrl:'/zones/open/'
        })
      });
    
      // set the root node
      var root = new Ext.tree.AsyncTreeNode({
        text: 'Zones',
        draggable:false,
        id:id //'1'
      });
    
      tree.setRootNode(root);
      
      tree.on("click", function(e) {
        alert("Tree item clicked - " + e.text);
      });
    
      tree.on("contextmenu", function(node, event) {
    //    alert("Context menu - " + node.text);
        showContextMenu(node);
        event.stopEvent();
        event.preventDefault();
      });
    
      tree.on("beforenodedrop", function(e) {
        var moveNode = new Ext.data.Connection();
        moveNode.request({
          url: '/zones/move',
          method: "POST",
          params: {
            node: e.data.node.id,
            target: e.target.id,
            type: e.point
          },
          callback: function(o, success, response) {
            //Connection check
            if ( !success ) {
              Ext.Msg.alert('Connection Error', 'Failed to connect to server to add property to the slideshow. Check your Internet connection and try again. If the problem persists please contact the administrator.');
              return false;
            }
          }
        });
      });
      
      return tree;
    }
    
    function buildProjects() {
      var projects = [];
      <% for project in Zone.projects %>
      projects.push(buildTree('<%= escape_javascript project.name %>', '<%= escape_javascript project.name.downcase.gsub(' ', '') %>', '<%= project.id %>'));
      <% end %>
      return projects;
    }
    
    var rootContextMenu = new Ext.menu.Menu('rootContext');
    var mainContextMenu = new Ext.menu.Menu('mainContext');
    
    mainContextMenu.add(
      new Ext.menu.Item({text: 'Rename ...', handler:  zoneRename}),
      new Ext.menu.Item({text: 'Add Child', handler:  zoneAddChild}),
      new Ext.menu.Item({text: 'Add Sibling', handler:  zoneAddSibling}),
      new Ext.menu.Separator(),
      new Ext.menu.Item({text: 'Delete ...', handler:  zoneDelete}),
      new Ext.menu.Separator(),
      new Ext.menu.Item({text: 'Tasks ...', handler:  zoneTasks})
    
    );
    
    rootContextMenu.add(
      new Ext.menu.Item({text: 'Add Child...', handler:  zoneAddChild})
    );
    
    function showContextMenu(node){
      if(node.isRoot) {
        rootContextMenu.show(node.ui.getAnchor());
      }
      else
      {
        mainContextMenu.show(node.ui.getAnchor());
      }
    }
    
    function zoneTasks(node, bnode) {
      alert(node.id + ', ' + bnode.id + ', ');
    //  maintabs.getItem('tasks').getUpdater().update('/graphs/tasks/' + node.text);
    }
               
    function zoneAddChild(node) {
      alert('Add zone child' + node.text);
    }
    
    function zoneAddSibling(node) {
      alert('Add zone sibling' + node.text);
    }
    
    function zoneRename() {
      alert('Rename zone ');
    }
    
    
    function zoneDelete() {
      alert('Delete zone');
    }
    
    
    function buildAccordian(projects) {
      var accordian = new Ext.Panel({
        region:'west',
        title:'Projects',
        split:true,
        border:false,
        width: 200,
        collapsible: true,
        margins:'0 0 0 5',
        layout:'accordion',
        defaults: {
          bodyStyle: 'padding:3px'
        },
        layoutConfig: {
          titleCollapse: false,
          animate: true
        },
        items: projects
      });
    
      accordian.on("contextmenu", function(node, event) {
        alert("Context menu for accordian" + node.text);
        showContextMenu(node);
        event.stopEvent();
        event.preventDefault();
      });
      
      return accordian;
    }
    Then when the page has loaded :

    Code:
    function buildLayout() {
      projects = buildProjects();
      accordian = buildAccordian(projects);
    
      messages = Messages();
      notes = Notes();
      maintabs = buildMainTabs([messages, notes]);
    
      utilities = buildUtilities();
      status = buildStatus();
    
      mainLayout(accordian, maintabs, utilities, status);
    }

  8. #8
    Sencha User hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,966

    Default

    try containerScroll:true on your TreePanel config.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  9. #9

    Default

    Quote Originally Posted by hendricd View Post
    try containerScroll:true on your TreePanel config.
    There's already a containerScroll:true.

    Quote Originally Posted by Morris View Post
    I use this lot to create an accordian with a number of trees. Maybe something in here will help you?
    Thanks indeed, but I really looks the same. Can you tell me how is configured the div in the html of the page?
    Also, if the tree is longer than the accordion tab, do you see a vertical scrollbar?

    Thanks

  10. #10
    Sencha User
    Join Date
    Nov 2007
    Posts
    135

    Default

    Your adding TreePanel to another container so move autoScroll and containerScroll to the container config.

    Code:
    // ------------ WEST1 ------------
    {
       contentEl: 'west1',
       title: 'Foo One',
       border: false,
       iconCls: 'nav',
       autoScroll: true,
       containerScroll: true
    }
    // ... and so on

Page 1 of 2 12 LastLast

Posting Permissions

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