PDA

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



tony_tan
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.namespace("Ext.FlotPanel");

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


initComponent : function(){
Ext.FlotPanel.superclass.initComponent.apply(this, arguments);
this.addEvents(
"plotclick",
"plotselected",
"plothover"
);
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.cmpId).height(height);


if(this.data){
this.plot(this.data, this.options);
}
});
},

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

this.body.createChild({
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).unbind();

$("#"+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(){
this.plotObj.clearSelection();
},

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){
this.plotObj.setData(data);
},

setupGrid: function(){
this.plotObj.setupGrid();
},

draw: function(){
this.plotObj.draw();
},

getData: function(){
this.plotObj.setData();
},

getAxes: function(){
this.plotObj.getAxes();
},

getCanvas: function(){
this.plotObj.getCanvas();
},

getPlotOffset: function(){
this.plotObj.getPlotOffset();
}

});


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) {
//thisViewer.graphPanel.buildChart();
win.syncSize();
win.doLayout();
},
}
}).show();

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!

kaendsle
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.