PDA

View Full Version : Code Mirror in a TabPanel



charles.bourasseau
19 Apr 2012, 3:19 AM
I try to use CodeMirror (http://codemirror.net/) in a TabPanel.

http://jsfiddle.net/2dv2z/6/ (http://jsfiddle.net/2dv2z/6/)

I have 2 problems which block me:

It's not possible to change the tab
The CodeMirror Element does not really fit his container...

Has anyone some ideas ?

scottmartin
19 Apr 2012, 5:42 AM
I will have a look around. You may also want to consider looking at:
http://market.sencha.com/addon/ext.ux.aceeditor.panel

Regards,
Scott.

charles.bourasseau
21 Apr 2012, 6:08 AM
Thansk for your answer :)

I found the first problem, it was a stupid one.

I set an id in the definition of the EditorPanel. With 2 Tab there are 2 Elements with the same id, it solves the problem I suppose that was the cause.

scottmartin
21 Apr 2012, 6:27 AM
Glad you found the error and thanks for reporting back. This is one of the main reasons we recommend not using
id unless it is simply required.

Regards,
Scott.

charles.bourasseau
21 Apr 2012, 8:17 AM
Hi,

I just solved the second problem.

http://jsfiddle.net/mp35b/

(http://jsfiddle.net/mp35b/)It was just a small css problem :)

charles.bourasseau
21 Apr 2012, 8:30 AM
I just try my code with Extjs 4.1 rc3. It's may be a feature :p

Here is the best I could find: http://jsfiddle.net/charlesbourasseau/cKv6b/
(http://jsfiddle.net/charlesbourasseau/cKv6b/)
A small problem is that there is a small space between tabs and content. After the first click (on a tab) the space left.

Another problem is that I need to override a lot of style of Extjs HTML Elements to get a scroll bar in Codemirror.


.codemirror-field,.codemirror-field tbody,
.codemirror-field tbody tr,
.codemirror-field tbody tr td {
height: inherit !important;
}


.codemirror-field td.x-form-item-body {
vertical-align: top;
}‚Äč

Without these styles, the CodemirrorField Extjs Element has the same size of his content. Then codemirror could be render without scrollbar.

I want that the Field keep the size of the panel. Is this a bug or i'm doing something wrong...