View Full Version : renderTO

8 Oct 2010, 5:07 AM
Hi i have one Pie chart and i want to show it in one Panel.
I am not able to render it pls help

8 Oct 2010, 5:09 AM
As in every example and in the docs:

layout: 'fit',
items: myChart

8 Oct 2010, 6:49 AM
i am seeing examples of charts.
every where they are using renderTo:'container'
can you pls tell me where this container is defined.

8 Oct 2010, 6:52 AM
Do not use renderTo inside an Ext container (like Panel). Use the method Animal described.

You should only use renderTo if you want to render a component in existing HTML (not generated by Ext). In the example you mentioned "container" is the id of a <div>.

8 Oct 2010, 6:55 AM
i am opening js files using openTab function. i dont have any html tags defined in js file. i only have panels. which are beign opened in tabs.


8 Oct 2010, 7:22 AM
I have tried what Animal have suggested. but the chart is not visible in panel, i am using JsonStore for data.
Here is my code
var store1 = new Ext.data.JsonStore({

var chart = new Ext.chart.LineChart({
store : store1,

var panel = new Ext.Panel({


8 Oct 2010, 7:33 AM
I have tried what Animal have suggested but chart is not visible, I am using JsonStore for data

var store1 = new Ext.JsonStore({
data : [

var chart = new Ext.chart.LineChart({
store : store1,
xField : 'month',
yField : 'sales'

var panel = new Ext.Panel({
title: 'Chart',
closable : true,
collapsible : true,
autoScroll : true,
flex : 1,
layout : 'fit',
items : chart

8 Oct 2010, 7:34 AM
What Container houses "panel"?

8 Oct 2010, 7:35 AM
And this panel is supposed to be a tab in the tabpanel? Then SPECIFY it as one of the items of the tabpanel.

10 Oct 2010, 5:27 AM
@Animal and @Condor
this is standalone js file. i am returning this panel at the end of file. (return panel).
am i supposed to put this panel in another panel and return that??
in general i am having one large panel that can contain other panels, formpanels, grids, tab panel etc and returning the panel.

i am having one index.jsp having intial page linked to it. this page opens when user loads the url. and all the pages are connected to this first page using ipenTab which opens new js file in new tab. in my js files i dont have any html tags just one large panel having other items in it.

10 Oct 2010, 6:23 AM
sorry its openTab not ipenTab

10 Oct 2010, 8:06 AM
Open .js file in a tab? Please tell me you are not using autoLoad and renderTo!

If you want to open a .js file in a tab you should be using something like LiteRemoteComponent.

But loading every page separately will probably make your page slower instead of faster in the end. It's better to load all javascript (concatenated, minified and gzipped) up front and only render stuff when required.

10 Oct 2010, 7:56 PM
yes i am loading all the javascript in my index.jsp.

let say in my page i have one panel. and within this panel i have two panels p1 and p2. p1 contains one formPanel and p2 contains one chart. i can get form shown in p1 but how to render this chart in p2.... pls guide me

11 Oct 2010, 2:02 AM
YOU have to decide how multiple child Components within a Panel are to be arranged.

ExtJS offers Layout Managers to perform rendering and arrangement of the child Components, but you must design your app with requirements in mind, and then choose a layout to do what you want.

We do not know what you want.

11 Oct 2010, 2:34 AM
i am using vbox layout in panel and items are p1(formpanel) and p2(panel with chart)

11 Oct 2010, 2:50 AM
OK, you want them arranged one above the other.

So configure each with flex: 1

Configure their owning layout with align: 'stretch' so that they occupy full width and Robert's your dad's brother.

13 Oct 2010, 12:57 AM
finally i got that working . i have put this link in my index.jsp.
Ext.chart.Chart.CHART_URL = '..(path)..../charts.swf'
and the charts came up.
it was working with internet connected and not when disconnected(I read that It uses a Y API for charts)
so i have put this link and it worked.

@Animal and @Condor
Thanks for your reply