medusadelft
4 Aug 2007, 8:27 AM
When inserting a text at the cursor in the htmlEditor in IE6, all inserted text is added at the start, not at the (last) cursor position.
I've tried to reply to this thread (http://extjs.com/forum/showthread.php?t=7877), but as a normal user it is not possible.
I've tried 1.1RC1 and the new 1.1. I'm using windows 2000. In FF1.5 it's working.
Example code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="jsscripts/ext/yui-utilities.js"></script>
<script type="text/javascript" src="jsscripts/ext/ext-yui-adapter.js"></script>
<script type="text/javascript" src="jsscripts/ext/ext-all-debug.js"></script>
</head>
<body>
<div style="width:800px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Multi-column and labels top</h3>
<div id="form-ct2">
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
<br/>
<script language='JavaScript'>
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
// add a combobox to the toolbar
var arrData = [
['1','LOGIN_USERNAME'],
['2','LOGIN_PASSWORD'],
['3','URL_DOMAINNAME']
];
var store = new Ext.data.SimpleStore({
fields: ['refnr', 'mailcode'],
data : arrData
});
/*
* ================ Form 2 =======================
*/
var top = new Ext.form.Form({
labelAlign: 'top'
});
top.column(
{width:382}, // precise column sizes or percentages or straight CSS
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:225
}),
new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company',
width:225
})
);
top.column(
{width:372, style:'margin-left:10px', clear:true}, // apply custom css, clear:true means it is the last column
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:225
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:225
})
);
editor = new Ext.form.HtmlEditor({
id:'bio',
fieldLabel:'Biography',
width:750,
height:200
})
top.container({}, editor
);
top.addButton('Save');
top.addButton('Cancel');
top.render('form-ct2');
var combo = new Ext.form.ComboBox({
id: 'tester',
store: store,
displayField:'mailcode',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a mailcode...',
selectOnFocus: true,
forceSelection: true,
width:135
})
var tbCT = editor.getToolbar();
tbCT.add('-');
tbCT.addField(combo);
combo.on('change', function() {alert('changed');});
combo.on('select', function() {
if ((combo.getValue() != '') && (combo.getValue() != 'Select a mailcode...')) {
val = combo.getValue();
combo.setValue();
editor.insertAtCursor('%'+val+'%');
}
});
});
</script>
</body>
</html>
Any ideas are appreciated
I've tried to reply to this thread (http://extjs.com/forum/showthread.php?t=7877), but as a normal user it is not possible.
I've tried 1.1RC1 and the new 1.1. I'm using windows 2000. In FF1.5 it's working.
Example code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="jsscripts/ext/yui-utilities.js"></script>
<script type="text/javascript" src="jsscripts/ext/ext-yui-adapter.js"></script>
<script type="text/javascript" src="jsscripts/ext/ext-all-debug.js"></script>
</head>
<body>
<div style="width:800px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Multi-column and labels top</h3>
<div id="form-ct2">
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
<br/>
<script language='JavaScript'>
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
// add a combobox to the toolbar
var arrData = [
['1','LOGIN_USERNAME'],
['2','LOGIN_PASSWORD'],
['3','URL_DOMAINNAME']
];
var store = new Ext.data.SimpleStore({
fields: ['refnr', 'mailcode'],
data : arrData
});
/*
* ================ Form 2 =======================
*/
var top = new Ext.form.Form({
labelAlign: 'top'
});
top.column(
{width:382}, // precise column sizes or percentages or straight CSS
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:225
}),
new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company',
width:225
})
);
top.column(
{width:372, style:'margin-left:10px', clear:true}, // apply custom css, clear:true means it is the last column
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:225
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:225
})
);
editor = new Ext.form.HtmlEditor({
id:'bio',
fieldLabel:'Biography',
width:750,
height:200
})
top.container({}, editor
);
top.addButton('Save');
top.addButton('Cancel');
top.render('form-ct2');
var combo = new Ext.form.ComboBox({
id: 'tester',
store: store,
displayField:'mailcode',
typeAhead: false,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a mailcode...',
selectOnFocus: true,
forceSelection: true,
width:135
})
var tbCT = editor.getToolbar();
tbCT.add('-');
tbCT.addField(combo);
combo.on('change', function() {alert('changed');});
combo.on('select', function() {
if ((combo.getValue() != '') && (combo.getValue() != 'Select a mailcode...')) {
val = combo.getValue();
combo.setValue();
editor.insertAtCursor('%'+val+'%');
}
});
});
</script>
</body>
</html>
Any ideas are appreciated