PDA

View Full Version : Problem Json + Grid in IE7 - Work properly with FF



marxan
27 Jun 2010, 11:58 PM
Hello,

I have a strange problem with IE7.

I load some datas with Json and display it in a grid. The code works properly with Firefox but when I load the same page in IE7, the grid does appear but there's no data inside.

Do I have to configure anything with the browser?

Any help would be appreciated.

Thanks,

Marxan

Animal
27 Jun 2010, 11:59 PM
You have a trailing comma somewhere either in your JSON or in your code.

marxan
28 Jun 2010, 1:27 AM
You have a trailing comma somewhere either in your JSON or in your code.


I don't see any trailing coma. Why would it work with FF and not IE?

Here is my code, if you could have a look.

Thanks.


/*!

* Ext JS Library 3.2.1

* Copyright(c) 2006-2010 Ext JS, Inc.

* licensing@extjs.com

* http://www.extjs.com/license

*/



Ext.onReady(function(){

//This function will be called on a succesful load, it can be used for debugging or perform on load events.


function testStore(st,recs,opts){

//console.info('Store count = ', store.getCount());

}



//This is our JSON record set which defines what kind of data will be present in the JSON passed back from our component.

var users = Ext.data.Record.create([

{name:'INSTANCEID',type:'int'},

{name:'STEP',type:'string'},

{name:'NAME',type:'string'},

{name:'VALUE',type:'string'},

{name:'SCOPE',type:'string'}

])

// create the Data Store

var store = new Ext.data.JsonStore({

totalProperty: 'DATASET',//This is how many total records are there in the set.

root: 'ROWS',//The Root of the data.

url: 'http://dev.intra.infso.cec.eu.int/Scripts/R3/project/iflow/clearcase/iFLOW3_LongTerm_duponao/INFSO_iFLOW3/Sources/components/toJSON.cfc',//Where we get it from

remoteSort: true,//We will sort server side

//Base Params are parameters passed in during the first call

baseParams
:{

method: 'getStuffA',

returnFormat: 'JSON',

start: '0',

limit: '50'

},

//We define the JSON Reader for the data. We also need to set the totalProperty, root and idProperty for the dataset here.

reader: new Ext.data.JsonReader({

totalProperty: 'DATASET',

root: 'ROWS',

idProperty: 'ID'

},users
),

//Fields read in

fields:[

'INSTANCEID','STEP','NAME','VALUE','SCOPE'

],

//We specify the listeners to be called during load or another one during loadexception. good for debugging purposes.

listeners
:{

load:{

fn: testStore
},

loadexception:{

fn:function(){

//console.log(arguments);

//console.info("Response Text?"+response.responseText);

//console.log("dgStore Message \n"+proxy+"\n"+store+"\n"+response+"\n"+e.message);

}

}

}

});

//We setup the Grid

var grid =new Ext.grid.GridPanel({

width: 750,

height: 500,

title: 'Users',

store: store,

trackMouseOver: true,

disableSelection: false,

loadMask: true,

stripRows: true,

collapsible: true,

// grid columns

columns:[

new Ext.grid.RowNumberer(),//This will do numbering on the grid for us

{

id: 'users',

header: "First Name",

dataIndex: 'STEP',

width: 125,

hidden: false,

sortable: true

},{

header: "Last Name",

dataIndex: 'NAME',

width: 125,

hidden: false,

sortable: true

},{

header: "Value",

dataIndex: 'VALUE',

width: 125,

hidden: false,

sortable: true

},{

header:"User Name",

dataIndex:'SCOPE',

width:125,

hidden:false,

sortable:true

}],

// paging bar on the bottom

bbar:new Ext.PagingToolbar({

pageSize:50,

store: store,

displayInfo:true,

displayMsg:'Displaying Records {0} - {1} of {2}',

emptyMsg:"No Records to display"

})


});


// render it

grid.render('grid');

// trigger the data store load

store.load();
});


JSON.CFC:

<cfcomponent output="false">

<cffunction name="getStuffA" access="remote" returnFormat="json" output="false">

<cfargument name="limit" default="50">

<cfargument name="start" default="1">


<cfset var arrUsers = ArrayNew(1)>

<!--- When going back to base state, ExtJS will make the function call with start set to 0. If this is the case
we set it to 1 --->
<cfset Arguments.start = Arguments.start + 1>

<cfquery name="selUsers" datasource="#application.myDb#" username="#application.username#" password="#application.password#">

SELECT

INSTANCEID, Step, Name, Value, Scope
FROM

WFL_INSTANCE_DATA
WHERE INSTANCEID = '25322'

</cfquery>

<!--- For the Array --->
<cfset i = 1>

<cfset end = ((Arguments.start) + arguments.limit)-1>


<cfloop query="selUsers"startrow="#Arguments.start#"endrow="#end#">

<cfset stcUsers = StructNew()>

<cfset stcUsers.INSTANCEID = #selUsers.INSTANCEID#>

<cfset stcUsers.Step = #Step#>

<cfset stcUsers.Name = #Name#>

<cfset stcUsers.Value = #Value#>

<cfset stcUsers.Scope = #Scope#>

<cfset arrUsers[i] = stcUsers>

<cfset i = i + 1>

</cfloop>

