ExtJS How to insert Xtemplate into the gridpanel column to display the audio files

0
votes

Im beginner with ExtJS and I want to create the audio player with ExtJS and I don't know how to insert Xtemplate to the gridpanel column to display audio files. Maybe someone help me with it. Thanks for any advise.

2
audioextjsgridextjs4
Post some code please, so that we see how far have you got and what you tried. – Saki
Thanks, I solved the problem by using xtype: 'templatecolumn' and config tpl – user3714500

2 Answers

0
votes

You can use following code to to create mp3 player. Make sure your browser supports html 5.

Ext.create('Ext.form.Panel', {
bodyPadding: 10,
border: false ,
height:200,
width:200,          
items: [{
xtype: 'label',
fieldLabel: 'Audio File',
html:'<audio controls><source src="yariyan.mp3" type="audio/mpeg">Your browser does not support the audio tag.</audio>'
}]
});
0
votes

Thanks, I solved the problem by using xtype: 'templatecolumn' and config tpl

Ext.define('PV.view.player.Playlist', {
extend: 'Ext.grid.Panel',
alias: 'widget.playlist',
title: 'Music',
store: 'Playlist',

initComponent: function() {
    this.columns = [
        {
            xtype: 'templatecolumn',
            dataIndex: 'url',
            tpl: '<audio controls src={url}></audio>'
        }
    ];
    this.callParent(arguments);
}

});