PDA

View Full Version : '&' character and array grid



rahulmca1@gmail.com
28 Jun 2007, 6:59 PM
Hi,

I am using array grid example But the problem I am facing is

If a name has character '&' like 'Public&ation' names are shown truncated as 'Public' in Ie but is working fine in firefox.

var myData = [
['Public&ation',71.72,0.02,0.03,'9/1 12:00am'],
['Al&123',29.01,0.42,1.47,'9/1 12:00am']
];

IS it a known issue. If so what would be the workarround.

Thanks
With regards

mystix
28 Jun 2007, 7:07 PM
have you tried the online array grid demo (http://extjs.com/deploy/ext/examples/grid/array-grid.html)?

there are company names in there like 'Johnson & Johnson' and 'AT&T Inc' which display fine in IE6 / 7.

Are you doing anything special in your renderer?

rahulmca1@gmail.com
28 Jun 2007, 8:18 PM
Yes I tried it on online array grid demo

The names like 'AT&T Inc' and 'Johnson & Johnson' are shown properly but try replacing
with 'Public&ation' and see the result.
Grid will show it as 'Public' thus truncating '&ation'.

mystix
28 Jun 2007, 8:56 PM
still don't see the problem in IE. i'm running Ext 1.0.1a.

attached is a full test case (drop it into your ext root folder).
<html>
<head>
<title>Public&ation. Test</title>

<link rel='stylesheet' href='resources/css/ext-all.css'>

<script src='adapter/yui/yui-utilities.js'></script>
<script src='adapter/yui/ext-yui-adapter.js'></script>
<script src='ext-all-debug.js'></script>

<script>
var Example = {
init : function(){
var myData = [
['Public&ation',71.72,0.02,0.03,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();

function italic(value){
return '<i>' + value + '</i>';
}

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;
}

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;
}

var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.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'}
]);

var grid = new Ext.grid.Grid('grid-example', {
ds: ds,
cm: colModel,
autoExpandColumn: 'company',
listeners: {
cellclick: function(grid, row, col, e) { // onclick handler for Delete icon
if (col == 5 && e.getTarget('.edit-icon', 1, true)) {
FMS.ItemBox.show(grid.getDataSource().getAt(row));
}
}
}
});

var layout = Ext.BorderLayout.create({
center: {
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');
grid.render();
grid.getSelectionModel().selectFirstRow();
}
};
Ext.onReady(Example.init, Example);
</script>
</head>
<body>
<div id="grid-panel" style="position:absolute;top:20px;left:100px;width:600px;height:100px;">
<div id="grid-example"></div>
</div>
</body>
</html>
(note: the test case is merely a clone of the online demo with a reduced dataset containing company names with ampersands.)

and a screenshot from my desktop:
http://img133.imageshack.us/img133/2002/publicationhv8.png

rahulmca1@gmail.com
28 Jun 2007, 9:43 PM
Yes u are right this is no longer a problem in 1.0

I am using .33 version.

/*
* yui-ext
* Copyright(c) 2006, Jack Slocum.
*/

var Example = {
init : function(){
// some data yanked off the web
var myData = [
['Public&ation',71.72,0.02,0.03,'Public&ation'],
['Al& ',29.01,0.42,1.47,'9/1 12:00am'],
['Alt&riaGroupInc',83.81,0.28,0.34,'9/1 12:00am']

];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);

// example of custom renderer function
function italic(value){
return '<i>' + value + '</i>';
}

// example of custom renderer function
function change(val, suffix){
suffix = suffix || '';
if(val > 0){
return '<span style="color:green;">' + val + suffix + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + suffix + '</span>';
}
return val;
}
// example of custom renderer function
function pctChange(val){
return change(val, '%');
}

// example of custom renderer function, this hideous code was grabbed off the web
function money(mnt) {
mnt -= 0;
mnt = (Math.round(mnt*100))/100;
mnt = (mnt == Math.floor(mnt)) ? mnt + '.00' : ( (mnt*10 == Math.floor(mnt*10)) ? mnt + '0' : mnt);
return "$" + mnt;
}

// sortTypes provide support for custom sorting comparison functions
// not needed for this table but here for demonstration
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Company", width: 200, sortable: true, sortType: sort.asUCString},
{header: "Price", width: 75, sortable: true, renderer: money},
{header: "Change", width: 75, sortable: true, renderer: change},
{header: "% Change", width: 75, sortable: true, renderer: pctChange},
{header: "Last Updated", width: 85, sortable: true, renderer: italic}
]);

// create the Grid
var grid = new YAHOO.ext.grid.Grid('example-grid', dataModel, colModel);
grid.render();

grid.getSelectionModel().selectFirstRow();
}
}
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);



I know u might not be interested in tring this out.

Anyhow thanks.

Plaining to move to 1.0 or should I wait for 2.0 version to be released.


Thanks
With regards

mystix
28 Jun 2007, 10:34 PM
woah... 0.33... I don't think it's being supported anymore.

you should consider moving to Ext 1.0.1a [stable] (http://extjs.com/deploy/ext-1.0.1a.zip) or Ext 1.1 [beta 2] (http://extjs.com/deploy/ext-1.1-beta2.zip) first. Ext 2.0 won't be out so soon.

also, you might need to do a little reading up on the changes to the Grid before migrating your 0.33 code to the new 1.x codebase.
A good starting point imho would be this link (http://extjs.com/forum/showthread.php?t=2416).


[edit 1]
Just for the fun of it i tried the array grid example in yui-ext 0.33, and yes it's an IE problem.
IE seems to think any text string beginning with an ampersand is a HTML entity (for e.g. &amp; ).
In your case it thought "&ation" was the start of some unterminated HTML entity.
How it was solved... well.. i haven't had time to dig around, so i'll leave it as an interesting exercise for you if / when migrating the code.
(just a tip, you can download the free IE Developer Toolbar (http://www.microsoft.com/downloads/details.aspx?FamilyID=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en) and use it to inspect the DOM in IE)

[edit 2]
These cheat sheets (http://extjs.com/forum/showthread.php?t=2584&highlight=cheat+sheet) might come in handy too. they haven't been updated since the 1.0 build though.
The Firebug (http://www.getfirebug.com/) debugger for FF is also another useful developer tool.

cluettr
5 Jul 2007, 4:48 PM
See this thread: http://extjs.com/forum/showthread.php?p=44128

Similar issue...

mystix
6 Jul 2007, 12:52 AM
yours is an XML issue. @rahulmca1's is a html issue.

already replied in the other thread (http://extjs.com/forum/showthread.php?p=44128), so i'll summarise in here.

in short, & (ampersand) is not a valid XML character.
it is one of 5 predefined entity references in XML (refer to W3Schools - XML CDATA (http://www.w3schools.com/xml/xml_cdata.asp)).