Use Singleton class in XTemplate - DataView

Question

I'm developing a extjs project using 6.5.1 version and modern toolkit, i have a singleton class that manage all translations something like that:

Ext.define('QApplication.Labels', {
   singleton: true,

   name: "Name",
   email: "Email",
   correctAnswer: "Correct Answer",
   button: 'My Button'
});

Now it's located in the main viewmodel:

Ext.define('QApplication.view.main.MainModel', {
  extend: 'Ext.app.ViewModel',

  alias: 'viewmodel.main',

  data: {
    i18n: QApplication.Labels,
  }
});

Now, i define a DataView with his own XTemplate but i have to use some of the translations given by the singleton class:

var qTpl = new Ext.XTemplate(
  "<div class=\"question-text\"><a \">{questionTitle}</a></div>",
  "<tpl if='totalAnswers &gt; 0'>",
    "<div class=\"question-answer-color\">{totalAnswers} {i18n.correctAnswer}
"<tpl else>",
    "<div class=\"question-answer-no-color\">Unanswered</div>",
"</tpl>",
);

  Ext.define('QApplication.view.quest.list', {
    extend: 'Ext.dataview.DataView',
    xtype: 'qList',
    requires: [
      'QApplication.store.QTier',
      'QApplication.view.main.MainModel'
    ],

    height: 'auto',

    controller: '////',
    viewModel: 'main',

    store: {
      type: '////'
    },

    itemTpl: qTpl
});

In XTemplate, i define the data bind {i18n.correctAnswer} which refer the singleton class that manage all the translations, but it doesn't take the given value

My possible solution is implement an function that return the singleton value corresponding to the object called, in XTemplate you can create function that could be called inside the component. — Carlos Ramirez, Aug 28 '18 at 15:40

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

You could use alternateClassName for your singleton class and you can directly access inside of data view itemTpl. Inside of itemTpl you could use Template_literals.

Template_literals

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification.

You can check with working FIDDLE.

CODE SNIPPET

//JS code 
Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('QApplication.Labels', {
            singleton: true,

            alternateClassName:'i18n',

            name: "Name",
            email: "Email",
            correctAnswer: "Correct Answer",
            button: 'My Button'
        });

        Ext.define('MainStore', {

            extend: 'Ext.data.Store',

            alias: 'store.mainstore',

            fields: ['questionTitle', 'totalAnswers'],

            data: [{
                totalAnswers: 10,
                questionTitle: 'Use Singleton class in XTemplate - DataView'
            }, {
                totalAnswers: 5,
                questionTitle: 'How to get dom element in ES6'
            }, {
                totalAnswers: 0,
                questionTitle: 'Why does `viewmodel.getStore()` return null'
            }]
        });

        Ext.define('QApplication.view.main.MainModel', {

            extend: 'Ext.app.ViewModel',

            alias: 'viewmodel.main',

            stores: {
                mainStore: {
                    type: 'mainstore'
                }
            }
        });

        var qTpl = new Ext.XTemplate(
            `<div class="question-text"> <a>{questionTitle}</a> </div>
            <tpl if="totalAnswers &gt; 0">
            <div class="question-answer-color">{totalAnswers} ${i18n.correctAnswer}</div>
            <tpl else>
            <div class="question-answer-no-color">0 Unanswered</div>
            </tpl>`
        );

        Ext.define('QApplication.view.quest.list', {

            extend: 'Ext.dataview.DataView',

            xtype: 'qList',

            cls:'my-data-view',

            viewModel: 'main',

            bind: '{mainStore}',

            itemTpl: qTpl
        });

        Ext.create({
            xtype: 'qList',
            fullscreen: true,
        })

    }
});

//CSS code
<style>
    .my-data-view .x-dataview-item {
        padding: 10px;
        border-bottom: 1px dashed #ccc;
        background-color: wheat;
        font-size: 16px;
        cursor: pointer;
    }

    .question-answer-color {
        color: green;
        text-decoration: underline;
    }

    .question-answer-no-color {
        color: red;
        text-decoration: underline;
    }

</style>

This would assume you're defining all your classes inside your app body. Which you pretty much never are. — Evan Trimboli, Aug 29 '18 at 07:37
So there is also one option we can create `string.prototype` custom method to translate the string. That is also one way. I have provided solution because OP using the singleton class. — Narendra Jadhav, Aug 29 '18 at 08:57
You have, but it's not very useful because it's not idiomatic in the framework to do it like that. — Evan Trimboli, Aug 29 '18 at 10:09
The problem is that all classes are distributing in different files, when i implemented the solution, it could bind the data from the singleton — Carlos Ramirez, Aug 29 '18 at 13:56

Use Singleton class in XTemplate - DataView

1 Answers1

Template_literals