Code Mirror in a TabPanel

[charles.bourasseau]

I try to use CodeMirror in a TabPanel.

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]

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]

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]

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]

Hi,

I just solved the second problem.

http://jsfiddle.net/mp35b/

It was just a small css problem

[charles.bourasseau]

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