Как получить доступ к ширине родительских элементов в Extjs?

Question

Ниже приведен код, я хочу, чтобы компоненты внутри элемента могли получить доступ к ширине основного контейнера. Если я устанавливаю его на 100%, то его полная ширина скрывает компонент под ним. Если я устанавливаю его на this.width, он не принимает ширину контейнера родителя. Я понимаю, что это относится к одному и тому же дочернему компоненту, но я хочу знать, как получить доступ к родительской высоте.

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" 
     }] 

    } 
] 
}); 

Answer 1

Используйте flex для использования оставшейся ширины.

И для доступа к использованию up для доступа к родителям.

В вашем случае использовать onRender событие и получить его родителей, как этот

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

Хотя я не рекомендую этот способ, как, дети не должны зависеть от родителей. Но в вашем случае это лучшее, что вы можете сделать.

Иначе, если вы хотите при определении метки, вы можете сразу сказать, как

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' 
     } 

Смотрите мой пример http://jsfiddle.net/vinodgubbala/BKj98/