Results 1 to 7 of 7

Thread: Dynamically Loaded Grids In Card Layout Don't Scroll

  1. #1

    Default Dynamically Loaded Grids In Card Layout Don't Scroll

    I am dynamically loading a number of different grids into a panel with a card layout. The first card always functions perfectly, but when I hit the next button to scroll to the next grid, I suddenly can't scroll. The arrow buttons and mousewheel no longer affect the grid in the panel, even when cells of the grid are highlighted.

    The first 'card' in the card layout always continues to work, so I presume it's a problem with the method I wrote to handle navigation, which is shown below:

    Code:
    var navHandler = function(direction){
              var layout = CardPanel.getLayout();
              var active = layout.activeItem;
              var idx = CardPanel.items.findIndexBy(function(o) {
                 return o == active;
              });
    
              var next = idx + direction;
              var upperLimit = gridArray.length-1;
    
              if(next <= 0) { next = 0;  }
              if(next > upperLimit) { next = upperLimit;  }
    
              if(next==0)
                Ext.getCmp('move-prev').hide();
              else
                Ext.getCmp('move-prev').show();
    
              if(next==upperLimit)
                Ext.getCmp('move-next').hide();
              else
                Ext.getCmp('move-next').show();
    
              Ext.getCmp('page_num').setText('Page ' + (next + 1));
    
    
              layout.setActiveItem(next);
    
          };

    Is there something more I should be doing here to make sure the grids in the cards that I navigate to have scrolling privilages?

  2. #2

    Default

    does your panel have deferredRender defined? You go:

    Code:
    ...
    layout: 'card',
    layoutConfig: {
        deferredRender: true
    },...
    To set it. Could we see some of the panel's code?

  3. #3

    Default

    Thank you so much! Setting deferredRender fixed my scrolling problem, and significantly improved loading times. I'm including the code because you asked for it and I am inclined to facilitate your every desire as thanks, but I think my issue is resolved.



    Code:
    var CardPanel =new Ext.Panel({
              title: 'Limits Editor',
              region: 'center',
              layout:'card',
              layoutConfig: {
                  deferredRender: true
                  },
              activeItem: 0,
              bbar: [
                  ' ',' ',' ',' ',
                  {
                      xtype: 'label',
                      id: 'page_num',
                      style: 'border: black, 1px;',
                      text: 'Page 1'
                  },
                  ' ',' ',' ',' ',
                  {
                      id: 'move-prev',
                      text: 'Back',
                      handler: navHandler.createDelegate(this, [-1]),
                      hidden: true
                  },
    
                  '->',
                  {
                      id: 'move-next',
                      text: 'Next',
                      handler: navHandler.createDelegate(this, [1])
                  }
              ]
            });

  4. #4
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Quote Originally Posted by Tangera View Post
    Thank you so much! Setting deferredRender fixed my scrolling problem, and significantly improved loading times. I'm including the code because you asked for it and I am inclined to facilitate your every desire as thanks, but I think my issue is resolved.



    Code:
    var CardPanel =new Ext.Panel({
              title: 'Limits Editor',
              region: 'center',
              layout:'card',
              layoutConfig: {
                  deferredRender: true
                  },
              activeItem: 0,
              bbar: [
                  ' ',' ',' ',' ',
                  {
                      xtype: 'label',
                      id: 'page_num',
                      style: 'border: black, 1px;',
                      text: 'Page 1'
                  },
                  ' ',' ',' ',' ',
                  {
                      id: 'move-prev',
                      text: 'Back',
                      handler: navHandler.createDelegate(this, [-1]),
                      hidden: true
                  },
    
                  '->',
                  {
                      id: 'move-next',
                      text: 'Next',
                      handler: navHandler.createDelegate(this, [1])
                  }
              ]
            });
    Why are you doing this? Use a single Toolbar spacer. Check out the API.

  5. #5

    Default

    Excuse my possible ignorance, but I believe those are Toolbar spacers, at least in the sense that ' ' is shorthand for {xtype:'tbspacer'}. I'm using so many because I want the Page label to have a certain amount of space around it.

    Is there a way to customize the size of the spacer, or a larger option other than '->'? I'm afraid I didn't see those options in the API.

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Customize with CSS. That's how they acquire a width.

  7. #7

    Default

    Thank you!

Similar Threads

  1. [SOLVED] Dynamically adding FormPanel with FieldSet to Card layout.
    By elDub in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 3 Apr 2008, 10:47 AM
  2. Problems with Scroll in grid inside card layout
    By MtAiryEd in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 4 Feb 2008, 5:54 PM
  3. Scroll bars in a layout with grids
    By poam in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 22 Jan 2008, 9:03 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
  •