PDA

View Full Version : Calling a grid defined in an external JS file



tlili
22 Jul 2009, 12:40 AM
Hello,

I need to call a grid defined in an external JS file.
this is the definition of the window in which the grid will be showed.



(function(src){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var desktop = MyDesktop.getDesktop();
var win = desktop.getWindow('tab-win');
if(!win){
win = desktop.createWindow({
id: 'tab-win',title:'Path',width:740,height:480,iconCls: 'bogus',shim:false,animCollapse:false,border:false,constrainHeader:true,layout: 'fit'
,items:[
{
xtype:'form',id:'monform',border:false,standardSubmit: true
,items: new Ext.TabPanel({
id: 'center-tab-panel',
region:'center',
deferredRender:false,
enableTabScroll:true,
activeTab:0,
items:[
{
title: 'Close Me',
closable:true,
autoScroll:true
},
{
title: 'Center Panel',
autoScroll:true
}]
}),
buttons: [
{
text: "Add Grid",
handler: function(){
Ext.Ajax.request({
url: 'create-grid.js',
success: function(response) {
var tp = Ext.getCmp('center-tab-panel');
tp.add(eval(response.responseText));
tp.doLayout();
tp.setActiveTab(tp.items.getCount() - 1);
}
});
}
}]

}]

});
}
win.maximize();
win.show();
})();

This is the definition of the grid: "create-grid.js"


(function(){
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];
// example of custom renderer function
function change(val){
if(val > 0){return '<span style="color:green;">' + val + '</span>';}
else if(val < 0){return '<span style="color:red;">' + val + '</span>';}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){return '<span style="color:green;">' + val + '%</span>';}
else if(val < 0){return '<span style="color:red;">' + val + '%</span>';}
return val;
}
// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,autoExpandColumn: 'company', autoFill: true,title:'Array Grid',
bbar: new Ext.PagingToolbar({
buttons: [{ text: "Click Me"}],
store: store,
pageSize: 25
})
});

grid.on('render', function(g) { g.getSelectionModel().selectFirstRow();});
return grid;
})();

the window is showed and when i click to the button "Add Grid", the grid doesn't appear
and i had the following error:
"Erreur : uncaught exception: [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: "file:///C:/project/ext/ext-base.js Line: 9"]"

What's wrong!!??
Please help me! :)

Condor
22 Jul 2009, 12:51 AM
Are you trying to load the create-grid.js from a different domain or from the local filesystem?

tlili
22 Jul 2009, 1:07 AM
When i load the create-grid.js from Apache server, the error message disappear but the gid is not showed (tested with FF,IE, Google chrome )

the JavaScript Console of Google Chrome gives:

XHR finished loading: "http://127.0.0.1/project/create-grid.js?_dc=12482529 (http://127.0.0.1/project/create-grid.js?_dc=1248252957651)".

tlili
22 Jul 2009, 2:15 AM
Help!, Help! Help! ..............Help!...

:)

Condor
22 Jul 2009, 2:41 AM
I've never used loaded javascript this way, but it probably should work.

Did you debug? What does Ext.decode(response.responseText) return?

tlili
22 Jul 2009, 4:14 AM
Thank'x Condor, but "Ext.decode(response.responseText)" gives the same result.
Can you give me an other way to load my grid :)

Thank you in advance

Condor
22 Jul 2009, 4:25 AM
You didn't answer my question:

Did you debug? What does Ext.decode(response.responseText) return?

tlili
22 Jul 2009, 5:36 AM
Excuse me!

the debug gives:
Get http://127.0.0.1/project/js/create-grid.js?_dc=1248269184270


(function(){
var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];
// example of custom renderer function
function change(val){
if(val > 0){return '<span style="color:green;">' + val + '</span>';}
else if(val < 0){return '<span style="color:red;">' + val + '</span>';}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){return '<span style="color:green;">' + val + '%</span>';}
else if(val < 0){return '<span style="color:red;">' + val + '%</span>';}
return val;
}
// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
stripeRows: true,autoExpandColumn: 'company', autoFill: true,title:'Array Grid',
bbar: new Ext.PagingToolbar({
buttons: [{ text: "Click Me"}],
store: store,
pageSize: 25
})
});

grid.on('render', function(g) { g.getSelectionModel().selectFirstRow();});
return grid;
})();
missing ) in parenthetical
http://127.0.0.1/project/ext/ext-all-debug.js
Line 6733

Condor
22 Jul 2009, 6:01 AM
I recall something about returning functions from eval not working in IE.

Could you try if this works:

eval(response.responseText);
tp.add(comp);
with in the create-grid.js file:

var comp = (function(){
...
})();

tryanDLS
22 Jul 2009, 6:26 AM
Please post in the correct forum - Examples is for posting working code.