View Full Version : Howto create a div in a panel?

25 Oct 2012, 4:07 AM
I have a panel and I would like to render 3rd party js into the items of the panel.
But I need to render the js into a div (not class) like this:

<div id='externjs' height='460' width='400' </div>

Here is my code so far:

Ext.define("abc.view.overview", {
extend : "Ext.form.Panel",
name : 'overview',
layout : 'column',
bodyPadding : '10 0 10 00',
tbar : [{
xtype : 'splitbutton',
text : 'button1',
iconCls : 'add16',
menu : [{
text : 'USA'
}, '-', {
xtype : 'splitbutton',
text : 'button2',
iconCls : 'button2cls',
menu : [{
text : 'Automotive'
}, '-', {
xtype : 'splitbutton',
text : 'project',
iconCls : 'projectButton'
items : [{
title : 'Overview',
minHeight : '460',
width : '400',

//create the dive here??


How can I add an div element so my js code (which is located in the controller) gets rendered into the items of the panel?


25 Oct 2012, 4:15 AM
you can use the html config of panel where you can put your div:


But according to comments, it doesnt seem to be working in 4.1.x. It works in 4.0.7.

James Goddard
25 Oct 2012, 4:37 AM
If you need to pass a div so some other javascript library can render to just use the body element. (Body of the panel, not html body.) It is a div already:


If you need to customize the div you can do so in the config with bodyCls or bodyStyle.

25 Oct 2012, 6:17 AM
Thanks for your answers. But I have problems to access the panel body...

Iam trying to use amCharts and this is the call:


Ok, so instead the div chartContainer I want wo use the panels body.
Normally I get the panel with:

var analyse = Ext.ComponentQuery.query('analyse');

But I think this is not corrent... how can I get the panel body then?

Its working now! I had to do this:

var analyse = Ext.ComponentQuery.query('analyse');
but after that, I could see is in the body but

bodyStyle : {
height: '460',
width: '400'

solved the problem.
Again, thanks for your help!

3 Mar 2015, 4:25 PM
AmCharts for now new module.