Base ExtJS fiddle

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/dev/examples/shared/examples.css">
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 110px; max-width: 800px; height: 400px; margin: 0 auto"></div>

CSS

body { padding: 20px }

JavaScript

var load = function(){
     	
        new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        title: {
            text: 'Stacked bar chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            }
        },
        legend: {
            reversed: true
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]
        }]
    });
 }

Ext.onReady(function(){ 
   var panel1 =  new Ext.Panel({
        renderTo: "container",
        title: 'Test panel',
        height: 300,
        width:500,
        layout:'fit', 
        listeners: {
             beforerender: function() {
    			load();
  			}
       },
        id: 'panel1'
});
    new Ext.Panel({
        renderTo: "container",
        title: 'Test panel',
        height: 300,
        width:500,
        layout:'fit', 
        items:[panel1, load]
});
        
  });