PDA

View Full Version : contentpanel with numeric id



d0uble_hel1x
11 Jun 2007, 7:51 AM
it seems that creating a contentpanel using numeric id can potentially break your gui when closing it. can anyone confirm this?

i have a contentpanel containing a grid. when double clicking it a panel is dynamically created using a field of a record as the id for the panel. everything seemed ok until when the record has a numeric data. when i closed the tab it completely wiped out the screen.

tryanDLS
11 Jun 2007, 9:03 AM
That's a pretty broad description and I would think we'd have to seem some real code first to know if it's a bug. I will say that numeric ids are not valid per the html4 spec, and it's possible this could be causing strange problems in some browsers. It's also possible that you have a case of reusing an id, creating multiple elements in the dom with the same id. Removing by that id can have unpredictable results b/c it's not unique.

d0uble_hel1x
11 Jun 2007, 11:03 PM
here's the sample. the behavior seems to persist on FF and IE.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="/res/libs/ext/resources/css/ext-all.css">
<title>Numeric Tab</title>
</head>
<body>
<div id='libs'>
<script language="javascript" type="text/javascript" src="/res/libs/ext/adapter/yui/yui-utilities.js"></script>
<script language="javascript" type="text/javascript" src="/res/libs/ext/adapter/yui/ext-yui-adapter.js"></script>
<script language="javascript" type="text/javascript" src="/res/libs/ext/ext-all-debug.js"></script>
</div>
<div id="content">
<div id="south"></div>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
var NumericTab = function(){

var layout;

function CreateLayout(){

layout = new Ext.BorderLayout(document.body,{
north: {
split:false,
initialSize: 35
},
center: {
autoScroll: true,
hideTabs : false,
closeOnTab: true
},
south: {
split:false,
initialSize: 30
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel(Ext.id(), {fitToFrame:true, autoCreate:true}));
layout.add('south', new Ext.ContentPanel('south', {title: '', closable: false, autoCreate:true}));
layout.restoreState();
layout.endUpdate();
}

var Plant,ds,cm;
function InitGridData(){
Plant = Ext.data.Record.create([
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'zone', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]);

ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'plants.xml'}),
reader: new Ext.data.XmlReader({
record: 'plant'
}, Plant)
});

cm = new Ext.grid.ColumnModel([
{header: "Common Name",dataIndex: 'common'}
,{header: "Light",dataIndex: 'light'}
,{header: "Price",dataIndex: 'price'}
,{header: "availDate",dataIndex: 'availDate'}
,{header: "indoor",dataIndex: 'indoor'}
,{header: "zone",dataIndex: 'zone'}
,{header: "Name",dataIndex: 'common'}
]);
cm.defaultSortable = true;

}

var ds,grid;
function CreateTab(){
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: '/plants.xml'}),
reader: new Ext.data.XmlReader({
record: 'plant'
}, Plant)
});

Ext.DomHelper.append('content', { tag:'div', id:'grid'},true)
grid = new Ext.grid.Grid('grid', {
ds: ds
,cm: cm
,selModel: new Ext.grid.RowSelectionModel({singleSelect:true}) //?
});

grid.on('rowdblclick', ShowDetails,this)
grid.render();

layout.beginUpdate();
layout.add('center', new Ext.GridPanel(grid, {title:'Grid'} ));
layout.endUpdate();
layout.restoreState();

ds.load();
}

function ShowDetails(grid, rowIndex, e){
var zone = grid.dataSource.data.items[rowIndex].data.zone

if (layout.findPanel(zone)){
layout.showPanel(zone) ;
return;
}
SpawnDetailsTab(zone)
}

function SpawnDetailsTab(zone){

var TabID = zone
var content
if (IsNumeric(zone)){
content='the GUI is now contaminated with numeric id. closing all tabs will wreck the screen.<br><br>' +
'Best practices : always prefix/suffix a non-controllable id'
}
else{
content='closing this tab is fine.'
}

var tab = new Ext.ContentPanel(zone, {title:zone, closable:true,autoCreate:true},content)

layout.beginUpdate();
layout.add('center', tab);
layout.restoreState();
layout.endUpdate();
}

function IsNumeric(strString)
{
var strValidChars = "0123456789";
var strChar;
var blnResult = true;

if (strString.length == 0) return false;
for (i = 0; i < strString.length && blnResult == true; i++)
{
strChar = strString.charAt(i);
if (strValidChars.indexOf(strChar) == -1)
{
blnResult = false;
}
}
return blnResult;
}

return{

Init : function(){
CreateLayout();
InitGridData();
CreateTab();
}
};

}();
</script>
<script language="javascript" type="text/javascript">
Ext.EventManager.onDocumentReady(NumericTab.Init, NumericTab, true);
</script>