View Full Version : How to refresh a container with different component

12 Dec 2014, 12:57 PM
Using ExtJS version 4.1

How do I refresh/reload a new component inside a container?
Here is the snippet of the container that I want to refresh

xtype : 'container',
width: 400,
layout: {align: 'stretch',type: 'vbox'},
padding: '0 10 0 10',
itemId : 'genericLoaderContainer',
items : [{
// this is the component that I want to reload/refresh/update/ or destroy then recreate on genericLoaderContainer Container
xtype : 'chart'
width: 400,
height: 300,
itemId : 'genericChartLoader',
store: 'MyStore',
axes : [
title: 'Data',
type: 'Numeric',
fields: ['XX'],
position: 'left'

title: 'Percentage',
type: 'Numeric',
fields: ['TOTAL'],
position: 'bottom',
minimum : 0,
maximum : 100
series : [
type : 'bar',
xField : 'MB',
yField : 'perc'

I also need to know what is the best approach for this one since I will be changing the type of the chart to be bar, stackable bar and line chart. Should I (1)refresh the genericLoaderContainer Container? Or should I (2)destroy genericChartLoader and try to add another item in the genericLoaderContainer Container?

Please provide how should I do it for cases (1) and (2).

Thanks in advance for any help.

15 Dec 2014, 9:40 AM
If I'm reading your inquiry correctly, it looks like you're trying to display different charts in a container.

Here's a fiddle demonstrating the approach I'd take.