1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    19
    Vote Rating
    1
    honggang.z.zhu is on a distinguished road

      0  

    Default Container is not be filled 100 percent by a toolbar

    Container is not be filled 100 percent by a toolbar


    I have a container object in view port, i set the layout 'fit', then i render a toolbar to this container, when this container is rendering, i put these codes in this event:

    Ext.create('Ext.toolbar.Toolbar', {
    renderTo: 'cntMainMenu',
    items: [
    {
    xtype: 'button',
    text: 'Panel Show'
    },
    {
    xtype: 'button',
    text: 'Temp Show'
    }
    ]
    });

    This toolbar's buttons can not be loaded successfully. When I set toolbar's width attribute a exact number, these buttons be loaded successfully, but this container is not be filled 100 percent, what can do ?

    02.png

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,365
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Perhaps you should show a picture of what you're trying to achieve...

    You will need to set a width to the toolbar if you are using the renderTo configuration.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    19
    Vote Rating
    1
    honggang.z.zhu is on a distinguished road

      0  

    Default


    I need to put a combobox on a container, I have to use 'renderTo' atrribute, I want this combobox to be resized when the contianer is resized. what should i do?

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,365
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    Start an Ext Project
    Drag out a Panel
    Put the Combobox into the Panel
    Set the layout of the Panel to 'anchor'
    Set the Combobox anchor configuration to '100%'

    Resize the Panel and you'll see the combo adapts to the panel...
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Sencha User
    Join Date
    Oct 2012
    Posts
    19
    Vote Rating
    1
    honggang.z.zhu is on a distinguished road

      0  

    Default


    Thanks for you help.
    I did it as you said, but i need this panel/ container render to another container 'ControllerA'. When I am resizing
    'ControllerA', the combobox is not resized.

    Below is the code, I want to render this panel to another container.

    Ext.define('app.view.Page.P4', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.pagep4',


    layout: {
    type: 'anchor'
    },
    title: 'P4',


    initComponent: function() {
    var me = this;


    Ext.applyIf(me, {
    items: [
    {
    xtype: 'combobox',
    anchor: '98%',
    fieldLabel: 'Label'
    }
    ]
    });


    me.callParent(arguments);
    }


    });

  6. #6
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,365
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    How are you resizing it?

    Have you put Page.P4 in as an item of this container?
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  7. #7
    Sencha User
    Join Date
    Oct 2012
    Posts
    19
    Vote Rating
    1
    honggang.z.zhu is on a distinguished road

      0  

    Default


    yes, Page.P4 as a item renderTo a container.

  8. #8
    Sencha User
    Join Date
    Oct 2012
    Posts
    19
    Vote Rating
    1
    honggang.z.zhu is on a distinguished road

      0  

    Default


    I want to click 'Page P1 Show', show the panel 'P1', when click 'Page P2 show', show the panel 'P2'.

    Panel 'P1'
    Untitled.png

    Panel 'P2'

    02.png

    I used the following code to create the panels 'pagep1' and 'pagep2' rendering to a container 'cntMainContent', but the components on the panels are not resized when the window resized, if I drag 'pagep1' under container 'cntMainContent' as a item, when i resized the window, the components on the panel 'pagep1' are resized automatically. I don't know why, what can i do ?

    Ext.widget('pagep1', {
    renderTo: 'cntMainContent'
    });

    Ext.widget('pagep2', {
    renderTo: 'cntMainContent'
    });

  9. #9
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,365
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    When using renderTo, you are instructing the framework to render to a particular dom element and then forget about managing the width/height/position of the component.

    When you use items or add to a particular container, you are instructing the framework to manage the height/width/position of the component via layout management.

    renderTo - unmanaged
    add()/items - managed by layout.

    Instantiate instances of your components and add them to an appropriate container. As that container is resized, so will your child components.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  10. #10
    Sencha User
    Join Date
    Oct 2012
    Posts
    19
    Vote Rating
    1
    honggang.z.zhu is on a distinguished road

      0  

    Default


    It works, I used 'add' method. Thanks for your great help.

Thread Participants: 1