CODEWITHSUNDEEP
javascripthtmlvariablesextjsweb-applications
Linker256
Linker256

Reputation: 33

ExtJs: How to use a variable in html

I'm trying to create an ExtJS app that uses tabs. I want to be able to set the div id for each tab's corresponding container.

I have this so far:

Ext.define('EXT.view.tab.tabs', {
    extend: 'Ext.container.Container',
    xtype: 'tabs',
    controller: 'tabcontroller',

    layout: 'fit',
    config: {
        name: 'image'
    },
    items: [{
        xtype: 'container',
        html: '<div id="{name}"'
    }]
});

So Obviously this doesn't work. How do you use a variable inHTML?

Is there another way to do this. I'm clearly missing something here.

Thanks for the help.

Upvotes: 0

Views: 1638

Answers (1)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

As you set name inside of config so can't access directly. For this you need to use initComponent() method. Inside of method you can access your config like this

this.getName()

In this Fiddle, I have created a demo using initComponent() and viewModel.

Code snippet:

//Using initComponent method set the id dynamically
Ext.define('TabsView', {
    extend: 'Ext.container.Container',
    xtype: 'tabs',
    //controller: 'tabcontroller',

    layout: 'fit',

    config: {
        name: 'image',
        text: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`
    },

    initComponent: function() {
        this.callParent();
        this.add([{
            xtype: 'container',
            html: `<div id=${this.getName()}>${this.getText()}</div>`
        }])
    }
});

Ext.create({
    xtype: 'tabs',
    renderTo: Ext.getBody()
});

You can also achieve this same functionality by viewModel

Code snippet:

//Using viewModel
Ext.define('TabsView1', {
    extend: 'Ext.panel.Panel',
    xtype: 'tabs1',
    title: 'Using Viewmodel',
    layout: 'fit',
    margin: '20 0',
    bodyPadding: 10,

    viewModel: {
        data: {
            name: 'image',
            text: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`
        }
    },

    items: [{
        xtype: 'container',
        bind: '<div id={name}>{text}</div>'
    }]
});

Ext.create({
    xtype: 'tabs1',
    renderTo: Ext.getBody()
});

Upvotes: 1

Related Questions