如何使用extjs4.2創建單個正在運行的文本？

Question

如何創建像Extjs4.2中的選取框非標準HTML元素的運行文本？

這是我到目前爲止已經完成了我的代碼片段：

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

 
Ext.require([ 
 
    'Ext.form.*', 
 
    'Ext.XTemplate']); 
 

 
Ext.onReady(function() { 
 
    //Ext.Msg.alert('Fiddle', Ext.get('info').dom.innerHTML); 
 
    Ext.define('v_label', { 
 
     extend: 'Ext.form.Label', 
 
     xtype: 'runningText', 
 
     renderTo: Ext.getBody(), 
 

 
     constructor: function (config) { 
 
      var me = this; 
 
      var lbl = Ext.get('info').dom.innerHTML; 
 

 
      this.data = { 
 
       title: 'Title Sample', 
 
       item: 'Item Sample' 
 
      }; 
 
      this.tpl = lbl; 
 
      // contentEl: 'info', 
 
      this.height = 40; 
 

 
      Ext.apply(me, config); 
 
      me.callParent(); 
 
     } 
 
    }); 
 

 
    Ext.create('v_label'); 
 
});

<script src="http://dev.sencha.com/deploy/ext-4.0.2a/ext-all-debug.js"></script> 
 
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.1.1-gpl/resources/css/ext-all-debug.css" /> 
 
<div id="info"> 
 
    <marquee scrollamount='4' onmouseout="this.setAttribute('scrollamount', 4, 0);" onmouseover="this.setAttribute('scrollamount', 0, 0);"><font size='5' color='red'><strong>{title} : {item}</strong></font> \t 
 
    </marquee> 
 
</div>

我定義它，所以我可以創建一個動態的標籤，並從data:{}動態存儲數據。

您可以看到一個正在運行的文本，但它看起來是雙倍的。我嘗試將marquee標記存儲到tpl中，但由於single quotes,double quotes和javascript to change the attribute marquee而卡住了。

我的問題是：如何使它成爲一個單一的運行文本？

或者，

也許任何一種方式來創建extjs4.2運行文本？

Answer 1

根據您的代碼，將lbl更改爲以下內容。

// use backslash 
var lbl = '<div id=\'info\'><marquee scrollamount=\'4\' onmouseout=\"this.setAttribute(\'scrollamount\', 4, 0);\" onmouseover=\"this.setAttribute(\'scrollamount\', 0, 0);\"><font size=\'5\' color=\'red\'><strong>{title} : {item}</strong></font></marquee></div>';