如何使用extjs4.2创建单个运行文本？

Question

How to create running text like a marquee non standard HTML element in Extjs4.2 ?

This is my snippet code that I've done so far :

 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> </marquee> </div> 

I define it so I can create a dynamic label and store the data dynamically from data:{} .

You can see a running text, but it's double as you see. I've try to store the marquee tag into tpl but i get stuck because the single quotes , the double quotes and the javascript to change the attribute marquee .

My question is : How to make it a single running text ?

Or,

Maybe any another way to create running text in extjs4.2 ?

Answer 1

Based on your code, change the lbl as the following.

// 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>';