PDA

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



kodak
25 Oct 2012, 4:07 AM
Hi!
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?

Thanks!

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

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-cfg-html

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:



panel.body.dom


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

kodak
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:

chart.write('chartContainer');

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?

Edit:
Its working now! I had to do this:
controller:

var analyse = Ext.ComponentQuery.query('analyse');
chart.write(analyse[0].body.dom);
but after that, I could see is in the body but


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

solved the problem.
Again, thanks for your help!

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

https://github.com/VladimirCacicArapovic/AmChartsExtjs5