PDA

View Full Version : Quick Question: Contents of FormPanel with Layout: Fit?



antonye
23 Jul 2010, 5:03 AM
Hello all.


I'm having trouble getting a panel to work with the items that I want to put into it. It's probably some really simple technical reason, but I want to understand the issue more.


I have a FormPanel with uses the config of layout: fit to contain a couple of grid panels right now. This works fine, and I have a whole load of functionality around re-sizing the panels and so on.


I have started to build another tab in my application, and this time I want to reuse the same FormPanel to display another grid and then a load of charts (pie, graph, etc) below it.


The first panel with my grid in it, displays fine, but I am getting an error ("this.el is null") when I try to add a chart directly into the second panel. This seems to work with grids, so why not with charts?


I think I'm not "containing" my object properly, and really need some guidance on the containers I need to use to house my graph components.


So at the moment it looks like this:



Ext.TabPanel ->
Ext.FormPanel ->
- Ext.grid.GridPanel (works fine!)
Ext.FormPanel ->
- Ext.chart.pieChart (fail!)


I've also tried:



Ext.TabPanel ->
Ext.FormPanel ->
- Ext.grid.GridPanel (works fine!)
Ext.FormPanel ->
Ext.FormPanel ->
- Ext.chart.pieChart (fail!)

Ext.TabPanel ->
Ext.FormPanel ->
- Ext.grid.GridPanel (works fine!)
Ext.FormPanel ->
Ext.Panel ->
- Ext.chart.pieChart (fail!)

...and some debugging...



Ext.TabPanel ->
Ext.FormPanel ->
- Ext.grid.GridPanel (works fine!)
Ext.FormPanel ->
Ext.Panel ->
- Ext.form.frameSet (fail!)





Ext.TabPanel ->
Ext.FormPanel ->
- Ext.grid.GridPanel (works fine!)
Ext.FormPanel ->
Ext.Panel ->
- Ext.box.html (fail!)




So I'm looking for a bit of guidance here on how to correctly lay out my components so that I can encapsulate a pie chart inside a *something* inside my FormPanel.


Thanks!

Condor
23 Jul 2010, 6:02 AM
Can you also post the layouts you used for the various containers?

antonye
23 Jul 2010, 6:25 AM
Some of this has been hacked about to remove unrelated code, but you should see enough to understand where I'm going wrong!!

Some notes: our tabPanel starts with (in this example) one enabled panel and 3 disabled (unbuilt) ones. Once some data has been entered and processed, the 3 panels are enabled. I have no issues with the other two panels, they work fine.

application is my outer TabPanel
formCharts is my FormPanel to hold my collection of panels
assetAllocationGrid is an Ext.grid.GridPanel (not incuded here) which works/displays fine
chartCharacteristic is an Ext.FormPanel to hold my pieChart component
cCharacteristicChart is an Ext.Panel which will hold multiple items, including the Ext.chart.PieChart and later on a table of the data, and so on.

I have componentised these as I want to create multiple instances of chartCharacteristic (ie, multiple panels in my layout) which hold different data. Some of this is still Work In Progress as well :-)

Hope this explains!


Thanks,



application = Ext.extend(Ext.TabPanel, {

constructor: function(config){
var _config = {
id: config.id,
activeTab: 0,
height: 700,
autoWidth: true,
autoScroll: false,
border: false,
plain: true,
plugins: [new Ext.ux.plugins.FitToParent('main')],
items:[
new formCharts(
{
id: 'charts',
parent: this,
autoScroll: true
}
)
]
}
application.superclass.constructor.apply(this, [_config]);
}
};
formCharts = Ext.extend(Ext.FormPanel, {

constructor: function(config) {
// local variables for panel config
var parent = config.parent;
var myself = this;
config = {
id: config.id,
border: false,
layout: 'fit',
border: false,
padding: 2,
items: [
new assetAllocationGrid({
id: 'assetAllocation',
parent: this,
iconCls: 'icon-portfolio',
title: 'Asset Allocation',
height: 150,
store: allocationStore
}),
{
border:false,
anchor:'right',
height: 2
},
new chartCharacteristic({
id: 'chartActive',
parent: this,
iconCls: 'icon-portfolio-charts',
title: 'Active Management',
height: 200
})
],
tbar: [
'->',
'-',
{
xtype: 'button',
iconCls: 'icon-portoflio-show-all',
handler: function() {
// expand all panels
Ext.getCmp('assetAllocation').expand();
Ext.getCmp('chartActive').expand();
myself.doLayout();
}
},
'-'
]
}
formCharts.superclass.constructor.apply(this, [config]);
}
});
chartCharacteristic = Ext.extend(Ext.FormPanel, {

constructor: function(config) {
var _config = {
id: config.id,
title: config.title,
parent: config.parent,
iconCls: config.iconCls,
titleCollapse: true,
collapsible : true,
border:true,
autofill: true,
height: 200,
items: [
new cCharacteristicChart({
id: 'chartActive2',
parent: this,
height: 200,
data: [
{range: 'Low', value: 20},
{range: 'Medium', value: 30},
{range: 'High', value: 50}
]
})
]
}
chartCharacteristic.superclass.constructor.apply(this, [_config]);
}
});
cCharacteristicChart = Ext.extend(Ext.Panel, {

constructor: function(config) {
// create internal store and load data from config
this.storeCharacteristics = new Ext.data.ArrayStore({
fields:[
{name: 'range'},
{name: 'value', type:'float'}
]
});
// initial load
if (config.data) {
this.LoadData(config.data);
};

// create Pie Chart
var chartPie = new Ext.chart.PieChart({
store: this.storeCharacteristics,
categoryField : 'range',
dataField: 'value',
seriesStyles: {
colors: [
'#dbf2fd', // low
'#b1e3fa', // med
'#00a4e8' // high
]
},
extraStyle: {
legend: {
display: 'left',
padding: 3,
font: {
family: 'Tahoma',
size: 10
}
}
},
tipRenderer: function(chart, record, index) {
return record.data.range;
}
});
// config items for this custom component
var _config = {
id: config.id,
title: config.title,
parent: config.parent,
iconCls: config.iconCls,
titleCollapse: false,
collapsible : false,
border: true,
autofill: true,
anchor: config.anchor,
autoHeight: false,
height: 200,
items: [chartPie]
}

cCharacteristicChart.superclass.constructor.apply(this, [config]);
},

LoadData: function(Data) {
// clear then reload data for chart [{range,value}...]
this.storeCharacteristics.removeAll(true);
this.storeCharacteristics.loadData(Data, true);
}

});

Condor
23 Jul 2010, 6:33 AM
Walk through your layout and check:
1. If all containers have a layout.
2. If all components inside the layout are sized (have a fixed width and height or autoHeight:true or are sized by the container).

I see a lot of components that have a fixed height, but no fixed width nor is the width managed by the container.
I recommend adding anchor:'0' (and not 'right') to those components.

antonye
23 Jul 2010, 6:54 AM
Thanks for your hints.

At the moment I get the attached screenshot, so I know that *most* of it is working (re: the width/height) but I just need pointers on what I should be checking for as I'm not familiar enough to find it without lots of head scratching and frustration!!