How to access Parents width in Extjs?

Below is the code, i want that the components inside the item can access the main container's width. If i am setting it to 100% its taking the full width hiding the component below it. If i am setting it to this.width its not taking the parent's container's width. I understand that this refers to the same child component but i want to know how to access the parents height.

Ext.define('view.containers.Header',{
extend: 'Ext.container.Container',
layout: {
    type: 'hbox',
    align: 'middle'
},
alias: 'widget.header',

documentName: "My Document",

width: '100%',
height: 25,
cls: 'header',

items:[
    {
        xtype: 'container',
        layout: 'hbox',
        width: 170
    },{
        xtype: 'container',
        layout: {
            type: 'vbox',
            align: 'center'
        },
        width: '100%',//Setting its width 100% is hiding the component below this and setting it to this.width is not giving me the parents width
        items:[
            {
                xtype: 'label',
                text: this.documentName, // It is not giving me the value of the documentName property of its parent. How to access that?
                cls: 'headerLabel'
            }
        ]
    },{
        xtype: 'container',
        layout: "hbox",
        width: 170,
        items:[{
            xtype: "button",
            text: "Help"
        }]

    }
]
});

Solution

Use flex for use the remaining width.

And to access use up for accessing parents.

For your case use onRender event and get its parent like this

listeners : {
     render : function () {
          this.setText(this.up('.header').documentName);
     }
}

Though I don't recommend this way as, Children shouldn't depend on parent. But in your case this is the best you can do.

Else if you want when defining the label, you can directly say like

   var documentName = "My Document";
   Ext.define('view.containers.Header',{
     extend: 'Ext.container.Container',
     layout: {
         type: 'hbox',
         align: 'middle'
     },
     alias: 'widget.header',
     documentName: documentName,
.
.
.
     {
         xtype: 'label',
         text: documentName,
         cls: 'headerLabel'
      }

See my example http://jsfiddle.net/vinodgubbala/BKj98/