Results 1 to 10 of 14

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  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,255
    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.

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
  •