<cfset stcReturn = {rows=arrUsers,dataset=#selUsers.RecordCount#}>


<cfreturn stcReturn>
</cffunction>
</cfcomponent>

Animal
28 Jun 2010, 1:47 AM
How d'you manage to make your code SO unreadable?

Post it properly, and someone might look at it.

Asken
28 Jun 2010, 1:56 AM
marxan, what Animal in his own special way is trying to say is that you should please read this before posting

http://www.sencha.com/forum/showthread.php?66423-****-READ-ME-FIRST-****-Guidelines-FAQs-Resources-etc

You should use the code and html tags to make your code readable. Considering that this is your second post there is no reason for badgering you like that.

marxan
28 Jun 2010, 3:40 AM
Sorry, it seems to be a copy/paste problem... I did my best to put my code more readable with this editor... I hope it's better.

I think my problem comes from the toJSON.cfc my function should normally return a value with the json format (as specified in the function argument). But when I dump my return value, it display a struct on the screen.
Still don't understand why it works with FF.


/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/



Ext.onReady(function(){
//This function will be called on a succesful load, it can be used for debugging or perform on load events.


function testStore(st,recs,opts){
//console.info('Store count = ', store.getCount());
}



//This is our JSON record set which defines what kind of data will be present in the JSON passed back from our component.
var users = Ext.data.Record.create([
{name:'INSTANCEID',type:'int'},
{name:'STEP',type:'string'},
{name:'NAME',type:'string'},
{name:'VALUE',type:'string'},
{name:'SCOPE',type:'string'}
])
// create the Data Store
var store =new Ext.data.JsonStore({

totalProperty:'DATASET',//This is how many total records are there in the set.


root:'ROWS',//The Root of the data.


url: http://dev.intra.infso.cec.eu.int/Scripts/R3/project/iflow/clearcase/iFLOW3_LongTerm_duponao/INFSO_iFLOW3/Sources/components/toJSON.cfc',


remoteSort:true,//We will sort server side


//Base Params are parameters passed in during the first call


baseParams:{method: 'getStuffA',


returnFormat:'JSON',

start:'0',
limit:'50'


},



reader: new Ext.data.JsonReader({

totalProperty:'DATASET',

root:'ROWS',

idProperty:'ID'

},users



),


//Fields read in


fields:['INSTANCEID','STEP','NAME','VALUE','SCOPE'],



//We specify the listeners to be called during load or another one during loadexception. good for debugging purposes.


listeners


:{


load:{fn: testStore},


loadexception:{fn:function(){


//console.log(arguments);


//console.info("Response Text?"+response.responseText);


//console.log("dgStore Message \n"+proxy+"\n"+store+"\n"+response+"\n"+e.message);


}


}

}

});
//We setup the Grid
var grid =new Ext.grid.GridPanel({
width:750,


height:500,
title:'Datas',
store: store,
trackMouseOver:true,
disableSelection:false,
loadMask:true,
stripRows:true,
collapsible:true,

// grid columns
columns:[
new Ext.grid.RowNumberer(),//This will do numbering on the grid for us
{
id:'users',
header:"STEP",
dataIndex:'STEP',
width:125,
hidden:false,
sortable:true

},{
header:"NAME",

dataIndex:'NAME',
width:125,
hidden:false,
sortable:true
},{



header:"VALUE",
dataIndex:'VALUE',
width:125,
hidden:false,
sortable:true

},{

header:"SCOPE",

dataIndex:'SCOPE',

width:125,
hidden:false,
sortable:true

}],


// paging bar on the bottom
bbar:new Ext.PagingToolbar({
pageSize:50,
store: store,
displayInfo:true,
displayMsg:'Displaying Records {0} - {1} of {2}',
emptyMsg:"No Records to display"

})


});



// render it


grid.render('grid');
// trigger the data store load
store.load();
});



TOJSON.CFC

<cfcomponent output="false">


<cffunction name="getStuffA" access="remote" returnFormat="json" output="false">


<cfargument name="limit" default="50">


<cfargument name="start" default="1">


<cfsetvar arrUsers = ArrayNew(1)>


<!--- When going back to base state, ExtJS will make the function call with start set to 0. If this is the case


we set it to 1 --->


<cfset Arguments.start = Arguments.start + 1>


<cfqueryname="selUsers"datasource="#application.myDb#"username="#application.username#"password="#application.password#">

SELECT INSTANCEID, Step, Name, Value, Scope

FROM WFL_INSTANCE_DATA
WHERE INSTANCEID = '25322'




</cfquery>


<!--- For the Array --->


<cfset i = 1>


<cfset end = ((Arguments.start) + arguments.limit)-1>


<cfloopquery="selUsers"startrow="#Arguments.start#"endrow="#end#">


<cfset stcUsers = StructNew()>


<cfset stcUsers.INSTANCEID = #selUsers.INSTANCEID#>


<cfset stcUsers.Step = #Step#>


<cfset stcUsers.Name = #Name#>

<cfset stcUsers.Value = #Value#>

<cfset stcUsers.Scope = #Scope#>
<cfset arrUsers[i] = stcUsers>
<cfset i = i + 1>
</cfloop>



<cfset stcReturn = {rows=arrUsers,dataset=#selUsers.RecordCount#}>


<cfreturn stcReturn>

</cffunction>


</cfcomponent>

carol.ext
28 Jun 2010, 7:09 AM
Please use code tags (http://www.sencha.com/learn/Ext_Forum_Help#Advanced_mode), that is not any more readable...

and post your JSON, not the code that creates the JSON.

marxan
28 Jun 2010, 11:53 PM
Please use code tags (http://www.sencha.com/learn/Ext_Forum_Help#Advanced_mode), that is not any more readable...

and post your JSON, not the code that creates the JSON.



I finally found what was the problem.

When the component return the Json it was returning a comment (the comment was written like this: <-- the comment -->, it should be: <--- comment --->, in other words, that was a HTML comment instead of coldfusion comment ) from application.cfm.

I hope all these lost hours could help lost programmers...