View Full Version : Code Mirror in a TabPanel

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 ?

19 Apr 2012, 5:42 AM
I will have a look around. You may also want to consider looking at:


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.

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.


21 Apr 2012, 8:17 AM

I just solved the second problem.


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

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/
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...