PDA

View Full Version : Weird Display Issues with Panels and Buttons



lukefowell89
31 Dec 2010, 3:09 AM
For a project I am currently working on I am making a window that can render a chart by right clicking on a grid on the page, choosing what chart is needed and choosing which grid columns to use as which axis. The fixed axis (category) can be chosen from a combo box and the variable axis (values) can be selected from a multiselectable grid so you can have a mutliple lines/bars on the chart.

My problem is that when I select a chart from the list for the first time, no button is displayed at the bottom to render the chart, but when I select any chart second, then the button then appears?

Also I can only render the options to render each chart once. I have 4 charts (pie, column, bar and line) I can select all of them once, but when I select them again it wont change the panel that contains the options and button.

Any ideas?


Ext.chart.Chart.CHART_URL = 'ext/resources/charts.swf';

chartWindow = Ext.extend(Ext.Window, {
constructor: function(config) {

this.axisStore = new Ext.data.SimpleStore({
storeId: 'axisStore',
fields: [
{name: 'id'},
{name: 'header'}
]
});

var chartStore = new Ext.data.ArrayStore({
fields: [
{name: 'chart_name'},
{name: 'chart_id'}
],
data: [['Pie Chart', 1],['Bar Chart', 2],['Column Chart', 3],['Line Chart', 4]]
});

var xAxisCombo = new Ext.form.ComboBox({
mode: 'local',
triggerAction: 'all',
name: 'xAxis',
valueField: 'header',
displayField: 'header',
store: this.axisStore
});

var yAxisCombo = new Ext.form.ComboBox({
mode: 'local',
triggerAction: 'all',
name: 'yAxis',
valueField: 'header',
displayField: 'header',
store: this.axisStore
});

var variableAxis = new Ext.ux.form.MultiSelect({
xtype: 'multiselect',
fieldLabel: 'Variable Axis',
store: this.axisStore,
style: {backgroundColor: '#ffffff'}
});

var chartTypes = new Ext.form.ComboBox({
mode: 'local',
valueField: 'chart_id',
triggerAction: 'all',
name: 'chartTypes',
displayField: 'chart_name',
store: chartStore,
listeners: {
select: function(selection,record,selectedIndex){
var chartType = selection.actualValue;
switch(chartType)
{
case 1:
chartcontrolwrap.removeAll();
chartcontrolwrap.add(piePanel);
chartcontrolwrap.doLayout();
break;
case 2:
chartcontrolwrap.removeAll();
chartcontrolwrap.add(barPanel);
chartcontrolwrap.doLayout();
break;
case 3:
chartcontrolwrap.removeAll();
chartcontrolwrap.add(colPanel);
chartcontrolwrap.doLayout();
break;
case 4:
chartcontrolwrap.removeAll();
chartcontrolwrap.add(linePanel);
chartcontrolwrap.doLayout();
break;
default:
console.log('Line');
}
}
}
});

function renderChart(charttype, cat, value){

switch (charttype) {
case 1:
var chart = {
xtype: 'piechart',
enableAnimation: true,
width: 410,
store: config.chartData,
dataField: cat.actualValue,
categoryField: value.actualValue,
extraStyle: {
legend: {
display: 'bottom',
padding: 5,
font: {
family: 'Tahoma',
size: 13
}
}
}
}
this.renderChart = true;
break;
case 2:
var variables = value.getValue();
if(variables.length > 1)
{
var chart = {
xtype: 'barchart',
enableAnimation: true,
width: 410,
store: config.chartData,
yField: cat.actualValue
}
var chart_series = [];
for(var i = 0; i <= variables.length-1; i++)
{
chart_series[i] = {
xField: variables[i],
type: 'bar',
displayName: variables[i]
}
}
chart.series = chart_series;
}
else
{
var chart = {
xtype: 'barchart',
enableAnimation: true,
width: 410,
store: config.chartData,
yField: cat.actualValue,
xField: variables[0]
}
}
this.renderChart = true;
break;
case 3:
var variables = value.getValue();
if(variables.length > 1)
{
var chart = {
xtype: 'columnchart',
enableAnimation: true,
width: 410,
store: config.chartData,
xField: cat.actualValue
}
var chart_series = [];
for(var i = 0; i <= variables.length-1; i++)
{
chart_series[i] = {
yField: variables[i],
type: 'column',
displayName: variables[i]
}
}
chart.series = chart_series;
}
else
{
var chart = {
xtype: 'columnchart',
enableAnimation: true,
width: 410,
store: config.chartData,
xField: cat.actualValue,
yField: variables[0]
}
}
this.renderChart = true;
break;
case 4:
var variables = value.getValue();
if(variables.length > 1)
{
var chart = {
xtype: 'linechart',
enableAnimation: true,
width: 410,
store: config.chartData,
xField: cat.actualValue
}
var chart_series = [];
for(var i = 0; i <= variables.length-1; i++)
{
chart_series[i] = {
yField: variables[i],
type: 'line',
displayName: variables[i]
}
}
chart.series = chart_series;
}
else
{
var chart = {
xtype: 'linechart',
enableAnimation: true,
width: 410,
store: config.chartData,
xField: cat.actualValue,
yField: variables[0]
}
}
this.renderChart = true;
break;
default:
Ext.Msg.alert('Error', 'Please choose a chart type');
this.renderChart = false;
}
if (this.renderChart) {
previewPane.add(chart);
previewPane.doLayout();
}
}


var previewPane = new Ext.Panel({
id: 'previewPane',
height: 330,
width: 450
});

var piePanel = new Ext.Panel({
id: 'piePanel',
width: 160,
height: 150,
border: false,
items: [
{xtype:'label', text:'Categories'},
new Ext.form.ComboBox({
mode: 'local',
width: 145,
triggerAction: 'all',
name: 'xAxis',
valueField: 'header',
displayField: 'header',
store: this.axisStore
}),
{xtype:'label', text:'Values'},
new Ext.form.ComboBox({
mode: 'local',
triggerAction: 'all',
name: 'yAxis',
width: 145,
valueField: 'header',
displayField: 'header',
store: this.axisStore
}),
new Ext.Button({
xtype: 'button',
text: 'Create Pie Chart',
style: {marginTop: '5px'},
handler: function() {
previewPane.removeAll();
var chartType = chartTypes.actualValue;
this.findParentBy(function(con,com){
if(con.id == 'piePanel')
{
var cat = con.items.items[3];
var value = con.items.items[1];
renderChart(chartType, cat, value);
}
});
}
})
]
});

var barPanel = new Ext.Panel({
id: 'barPanel',
width: 160,
height: 150,
border: false,
items: [
{xtype:'label', text:'Categories'},
new Ext.form.ComboBox({
mode: 'local',
width: 145,
triggerAction: 'all',
name: 'xAxis',
valueField: 'header',
displayField: 'header',
store: this.axisStore
}),
{xtype:'label', text:'Values'},
new Ext.ux.form.MultiSelect({
xtype: 'multiselect',
width: 145,
fieldLabel: 'Variable Axis',
store: this.axisStore,
style: {backgroundColor: '#ffffff'}
}),
new Ext.Button({
xtype: 'button',
text: 'Create Bar Chart',
style: {marginTop: '5px'},
handler: function()
{
previewPane.removeAll();
var chartType = chartTypes.actualValue;
this.findParentBy(function(con,com){
if(con.id == 'barPanel')
{
var cat = con.items.items[1];
var value = con.items.items[3];
renderChart(chartType, cat, value);
}
});
if (this.renderChart) {
previewPane.add(chart);
previewPane.doLayout();
}
}
})
]
});

var colPanel = new Ext.Panel({
id: 'colPanel',
width: 160,
height: 150,
border: false,
items: [
{xtype:'label', text:'Categories'},
new Ext.form.ComboBox({
mode: 'local',
width: 145,
triggerAction: 'all',
name: 'xAxis',
valueField: 'header',
displayField: 'header',
store: this.axisStore
}),
{xtype:'label', text:'Values'},
new Ext.ux.form.MultiSelect({
xtype: 'multiselect',
width: 145,
fieldLabel: 'Variable Axis',
store: this.axisStore,
style: {backgroundColor: '#ffffff'}
}),
new Ext.Button({
xtype: 'button',
text: 'Create Column Chart',
style: {marginTop: '5px'},
handler: function() {
previewPane.removeAll();
var chartType = chartTypes.actualValue;
this.findParentBy(function(con,com){
if(con.id == 'colPanel')
{
var cat = con.items.items[1];
var value = con.items.items[3];
renderChart(chartType, cat, value);
}
});
if (this.renderChart) {
previewPane.add(chart);
previewPane.doLayout();
}
}
})
]
});

var linePanel = new Ext.Panel({
id: 'linePanel',
width: 160,
height: 150,
border: false,
items: [
{xtype:'label', text:'Categories'},
new Ext.form.ComboBox({
mode: 'local',
width: 145,
triggerAction: 'all',
name: 'xAxis',
valueField: 'header',
displayField: 'header',
store: this.axisStore
}),
{xtype:'label', text:'Values'},
new Ext.ux.form.MultiSelect({
xtype: 'multiselect',
width: 145,
fieldLabel: 'Variable Axis',
store: this.axisStore,
style: {backgroundColor: '#ffffff'}
}),
new Ext.Button({
xtype: 'button',
text: 'Create Line Chart',
style: {marginTop: '5px'},
handler: function() {
previewPane.removeAll();
var chartType = chartTypes.actualValue;
this.findParentBy(function(con,com){
if(con.id == 'linePanel')
{
var cat = con.items.items[1];
var value = con.items.items[3];
renderChart(chartType, cat, value);
}
});
if (this.renderChart) {
previewPane.add(chart);
previewPane.doLayout();
}
}
})
]
});

var chartcontrolwrap = new Ext.Panel({
width: 160,
border: false,
layout: 'fit',
autoHeight: true,
autoDestroy: false
})

var controlPanel = new Ext.Panel({
region: 'west',
title: 'Form Options',
width: 160,
height: 200,
layout: 'vbox',
frame: true,
border: false,
autoDestroy: false,
defaults: {width: 145, style: {marginBottom: '5px'}},
items: [
{xtype: 'label', text: 'Chart Type:'},
chartTypes,
chartcontrolwrap
]
});

var chartPanel = new Ext.Panel({
region: 'center',
minWidth: 300,
border: false,
cls: 'chartPreviewBg',
items: previewPane
});

config = Ext.apply({
layout : 'border',
width : 640,
title : 'Create New Chart',
cls : 'chartWindow',
constrain : true,
height : 400,
resizable : false,
items : [controlPanel, chartPanel]
}, config);

chartWindow.superclass.constructor.call(this, config);

},

initComponent: function(){
chartWindow.superclass.initComponent.call(this, arguments);

var axisRecord = new Ext.data.Record.create([
{name:'id'},
{name:'header'}
]);

Ext.each(this.chartAxis.columns, function(column){
if(column.id != 'numberer')
{
var axis = new axisRecord(
{
id: column.id,
header: column.header
}
);
this.axisStore.add(axis);
}
},this);
},

render: function(){
chartWindow.superclass.render.apply(this, arguments);
},

close: function() {
notificationCenter.postNotification(D_CANVAS_SHOW_FILMS);
chartWindow.superclass.close.apply(this, arguments);
}
});

Ext.reg('chartwindow', chartWindow);

steffenk
31 Dec 2010, 6:39 AM
you have some problems in your code:
Do not mix up instancing objects and lazy instancing objects by xtype.

new Ext.Button({
xtype: 'button',


The order of your code also is wrong. You should define a var before use it.

Tip: use a better structure, create objects outside with namespace by extending their parent objects for reuse. This also make your objects smaller and more easy to structure and debug.