CODEWITHSUNDEEP
javascriptanimationcss-animationsextjs4.2marquee
Eko Junaidi Salam
Eko Junaidi Salam

Reputation: 1681

How to create a single running text using extjs4.2?

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 ?

Upvotes: 0

Views: 703

Answers (1)

Howard Wang
Howard Wang

Reputation: 601

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

Upvotes: 1

Related Questions