Javascript ExtJS门户布局问题(内部元素的自动高度/宽度)

Javascript ExtJS门户布局问题(内部元素的自动高度/宽度),javascript,extjs,extjs4,Javascript,Extjs,Extjs4,我正在使用它来构建门户。很明显,我在里面有自定义窗口,可以像提供的链接那样调整它们的高度/宽度。在其中一个窗口中,我有一个图表和一个网格,我想把它们并排放在一行中。但这种方法要求我为图表提供高度/宽度。如果我这样做,图表不会调整其高度/宽度,如果我像示例中那样使用父容器的高度和宽度。请指导我如何实现这一点。我使用带alight的hbox布局进行拉伸。请在下面查找代码 Ext.apply(this,{layout: { type: 'hbox', align:

我正在使用它来构建门户。很明显,我在里面有自定义窗口,可以像提供的链接那样调整它们的高度/宽度。在其中一个窗口中,我有一个图表和一个网格,我想把它们并排放在一行中。但这种方法要求我为图表提供高度/宽度。如果我这样做,图表不会调整其高度/宽度,如果我像示例中那样使用父容器的高度和宽度。请指导我如何实现这一点。我使用带alight的hbox布局进行拉伸。请在下面查找代码

  Ext.apply(this,{layout: {
        type: 'hbox',
        align: 'stretch'
    }
  ,      width:600,height:300,items:
     [



    {
      xtype: 'chart',
        animate: true,
        shadow: true,
        height:200,
        width:200,
        store: Ext.create('Ext.data.JsonStore', {
    fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
    data: [
            {year: 2005,  action: 23890000},
            {year: 2006,  action: 38900000},
            {year: 2007,  action: 50410000},
            {year: 2008,  action: 70000000}
          ]
          }),
        legend: {
            position: 'right'
        },
        axes: [{
            type: 'Category',
            position: 'bottom',
            fields: ['action'],

        }, {
            type: 'Numeric',
            position: 'left',
            fields: ['year'],
            title: false
        }],
        series: [{
            type: 'bar',
            axis: 'top',
            gutter: 80,
            xField: 'year',
            yField: ['action'],
            tips: {

            }
        }]





          },{xtype:'grid',
    collapsible:false,store: Ext.create('Ext.data.ArrayStore', {
       fields: [
       {name: 'company'},
       {name: 'price',      type: 'float'},
       {name: 'change',     type: 'float'}
      ],
       data: myData
     }), multiSelect: true,viewConfig: {emptyText: 'No information to display'},
       columns: [{
            text     : 'Company',
            flex     : 1,
            sortable : false,
            dataIndex: 'company'
        },
        {
            text     : 'Price',
            width    : 75,
            sortable : true,
            renderer : 'usMoney',
            dataIndex: 'price'
        }]
           }]


        });

您不必在图表或网格上输入宽度/高度。只需在每个容器上都添加一个“flex”值,例如,
flex:1
,以便它们在hbox容器中具有相同的宽度