PDA

View Full Version : A Grid Window in the Web Desktop



orangehairedboy
28 Nov 2007, 1:14 PM
Hi everyone. I'm starting my first project using extJS, and I'm trying to base everything off the sample code provided as this is a good starting point for me while I learn what everything is.

Anyway, I'm basing the code off the Web Desktop example, but I'm having a hard time getting a grid in a window to display the data from an XML call. Unfortunately as this is an intranet site I can't provide a link, but below is my code. I can tell you that the window does display correctly - it's just there is no data. I've also verified with Firebug that the XML request is firing and it is successfully retrieving the data (which is also below), but what happens (or doesn't happen) from there I have no clue. I've got over the code several times but I'm drawing a blank. I'm sure it's something really silly...

Here's the code for the window. The rest of the script is quite long, but the rest of the code works. It's just this one window. But, if anyone wants the full source, just ask.

Lewis



MyDesktop.ConfigurePortal = Ext.extend(Ext.app.Module, {
id:'config-portal',
init : function(){
this.launcher = {
text: 'Configure Portal',
iconCls:'cog',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('tab-win');
if(!win){
var ApplicationsCM = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
id:'id',
header:'Application ID',
dataIndex:'APPLICATION_ID',
width:100
},{
id:'name',
header:'Application Name',
dataIndex:'APPLICATION_NAME',
width:100
},{
id:'icon',
header:'Application Icon',
dataIndex:'APPLICATION_ICON',
width:50
}
]);
ApplicationsCM.defaultSortable = true;
var Application = new Ext.data.Record.create([
{name: 'APPLICATION_ID', type: 'float'},
{name: 'APPLICATION_NAME', type: 'string'},
{name: 'APPLICATION_ICON', type: 'float'}
]);
var ApplicationStore = new Ext.data.Store({
url: 'getXML.php',
reader: new Ext.data.XmlReader({
record: 'ROW'
}, Application),
sortInfo: {field:'APPLICATION_NAME',direction:'ASC'}
});
ApplicationStore.load();
win = desktop.createWindow({
id: 'config-portal',
title:'Configure Portal',
width:800,
height:600,
iconCls: 'settings',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items:
new Ext.TabPanel({
border:false,
activeTab:0,
items: [
new Ext.Panel({
id: 'applications',
title: 'Applications',
tabTip: 'Applications',
closable:false,
autoScroll:true,
border:false,
layout: 'fit',
items: [
new Ext.grid.GridPanel({
border:true,
ds: ApplicationStore,
cm: ApplicationsCM,
frame:true,
layout: 'fit',d
viewConfig:{
forceFit:true
},
tbar: [{
text: 'Add Application',
iconCls: 'application_add',
handler : function(){
window.open('abc');
}
}]
})
]
})
]
})
});
}
win.show();
}
});
Here's the XML that's returned. As this is a new application still in development, there's actually one row!



<DATA>
<ROW>
<APPLICATION_ID>1</APPLICATION_ID>
<APPLICATION_NAME>Homepage</APPLICATION_NAME>
<APPLICATION_ICON>6</APPLICATION_ICON>
</ROW>
</DATA>

28 Nov 2007, 2:05 PM
Hi and welcome to the extjs community.

I would suggest starting off simple - making the grid work in a div outside of the web desktop.

orangehairedboy
28 Nov 2007, 2:09 PM
Hi and welcome to the extjs community.

I would suggest starting off simple - making the grid work in a div outside of the web desktop.

I agree...which is why I made some other sample grids outside of the desktop when I started playing with ExtJS.

Your response confuses me...are you saying that you couldn't see any errors in my code so you are suggesting trying it in a div outside of the desktop to see if it will work?

28 Nov 2007, 3:06 PM
A quick glance - nothing popped out. When ever you're having issues try to isolate a problem by bringing it down to it's simplest form. IE a formpanel from a div - nothing else ;) this way you can easier debug the code and fix the problem(s). If it works there, it *should* work when you plug it into the desktop.

orangehairedboy
28 Nov 2007, 3:29 PM
Actually, through some rather tedious trial-and-error, I found the problem! The XmlReader class requires that the Content-type HTTP header be set. PHP's default is text/html, but it needs to be text/xml. I didn't even think of checking that because the scripts were just thrown together to make proof-of-concept demos.

For those of you experiencing the same problem, here's the PHP code to add to the TOP of your scripts (before any outputting to the browser is done):


header( "Content-type: text/xml" );

Thanks to those of you who looked over my code anyway.

28 Nov 2007, 3:39 PM
yes - that's a known issue. just an FYI, JSON is faster to parse than XML. If you can refactor your code to produce JSON data, you'll see better performance from EXT.

orangehairedboy
28 Nov 2007, 3:40 PM
Oh yeah, I plan on using JSON 100% - The examples I had that I was working from were XML so that seemed like a good starting point. Converting to JSON won't take but a couple of lines of code.