Results 1 to 6 of 6

Thread: Code Mirror in a TabPanel

  1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    33
    Answers
    1

    Default Answered: Code Mirror in a TabPanel

    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 ?

  2. Hi,

    I just solved the second problem.

    http://jsfiddle.net/mp35b/

    It was just a small css problem

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    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.

  4. #3
    Sencha User
    Join Date
    Jul 2010
    Posts
    33
    Answers
    1

    Default

    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.

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    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.

  6. #5
    Sencha User
    Join Date
    Jul 2010
    Posts
    33
    Answers
    1

    Default

    Hi,

    I just solved the second problem.

    http://jsfiddle.net/mp35b/

    It was just a small css problem

  7. #6
    Sencha User
    Join Date
    Jul 2010
    Posts
    33
    Answers
    1

    Default

    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.

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •