tellioglu
27 Oct 2007, 5:13 AM
Hi!
While trying to learn how to use templates I found a strange behaviour of MS IE 6. Just for testing purposes I tried to create a select element from HTML and append some option elements created from a template.
In the following code IE 6 does not create the option elements correctly. It does however create the nested li-elements as it should.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Ext JS Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import './ext-1.1.1/resources/css/ext-all.css';
</style>
<script type="text/javascript" src="./ext-1.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext-1.1.1/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = './ext-1.1.1/resources/images/default/s.gif';
Ext.namespace('Ext.Test');
Ext.Test = function() {
return {
init : function() {
var button = Ext.get('button');
button.on('click', Ext.Test.onButtonClick);
},
onButtonClick : function(event) {
var selectElement = Ext.DomHelper.insertAfter(
'test-para',
'<select id="select-operators" name="select-operators"></select>'
);
var template = new Ext.Template(
'<option value="{value}">{name:trim}</option>'
);
template.append('select-operators', {name: 'foo', value: 'bar'});
var selectElement = Ext.DomHelper.insertAfter(
'test-para',
'<ul id="ul-operators" name="ul-operators"></select>'
);
var template = new Ext.Template(
'<li>{value} : {name:trim}</li>'
);
template.append('ul-operators', {name: 'foo', value: 'bar'});
}
};
}();
Ext.EventManager.addListener(window, 'load', Ext.Test.init);
</script>
</head>
<body>
<h1>Ext JS Test 1</h1>
<form id="edit-form" method="post" >
<input id="button" type="button" value="Test"/>
<div id="test-para">test-paragraph</div>
</form>
</body>
</html>
I know that I could use a MasterTemplate, but maybe somebody could explain to me why the code is not working?
Thanks in advance,
Horst
While trying to learn how to use templates I found a strange behaviour of MS IE 6. Just for testing purposes I tried to create a select element from HTML and append some option elements created from a template.
In the following code IE 6 does not create the option elements correctly. It does however create the nested li-elements as it should.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Ext JS Test 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import './ext-1.1.1/resources/css/ext-all.css';
</style>
<script type="text/javascript" src="./ext-1.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext-1.1.1/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = './ext-1.1.1/resources/images/default/s.gif';
Ext.namespace('Ext.Test');
Ext.Test = function() {
return {
init : function() {
var button = Ext.get('button');
button.on('click', Ext.Test.onButtonClick);
},
onButtonClick : function(event) {
var selectElement = Ext.DomHelper.insertAfter(
'test-para',
'<select id="select-operators" name="select-operators"></select>'
);
var template = new Ext.Template(
'<option value="{value}">{name:trim}</option>'
);
template.append('select-operators', {name: 'foo', value: 'bar'});
var selectElement = Ext.DomHelper.insertAfter(
'test-para',
'<ul id="ul-operators" name="ul-operators"></select>'
);
var template = new Ext.Template(
'<li>{value} : {name:trim}</li>'
);
template.append('ul-operators', {name: 'foo', value: 'bar'});
}
};
}();
Ext.EventManager.addListener(window, 'load', Ext.Test.init);
</script>
</head>
<body>
<h1>Ext JS Test 1</h1>
<form id="edit-form" method="post" >
<input id="button" type="button" value="Test"/>
<div id="test-para">test-paragraph</div>
</form>
</body>
</html>
I know that I could use a MasterTemplate, but maybe somebody could explain to me why the code is not working?
Thanks in advance,
Horst