PDA

View Full Version : [Solved] HTMLeditor does not receive focus when collapsed Ext panel is opened



Rave
13 Aug 2010, 7:16 AM
Hi,

We have an Ext HTMLeditor field in a collapsible Ext panel.

When the panel is set to "collapsed: true" (which is what we want), the following occurs (*Edit: tested in Firefox):


Clicking in the field does not give it focus. The field cannot be used.
The field only receives focus when the "Source Edit" mode button is clicked.
After exiting from "Source Edit" mode, clicking in the field again gives it focus. However, the font within the field is a serif font (could be Times New Roman) and has margins around the edges of the text and tall line heights.


When the panel is set to "collapsed: false", the field works as expected:


Field receives focus on click
Default font is Arial, with default (small) margins and default line heights.


Code for HTMLeditor:


clipRich = new Ext.form.HtmlEditor({
id: 'ClipRich', autoScroll: true,
enableFont: false, enableFontSize: false,
enableLists: true, enableFormat: true,
enableAlignments: false,
height: 100, width: 300
});
Code for panel:


clipboardPanel = new Ext.Panel({
xtype: 'panel', title: 'Clipboard',
region: 'south',
collapsible: true, collapsed: true, split: true,
height: 135, maxSize: 135, //minSize: 100,
margins: '0 0 0 0', cmargins: '0 0 0 0', padding: 4,
layout: 'hbox', autoScroll: true,
items: [clipRich, clipPlain]
});

Ext.fly('clipIcon').on('click', function() {
clipboardPanel.toggleCollapse(false);
}); Any ideas?

TIA,

Rave

ashaihullin
13 Aug 2010, 8:35 AM
yeah... i see such problem too... as a variant i tried to add component on 'expand' event... may be such way will help you. Something like this:



clipboardPanel.on('expand', function() {
clipRich = new Ext.form.HtmlEditor({
id: 'ClipRich', autoScroll: true,
enableFont: false, enableFontSize: false,
enableLists: true, enableFormat: true,
enableAlignments: false,
height: 100, width: 500
});

clipboardPanel.add(clipRich);
clipboardPanel.doLayout();
});


and so you just need to check if editor were added before, if not so add it... didn't find another way. may be others

ashaihullin
13 Aug 2010, 8:39 AM
hm... i little bit hurried... after collapse/expand it again became unfocusable...

Rave
13 Aug 2010, 8:54 AM
I added the following to the panel it the issue is now resolved. For consistency, I've set the same for all our collapsible panels:
animCollapse: false