View Full Version : Help to add a panel to a window.

13 Aug 2011, 10:27 AM
I am trying to extend the panel class (well, actually use a reusable panel class) to do graphing using jquery's flot. I want to put this panel inside a window. The panel is working fine, except one limitation, in that I have to specify height/width on both parent window and this panel (this is because flot have to know the width and height of a placeholder to plot), and the panel isn't exactly fit in the window, even though I used 'fit' layout.
My code is showing as follows:

//flot panel class:

Ext.FlotPanel = Ext.extend(Ext.Panel, {

initComponent : function(){
Ext.FlotPanel.superclass.initComponent.apply(this, arguments);
this.cmpId = 'placeholder'+this.id;

// adjust height
this.on('render', function(panel){
// getInnerHeight() doesn't work in onRender method. (It returns 1)
var height = panel.getInnerHeight()-panel.getFrameHeight();

this.plot(this.data, this.options);

onRender : function(){
Ext.FlotPanel.superclass.onRender.apply(this, arguments);

id: this.cmpId,
style: 'width:'+this.width+'px; height:'+this.height+'px;'

// binding flot events to this class

var fe = this.fireEvent.createDelegate(this);


$("#"+this.cmpId).bind("plotclick", function (event, pos, item) {
fe("plotclick", event, pos, item);

$("#"+this.cmpId).bind("plotselected", function (event, ranges) {
fe("plotselected", event, ranges);

$("#"+this.cmpId).bind("plothover", function (event, pos, item) {
fe("plothover", event, pos, item);

// wrapping flot API

plot: function(data, options){
this.plotObj = $.plot($("#"+this.cmpId), data, options);

clearSelection: function(){

setSelection: function(ranges, preventEvent){
this.plotObj.setSelection(ranges, preventEvent);

highlight: function(series, datapoint){
this.plotObj.highlight(series, datapoint);

unhighlight: function(series, datapoint){
this.plotObj.unhighlight(series, datapoint);

setData: function(data){

setupGrid: function(){

draw: function(){

getData: function(){

getAxes: function(){

getCanvas: function(){

getPlotOffset: function(){


Ext.reg("flotpanel", Ext.FlotPanel);

//window, show file:
this.window = new Ext.Window({
title: "Graph Viewer",
//html: graphHtml(this.url),
width: 680,
height: 380,
maximizable: true,
items: new Ext.FlotPanel({width: 650,
height: 350,});
layout: 'fit',
listeners: {
afterrender: function (win) {

Is there anyway I can automatically adjust the container window's size based on it's children panel' size ? What event handler I have to rewrite to achieve this ?

Any help would be great. Thanks a lot!

16 Aug 2011, 8:43 AM
Just a couple suggestions until someone more knowledgeable shows up:

- Try wrapping your code in CODE and /CODE tags with [BRACES]; it will be easier to read and preserve whitespace
- Have you tried using Highcharts (http://www.highcharts.com) instead of Flot? Highcharts charts resize dynamically and I have had no problem getting them to fit the way I like in any ExtJS component.
- The width and height of your window are each 30 pixels larger than the child component. Does this reflect the true padding, border, and window frame width? That seems like a lot to me. I usually specify only the width (for IE support) of my windows.