PDA

View Full Version : question regarding namespace is undefined



Praveen Adivi
30 Nov 2011, 2:39 PM
Hi Guys, I am trying to use extjs 4's charts along with extjs 3.3. and I am getting an error saying,"namespace is undefined". I was wondering if one of you could kindly help me figure this error out. Thanks in advance. I am pasting my code in line

UI JavaScript....




function ARAgingChart(){

var chartStore;
var xField = null;
var yField = null;
var title = null; // Private Title varible for the Chart

var singleColor = false;

var chartHeight = 300;
var chartWidth = 450;
var chartRenderTo = "divChartLeadAnalysis";
var chartmade = false;

this.getChartMade = function(){
return chartmade;
}

this.makeChart = function(){
chartmade = true;
return Ext4.create('Ext4.chart.Chart',{
renderTo: chartRenderTo,
width: chartWidth,
height: chartHeight,

animate: true,
shadow: true,
store: ArAgingItemsStore,
theme: 'Category1',
axes: [{
type: 'Numeric',
position: 'left',
minimum: 0,
fields: yField,
label: {
font: '10px Arial'
}
},{
type: 'Category',
position: 'bottom',
fields: xField,
labelTitle: {
font: 'bold 10px Arial'
}
},{
type: 'Numeric',
position: 'top',
fields: yField,
title: title,
labelTitle: {
font: 'bold 10px Tahoma'
},
label: {
fill: '#FFFFFF',
stroke: '#FFFFFF'
},
axisStyle: {
fill: '#FFFFFF',
stroke: '#FFFFFF'
}
}
],
series:[{
type: 'column',
xField: xField,
yField: yField,
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get(xField) + ': ' + storeItem.get(yField));
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: yField,
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
renderer: function(sprite, record, attr, index, store) {
var color = ['rgb(80, 204, 204)',
'rgb(246, 194, 33)',
'rgb(148, 174, 10)',
'rgb(213, 125, 70)',
'rgb(177, 217, 248)',
'rgb(255, 170, 0)'];
if ( singleColor == true ){
color = color[index];
} else {
color = color[2];
}
return Ext.apply(attr, {
fill: color,
width: ((chartWidth*13)/100)
});
}
}]
});
}

/* Getter / Setters for Lead Analysis Chart */
this.setChartWidth = function(cWidth){
chartWidth = cWidth;
};

this.getChartWidth = function(){
return chartWidth;
};

this.setChartHeight = function(cHeight){
chartHeight = cHeight;
};

this.getChartHeight = function(){
return chartHeight;
};

this.setChartStore = function(cStore){
chartStore = cStore;
};
this.getChartStore = function(){
return chartStore;
};

this.setTitle = function(t){
title = t;
};

this.getTitle = function(){
return title;
};

this.setRenderTo = function(renderTo){

chartRenderTo = Ext.get(renderTo).dom;

};

this.getRenderTo = function(){
return chartRenderTo;
};

this.setSingleColor = function(sColor){
singleColor = sColor;
};

this.getSingleColor = function(){
return singleColor;
};

this.setXField = function(x){
xField = x;
};

this.getXField = function(){
return xField;
};

this.setYField = function(y){
yField = y;
};

this.getYField = function(){
return yField;
};
/*** Getter / Setter for this class ends here **/
}


store.js......





Ext.onReady
(
function ()
{
var records = new Ext.data.Record.
create(

[


{name: 'xValue', mapping : 'xValue'},
{name: 'yValue', mapping : 'yValue'}




]




ArAgingItemsStore=new Ext.data.Store({
remoteSort: true,
proxy: new Ext.ux.data.DwrProxy({
apiActionToHandlerMap : {
read : {

dwrFunction : FinanceAjax.getArAgingData,
getDwrArgsFunction : function(request) {
//String customer, String docNumber, String start,String index,String sort, String dir,Map<String, String> filters


var params = request.params;
var sort='';
var dir='';
var limit=20;
var start=0;


if(params!=null)
{
if(params.limit!=undefined&&params.limit!=null)
{
limit=params.limit;
}
if(params.start!=undefined&&params.start!=null)
{
start=params.start;
}
if(params.dir!=undefined&&params.dir!=null)
{
dir=params.dir;
}
if(params.sort!=undefined&&params.sort!=null)
{
sort=params.sort;
}
}



return [cID];
}

}
}
}),
reader:new Ext.data.JsonReader({
totalProperty:'totalRecords',
root : 'objectsToConvertToRecords',
fields : this.records
})
});
ArAgingItemsStore.load();





}
);



Connecting code....



var lAnalysisChart="";
Ext.onReady(function(){
var arAgingItemsStore = ArAgingItemsStore;
var fieldName = "xValue";
var fieldStatus = "yValue";


// Lead Analysis Chart
lAnalysisChart = new ARAgingChart();


var date=new Date();
var day=date.getDay();
var month=date.getMonth();
var fullYear=date.getFullYear();
lAnalysisChart.setChartStore(arAgingItemsStore);
var label = "A/R aging as on "+ month+" - "+day+" - "+fullYear;
lAnalysisChart.setTitle(label);
lAnalysisChart.setRenderTo("divChartLeadAnalysis");
lAnalysisChart.setSingleColor(false);
lAnalysisChart.setXField(fieldName);
lAnalysisChart.setYField(fieldStatus);


/*lAnalysisChart.setChartWidth(300);
lAnalysisChart.setChartHeight(230);*/
// Load Store
arAgingItemsStore.on('load', function(arAgingItemsStore, records,
options) {
lChartRecords = records;
}, this);
lAnalysisChart.makeChart();
chart=lAnalysisChart.getChartMade();
chart.render("divChartLeadAnalysis");
});
var chart;

mitchellsimoens
1 Dec 2011, 9:01 AM
I have moved this to the Ext JS 4 forum. Please post in the appropriate forum