Results 1 to 5 of 5

Thread: Panel resize failing when container is resized using splitter

  1. #1
    Sencha Premium User
    Join Date
    Apr 2011
    Posts
    108
    Answers
    1

    Default Answered: Panel resize failing when container is resized using splitter

    Hello,

    Using EXTJS 6.5.3 I have a layout issue I cannot figure out what is wrong. My app panel has two panels and a splitter, the left panel has an accordion layout, each option will open the selected panel on the right. After each panel has been selected if the splitter is moved open a previously open panel will cause the panel to open with an incorrect size (very skinny and not filling the right side). I have created a Fiddle to show it. The method that is hiding/showing the panels is in app.js - showPanel().

    Fiddle link: https://fiddle.sencha.com/#view/editor&fiddle/2qrs

    Directions: select each option on the left side, the corresponding panel will open on the right. Stay on option 3, resize using the splitter, select option 2 (notice panel size), select option 1 (notice panel size), resize using splitter again, select option 3 (notice panel size).

    I cannot figure what is going on here so I would appreciate any insight.

    Thank you
    Rudy

  2. You are falliing in a layout issue.

    you are making your code more complicated then necessary. Try using databinding for some stuffs.

    Avoid using component query. Use reference for getting components refs
    Use card layout for content panelm, then set item active

  3. #2
    Sencha Premium User
    Join Date
    Apr 2011
    Posts
    108
    Answers
    1

    Default

    Hi all,

    I was hoping someone had a insight. Would this be a possible bug? I changed the fiddle to use 6.7 and the behavior is the same.

    Thanks again for any help

  4. #3
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    898
    Answers
    15

    Default

    You are falliing in a layout issue.

    you are making your code more complicated then necessary. Try using databinding for some stuffs.

    Avoid using component query. Use reference for getting components refs
    Use card layout for content panelm, then set item active
    Wemerson Januario @JanuarioCoder
    Novanti Tecnologia, Sencha MVP/ Ext JS Consultant
    ____________________________________________
    Hire me on UpWork:

    GitHub
    https://github.com/wemersonjanuario

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  5. #4
    Sencha Premium User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Goiânia - GO, Brazil
    Posts
    898
    Answers
    15

    Default

    to solve your problem

    just add flex: 1 to new panel

    Code:
     var newPanel = mainPanel.add({xtype: panelToShow, flex: 1});
    here are a short and simple fiddle using card. You can make it even shorter.

    https://fiddle.sencha.com/#view/editor&fiddle/2qvh
    Wemerson Januario @JanuarioCoder
    Novanti Tecnologia, Sencha MVP/ Ext JS Consultant
    ____________________________________________
    Hire me on UpWork:

    GitHub
    https://github.com/wemersonjanuario

    Treinamento e Consultoria Ext JS. QUALIFIQUE-SE JÁ!

  6. #5
    Sencha Premium User
    Join Date
    Apr 2011
    Posts
    108
    Answers
    1

    Default

    Thank you for the hints. I updated my fiddle to implement the card layout. I have pushed this functionality into our main application and it's working fine.

    Thanks again.

Posting Permissions

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