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

Thread: How to Change toolbar's layout dynamically from hbox to column layout

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Hyderabad
    Posts
    41
    Answers
    2

    Default How to Change toolbar's layout dynamically from hbox to column layout

    Hello All,

    How can i change layout of toolbar dynamically from Hbox to column? I've tried with setting toolbart.layout.type = 'column' and then doLayout(). But, there is no change.

    Please help me how to change toolbar's layout dynamically.

    Thanks.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Dynamic changing of layout is not available .. you would simply need to create a new layout.

    Scott.

  3. #3
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Default

    I think there must be a bit more to it than that...or at least, I'd like to know how to do it correctly.

    This code isn't working:

    Code:
                        me.getRouteResultsPanel().layout =
                            Ext.create(
                                'Ext.layout.container.HBox',
                                {
                                    align: 'stretch'
                                });
    I get a complaint about a "stretchMaxPartner" property (not straight away, but around when the layout is actually being used). Though I see it in the documentation, setting it correctly also seems to be a challenge.

    I can't seem to find any examples that show how to properly change a layout of a container at runtime...would you mind providing an example?

    Thanks.

    -Chris

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253
    Answers
    759

    Default

    As Scott said, you can't change the layout at runtime. When he says

    create a new layout.
    It means recreate the component:

    Code:
    allItems = ct.removeAll(false); // don't destroy
    ct.destroy();
    ct = new MyContainer({
        layout: 'foo',
        items: allItems
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Default

    Thanks.

    There's a big difference between, "create a new layout" and "recreate the component".

  6. #6
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Default

    Hi evant, Is this supposed to work for ExtJS v4.1.3? I'm getting an error when the new container is being rendered. Essentially, the container's "el" property hasn't been created. Is there something else I need to do when create the new container? This is what I have right now:

    var container =
    new Ext.container.Container(
    {
    type: 'details',
    layout: { type: 'hbox', align: 'stretch' },
    items: allItems
    });

    parent.add(container);
    -Chris
    Last edited by cmeans; 27 Oct 2013 at 9:53 PM. Reason: Attempting to fix code formatting.

  7. #7
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253
    Answers
    759

    Default

    Yes, something like that should work. There's probably something else causing the issue.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  8. #8
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Default

    I believe (now that I've slept on it a bit) that the problem is that none of the components had yet to be rendered...they're in a card layout that hasn't been activated.

    I think I need to wait until they're being rendered to create them in the appropriate layout.

    Thanks for your help.

    -Chris

  9. #9
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Default

    Nope, that's not the problem...

    I put a listener on my panels that get moved, and the "render" event is firing, even though they're in an "inactive" card panel.

    The new container is created and added fine to the DOM as far as I can tell, but when that card is activated, the screen goes blank (white).

    From Chrome, I do see a "Layout run failed" console error, at line 11626 in ext-all-dev.js.

    I have other panels moving around the DOM without problem, it's just this one case where I need to create a new container where the problem appears to reside.

    Any suggestions for what to try?

    Thanks.

    -Chris

  10. #10
    Ext JS Premium Member cmeans's Avatar
    Join Date
    Jun 2010
    Location
    Chicago, IL USA
    Posts
    117
    Answers
    3

    Default

    I've found that if I set a height on the new container, that the rest of the page will render, but not the new container.

    Better than the whole page being blank...but not that much of an improvement

    I've tried changing the hosting containers' layout but that doesn't seem to make a difference.

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

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