PDA

View Full Version : Extending Advice



MeeMMeeM
24 Mar 2010, 5:46 AM
Hi all,

Heres the situation I am in...

I have tab panel which contains multiple tabs, each one of these tab contains a panel with a chart.

My idea was to create my own BaseComponent which extended panel, this component would contain a chart which would be set up on construction.

Since no update is the same for the charts (i.e. different params and services are needed to load the datastore) I was going to extend this BaseComponent.

I started off with:




namespace.baseGraphPanel = Ext.extend(Ext.Panel, {
title: 'Base Variance Graph',
split: true,
region: 'center',
width: 515,
constructor: function(config) {

items: [new Ext.chart.ColumnChart({
hideMode: 'offsets',
store: Ext.StoreMgr.lookup('DummyStoreTwo'),
url: "../../ext/resources/charts.swf",
xField: 'PricePointDate',
yAxis: new Ext.chart.NumericAxis({
title: '% Movement'
}),
})
]
namespace.baseGraphPanel.superclass.constructor.call(this, config
);
}
});

I checked through the forum and tried to increase my knowledge on how to reuse and extend components properly but got a little overwhelmed by everything. (Although there are lots of good advice!)

So my questions are really:

- How do I pass params into the component (i.e. xField and store to be used by the BaseComponent)
- How do I initialise a new object correctly such that new object <-extend of Base <-extend of Panel.

Sorry for all the questions.

Any advice or help is very much appreciated : )

MeeMMeeM

mschwartz
24 Mar 2010, 6:20 AM
var newPanel = new namespace.baseGraphPanel({
xField: whatever,
...
});


You can access xField in the constructor via config.xField.

MeeMMeeM
24 Mar 2010, 8:09 AM
Hi,

Thanks for the advice, but I still appear to be having problems, that chart is not showing in the tab.

My base class looks like this:



//
// Base Graph Panel
//
ns.baseGraphPanel = Ext.extend(Ext.Panel, {
title: 'Base Variance Graph',
split: true,
region: 'center',
width: 515,
xField: 'default',
store: 'DummyStoreTwo',
constructor: function(config) {

Ext.apply(config, {

items: [new Ext.chart.ColumnChart({

hideMode: 'offsets',
//layout: 'fit',
store: Ext.StoreMgr.lookup(config.store),
url: "../../ext/resources/charts.swf",
xField: config.xField,
yAxis: new Ext.chart.NumericAxis({
title: '% Movement'
}),
chartStyle: {
yAxis: {
zeroGridLine: { size: 1, color: 0xff0000 },
titleRotation: -90

},
legend:
{
label: 'single',
display: 'right',
font: { family: 'Tahoma', size: 9 }
}
}

})
]

});
ns.baseGraphPanel.superclass.constructor.call(this, config);
},
setXField: function(value) {
xField = value;

this.items.items[0].xField = value;
var t;
}
});


I extend this base and add an update method and the config for store and xfield




//
// Single graph to extend the base graph panel
//
ns.singleGraphPanel = Ext.extend(ns.baseGraphPanel, {
title: 'Single Graph',
split: true,
region: 'center',
width: 515,
xField: 'single',
store: 'DummyStoreTwo',
constructor: function(config) {

ns.singleGraphPanel.superclass.constructor.call(this, config);
},
update: function() {
Ext.StoreMgr.lookup('store').load();
}

});

Then I initialise this and place into my tab, but nothing is shown. (The update function calles the appropriate service though and data is returned).



var singleGraph = ns.singleGraphPanel({
id: 'SingleGraph'
});
I have had all this working before using a basic set up of a chart within a panel, i just wanted to improve my code by creating components.

Thanks again for the help..

MeeMMeeM

mschwartz
24 Mar 2010, 10:24 AM
Not sure what this does:

store: 'DummyStoreTwo'

And why you do this:



update: function() {
Ext.StoreMgr.lookup('store').load();
}

steffenk
24 Mar 2010, 10:59 AM
I never use constructor but initComponent.

more easy:


ns.baseGraphPanel = Ext.extend(Ext.Panel, {
... // public vars, can be overwritten

initComponent:function() {

// private vars
var chart = new Ext.chart.ColumnChart({...});

Ext.apply(config, {
items: [chart]

});

ns.baseGraphPanel.superclass.initComponent.apply(this, arguments);
},

// functions

onRender: function() {
ns.baseGraphPanel.superclass.onRender.apply(this, arguments);
}



});

// register xtype
Ext.reg('basegraphpanel', ns.baseGraphPanel);

and right, the store lookup shoud use the storeId, doesn't look like.

MeeMMeeM
25 Mar 2010, 12:31 AM
Hi,

Thanks for the replies people:

First mschwartz, the store naming was my fault, I was trying to simplify my code when posting it on here, I do use the correct store references in my actual code.

steffenk: Thanks for your post, the set up you have is almost the same as what I have decided to use, except that I use constructor instead with the config as there are parameters needed in the chart set up which I access through config.Param.

How would I do the same with initComponent and what would be the benefits?

Cheers

MeeMMeeM

steffenk
25 Mar 2010, 1:10 AM
it makes no difference, but the recommended is the initComponent. This works for all components in ExtJS.

There is a good compilation of patterns here (http://www.extjs.com/forum/showthread.php?p=259901#post259901).

MeeMMeeM
25 Mar 2010, 1:30 AM
How would I use the config using the initComponent? As I initialise the chart with params passed to the base?

Thanks for the help : )

MeeMMeeM

steffenk
25 Mar 2010, 1:36 AM
ns.baseGraphPanel = Ext.extend(Ext.Panel, {
chartParams: {},
...

initComponent:function() {

// private vars
var chart = new Ext.chart.ColumnChart(chartParams);
...

so you can pass your chartParams when using the component.

MeeMMeeM
25 Mar 2010, 2:10 AM
Brilliant, thank you, I'm finding some great information here!

I have yet another question, if I wanted to implement a existing function e.g. add() to add more items to the baseGraphPanel would I have to directly implement this?

steffenk
25 Mar 2010, 3:47 AM
there are many ways to rome ...

You can add a function inside the component which you can call from outside, like


ns.baseGraphPanel = Ext.extend(Ext.Panel, {
...
add: function() {
//do stuff
}
});

var a = new ns.baseGraphPanel ();
a.add({...});

mschwartz
25 Mar 2010, 5:17 AM
^^^ good advice, but I have taken to using capitalized names just in case the extjs developers decide to add a function to the class we're extending with the same function name.

Example: instead of

refresh: function() { ... }

I use:

Refresh: function() { ... }

I also don't end up making mistakes like overriding an existing member function that way.

steffenk
25 Mar 2010, 5:24 AM
yeah, good advice, add was just a dummy i would never use. I normally use names that won't be added ever like addNewItemsToChart or simular. I like to have good speaking names for better reading the code instead of c,p,r etc

mschwartz
25 Mar 2010, 5:25 AM
yeah, good advice, add was just a dummy i would never use. I normally use names that won't be added ever like addNewItemsToChart or simular. I like to have good speaking names for better reading the code instead of c,p,r etc

Somewhere, right now, someone on the ExtJS development team is now considering adding a function addNewItemsToChart to the container class.
:D

steffenk
25 Mar 2010, 5:27 AM
ROFL >:)