PDA

View Full Version : Desktop Renderer + Ext.onReady(function() Help



vader1014
21 Apr 2011, 5:20 AM
Please help me. I am a beginner. I am using the sample desktop that was provided, and what I am trying to do is add the change in font color code that I found in the grid-plugins example.

What happens is that the grid will now open. I would greatly appreciate if someone could tell me what I was doing wrong.


/*!
* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.com/license
*/

Ext.onReady(function(){
// example of custom renderer function
function changemoney(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}



// Sample desktop configuration
MyDesktop = new Ext.app.App({
init :function(){

Ext.QuickTips.init();

},

getModules : function(){
return [
new MyDesktop.GridWindow()
];
},

// config for the start menu
getStartConfig : function(){
return {
title: 'NKD Group',
iconCls: 'user',
toolItems: [{
text:'Settings',
iconCls:'settings',
scope:this
},'-',{
text:'Logout',
iconCls:'logout',
scope:this
}]
};
}
});



/*
* Example windows
*/
MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
id:'grid-win',

init : function(){
this.launcher = {
text: 'Grid Window',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}

},

createWindow : function(){

var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
id: 'grid-win',
title:'Grid Window',
width:740,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,

layout: 'fit',
items:
new Ext.grid.GridPanel({
border:false,
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, renderer: changemoney, dataIndex: 'pctChange'}
]),

viewConfig: {
forceFit:true
},
//autoExpandColumn:'company',

tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
})
});
}
win.show();
}
});


});


// Array data for the grid
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am']
];

drian
21 Apr 2011, 5:41 AM
hmm, i think that what happens you your example is that the renderer function is outside the MyDesktop.GridWindow.

I think you can make it work in more ways:

1. declare it inside createWindow function

2. use it inline

renderer: function(val){....}

3. make the function global

Ext.changemoney = function(val){....}

and use it with renderer: Ext.changemoney