PDA

View Full Version : [OPEN] [#205] HtmlEditor Font Color Change on Bullet List



stratadev
Apr 12, 2013, 4:06 PM
Hi, I am using IE 9 with ExtJS version 4.2.0.663 and Ext.net version 2.2.0. Follow the steps below to see the issue:

In the window:
1. Click 'Bullet List' option to insert a bullet list
2. Without clicking in the text area, change the font color to yellow
3. Click next to the inserted bullet and type.
4. Notice the text isn't displayed in yellow
5. Close the window and repeat the steps above for the panel, notice it is not reproducible.


<html>
<head id="Head1" runat="server">
<title>Test Page </title>
<style type="text/css">

</style>
</head>
<body>
<script type="text/javascript">

</script>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
DisableViewState="true" />
<ext:Viewport runat="server" ID="asd">
<Items>
<ext:Panel runat="server" Height="500" Width="700" Layout="FitLayout">
<Items>
<ext:HtmlEditor runat="server">
</ext:HtmlEditor>
</Items>
</ext:Panel>

<ext:Window runat="server" Height="500" Width="700" Layout="FitLayout" Constrain="true" ID="myWin">
<Items>
<ext:HtmlEditor runat="server" RenderTo="myWin">
</ext:HtmlEditor>
</Items>
</ext:Window>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Daniil
Apr 12, 2013, 4:41 PM
Hi @stratadev,

Thank you for the report. It appears that the issue is reproducible with pure ExtJS. So, I reported to Sencha.
http://www.sencha.com/forum/showthread.php?261195

stratadev
Apr 12, 2013, 4:57 PM
Thanks @Daniil,

I have overrode some code to make it work for windows (look for //HACK) :


Ext.form.field.HtmlEditor.override({
getToolbarCfg: function () {
var me = this,
items = [], i,
tipsEnabled = Ext.quickTipsActive && Ext.tip.QuickTipManager.isEnabled(),
baseCSSPrefix = Ext.baseCSSPrefix,
fontSelectItem, undef;

function btn(id, toggle, handler) {
return {
itemId: id,
cls: baseCSSPrefix + 'btn-icon',
iconCls: baseCSSPrefix + 'edit-' + id,
enableToggle: toggle !== false,
scope: me,
handler: handler || me.relayBtnCmd,
clickEvent: 'mousedown',
tooltip: tipsEnabled ? me.buttonTips[id] || undef : undef,
overflowText: me.buttonTips[id].title || undef,
tabIndex: -1
};
}


if (me.enableFont && !Ext.isSafari2) {
fontSelectItem = Ext.widget('component', {
itemId: 'fontSelect',
renderTpl: [
'<select id="{id}-selectEl" class="' + baseCSSPrefix + 'font-select">',
'</select>'
],
childEls: ['selectEl'],
afterRender: function () {
me.fontSelect = this.selectEl;
Ext.Component.prototype.afterRender.apply(this, arguments);
},
onDisable: function () {
var selectEl = this.selectEl;
if (selectEl) {
selectEl.dom.disabled = true;
}
Ext.Component.prototype.onDisable.apply(this, arguments);
},
onEnable: function () {
var selectEl = this.selectEl;
if (selectEl) {
selectEl.dom.disabled = false;
}
Ext.Component.prototype.onEnable.apply(this, arguments);
},
listeners: {
change: function () {
me.win.focus();
me.relayCmd('fontName', me.fontSelect.dom.value);
me.deferFocus();
},
element: 'selectEl'
}
});

items.push(
fontSelectItem,
'-'
);
}

if (me.enableFormat) {
items.push(
btn('bold'),
btn('italic'),
btn('underline')
);
}

if (me.enableFontSize) {
items.push(
'-',
btn('increasefontsize', false, me.adjustFont),
btn('decreasefontsize', false, me.adjustFont)
);
}

if (me.enableColors) {
items.push(
'-', {
itemId: 'forecolor',
cls: baseCSSPrefix + 'btn-icon',
iconCls: baseCSSPrefix + 'edit-forecolor',
overflowText: me.buttonTips.forecolor.title,
tooltip: tipsEnabled ? me.buttonTips.forecolor || undef : undef,
tabIndex: -1,
menu: Ext.widget('menu', {
plain: true,

items: [{
xtype: 'colorpicker',
allowReselect: true,
focus: Ext.emptyFn,
value: '000000',
plain: true,
clickEvent: 'mousedown',
handler: function (cp, color) {
me.relayCmd('forecolor', Ext.isWebKit || Ext.isIE ? '#' + color : color);
//HACK: override here
if (me.ownerCt && me.ownerCt.ownerCt && me.ownerCt.ownerCt.xtype == 'window') {
me.ownerCt.ownerCt.focus();
}
this.up('menu').hide();
}
}]
})
}, {
itemId: 'backcolor',
cls: baseCSSPrefix + 'btn-icon',
iconCls: baseCSSPrefix + 'edit-backcolor',
overflowText: me.buttonTips.backcolor.title,
tooltip: tipsEnabled ? me.buttonTips.backcolor || undef : undef,
tabIndex: -1,
menu: Ext.widget('menu', {
plain: true,

items: [{
xtype: 'colorpicker',
focus: Ext.emptyFn,
value: 'FFFFFF',
plain: true,
allowReselect: true,
clickEvent: 'mousedown',
handler: function (cp, color) {
if (Ext.isGecko) {
me.execCmd('useCSS', false);
me.execCmd('hilitecolor', '#' + color);
me.execCmd('useCSS', true);
me.deferFocus();
} else {
me.relayCmd(Ext.isOpera ? 'hilitecolor' : 'backcolor', Ext.isWebKit || Ext.isIE || Ext.isOpera ? '#' + color : color);
}
this.up('menu').hide();
}
}]
})
}
);
}

if (me.enableAlignments) {
items.push(
'-',
btn('justifyleft', false),
btn('justifycenter', false),
btn('justifyright', false)
);
}

if (!Ext.isSafari2) {
if (me.enableLinks) {
items.push(
'-',
btn('createlink', false, me.createLink)
);
}

if (me.enableLists) {
items.push(
'-',
btn('insertorderedlist'),
btn('insertunorderedlist')
);
}
if (me.enableSourceEdit) {
items.push(
'-',
btn('sourceedit', true, function (btn) {
me.toggleSourceEdit(!me.sourceEditMode);
})
);
}
}


for (i = 0; i < items.length; i++) {
if (items[i].itemId !== 'sourceedit') {
items[i].disabled = true;
}
}



return {
xtype: 'toolbar',
defaultButtonUI: me.defaultButtonUI,
cls: Ext.baseCSSPrefix + 'html-editor-tb',
enableOverflow: true,
items: items,


listeners: {
click: function (e) {
e.preventDefault();
},
element: 'el'
}
};
}
});

Daniil
Apr 15, 2013, 4:00 AM
Thank you for sharing a workaround!

Meanwhile Sencha opened a bug ticket and we created an Issue to track this defect.
https://github.com/extnet/Ext.NET/issues/205