如何將codemirror實例調整到父對象的完整高度？

我在我的ExtJS應用程序中使用CodeMirror。我這樣做：如何將codemirror實例調整到父對象的完整高度？

Ext.create('Ext.container.Viewport',{ 
    layout:'border', 
    items:[{ 
     region:'center', 
     layout:'fit', 
     border:false, 
     dockedItems:[{ 
     xtype:'toolbar', 
     items:[{ 
      xtype:'button', 
      text:'push me!' 
     }] 
     }], 
     html:'<textarea name="code" id="code"></textarea>', 
     listeners:{ 
     render:function(){ 
      CodeMirror.fromTextArea(document.getElementById("code"),{ 
       lineNumbers:true, 
       //fullScreen:true, 
       mode:{name:'javascript',globalVars:true} 
      }); 
     } 
     } 
    }] 
});

問題是textarea有一些固定的高度，在庫中定義。因此，儘管我添加了width和height參數，或者將style:height:100%添加到元素，但它沒有任何作用。如果我使用fullScreen選項，那麼我的textarea甚至會將toolbar隱藏在頂部。

編輯

我做到了，用css：

.CodeMirror { 
     width: 100% !important; 
     height: 100% !important; 
    }

雖然，我發現在圖書館中的錯誤。如果您將光標放在textarea裏面的最後一行，並輸入Enter，那麼高於textarea的元素將被破壞。

編輯。完整的測試用例

<html> 
<head> 
<style type="text/css"> 
    body { 
    margin: 0; 
    padding: 0; 
    } 
    .CodeMirror { 
     width: 100% !important; 
     height: 100% !important; 
    }  
</style> 
<link rel="stylesheet" type="text/css" href="/static/ext-5.0.1/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css"> 
<link rel="stylesheet" type="text/css" href="/static/app/pages/lib/js/codemirror-4.7/lib/codemirror.css"> 
<link rel="stylesheet" type="text/css" href="/static/app/pages/lib/js/codemirror-4.7/addon/display/fullscreen.css"> 
<script type="text/javascript" src="/static/ext-5.0.1/build/ext-all.js"></script> 
<script type="text/javascript" src="/static/ext-5.0.1/build/packages/ext-locale/build/ext-locale-ru.js"></script>  
<script type="text/javascript" src="/static/app/pages/lib/js/codemirror-4.7/lib/codemirror.js"></script> 
<script type="text/javascript" src="/static/app/pages/lib/js/codemirror-4.7/mode/javascript/javascript.js"></script> 
<script type="text/javascript" src="/static/app/pages/lib/js/codemirror-4.7/addon/display/fullscreen.js"></script> 
<script type="text/javascript"> 

    var MYAPP={ 
     CM:{}, 
     setCodeMirror:function(obj){ 
      this.CM=obj; 
     }, 
     getCodeMirror:function(){ 
      return this.CM; 
     } 
    } 

    Ext.Loader.setConfig({enabled:true, disableCaching:true}); 

    Ext.Loader.setPath('Ext.ux','/static/ext-5.0.1/examples/ux'); 

    Ext.require(['*']); 

    Ext.onReady(function(){ 

     Ext.tip.QuickTipManager.init(); 

     Ext.create('Ext.container.Viewport',{ 
      layout:'border', 
      items:[{ 
       region:'center', 
       layout:'fit', 
       border:false, 
       dockedItems:[{ 
        xtype:'toolbar', 
        items:[{ 
         xtype:'button', 
         icon:'/static/app/img/save.png', 
         tooltip:'Сохранить', 
         handler:function(){ 
         // This tabpanel is corrupted when you hit Enter 
         } 
        }] 
       }] 
      }] 
     }); 

    });  

</script> 
</head> 
<body> 
<br/><br/> 
<textarea id="code" name="code">...Write here a lot of text, so that the last line will be beyond visible arear of the screen... Then scroll down, put cursor to the last line and hit Enter. You will see that the tabpanel with a button is corrupted</textarea> 
<script type="text/javascript"> 
    MYAPP.setCodeMirror(CodeMirror.fromTextArea(document.getElementById("code"),{ 
     lineNumbers:true, 
     mode:{name:'javascript',globalVars:true} 
    })); 
</script> 
</body> 
</html>

來源

2014-11-02 Jacobian

爲什麼使用html textarea，而不是使用ExtJS文本區域，http://try.sencha.com/extjs/4.1.0/docs/Ext.form.field.TextArea.1/ – Bala 2014-11-03 05:32:52

@ Bala 。謝謝！我會查一下。 – Jacobian 2014-11-03 07:14:26

首先，如果你把它轉換爲CodeMirror實例<textarea>標籤是隱藏的，所以確實，造型textarea的不會做任何事情。其次CodeMirror確實不會損壞文檔，如果你在最後一行按回車鍵。這可能與您的設置有關。如果您創建了一個最小的HTML頁面來演示這個問題，並在CodeMirror bug tracker中提交問題，我可以給你一個解決方案。

來源

2014-11-03 09:39:51 Marijn

我提供了一個完整的測試用例。它證明了文件的腐敗。如果我在兩者之間的某個地方點擊Enter，那麼一切都可以，但是如果我在最後一行打開Enter，那麼我看到一些腐敗 – Jacobian 2014-11-03 09:54:57

很明顯，我可能做錯了什麼。我的主要目標是將CodeMirror實例調整到父對象的整個高度。在這種情況下，既沒有硬編碼樣式，也沒有全屏選項。 – Jacobian 2014-11-03 09:58:21

這不是自包含的HTML。首先，即使在查找extjs垃圾的CDN鏈接後，我也沒有看到任何tabpanel。 – Marijn 2014-11-03 11:58:58

如何將codemirror實例調整到父對象的完整高度？

回答

相關問題