Custom TV modification

itemfield = {
                xtype: this.TypeChp[i]

name:nom de la chanson:textfield||mp3:fichier mp3:file

<input id="tv{$tv->id}" name="tv{$tv->id}" type="hidden" class="textfield" value="{$tv->get('value')|escape}"{$style} tvtype="{$tv->type}" />
<div id="tvpanel{$tv->id}">
</div>
<div id="tvpanel2{$tv->id}">
</div>
<br/>

<script type="text/javascript">
    // <![CDATA[
    {literal}
    MODx.panel.multiTvItem = function(config) {
        config = config || {};
		Ext.applyIf(config,{
            layout: 'form'
            ,autoHeight: true
            ,border: false
            ,style:{
                'margin-bottom': '5px'
                ,'border-bottom-width':'1px'
            }
            ,hideLabels: false
            ,defaults: {
                autoHeight: true
                ,border: false
            }
            ,items: [{
			    xtype: 'button'
                ,text: 'delete item'
                ,style:{
                    'float': 'right'
                }
                ,listeners: {
                    'click': {fn:function() {
						var _thisitem = this;
						var itemIdentifier = this.itemIdentifier;
                        Ext.Msg.confirm(_('warning') || '','Remove Item?' || '',function(e) {
                            if (e == 'yes') {
                                console.log(config);
								Ext.get(config.id).remove();
                                config.tvpanel.collectItems();
                            }
	                    }),this;
                    },scope:this}
                }}
				,{
				xtype: 'fieldset'
				,collapsible: false
                //,collapsed: config.toggleCb=='on'?false:true
				,collapsed: false
				,checkboxToggle: true
				,checkboxName: 'tv'+this.tvid+'_toggleCb_'+config.itemid
                ,autoHeight: true
                ,title: 'show Fields'
				,items: config.itemfields
				,width: '500px'
			}]
        });
        MODx.panel.multiTvItem.superclass.constructor.call(this,config);
        this.addEvents({select: true});
    };
    Ext.extend(MODx.panel.multiTvItem,MODx.Panel);
    Ext.reg('modx-panel-multitvitem',MODx.panel.multiTvItem);

    MODx.panel.multiItemsTV = function(config) {
        config = config || {};
        Ext.applyIf(config,{
            autoHeight: true
            ,border: false
            ,style:{
                'margin-bottom': '5px'
                ,'border-bottom-width':'1px'
            }
            ,hideLabels: true
            ,defaults: {
                autoHeight: true
                ,border: false
            }
            ,items: [{
                xtype: 'button'
                ,html: '<span>Add another item</span>'
				,cls: 'ux-row-action-item ux-row-action-text'
                ,listeners: {
                    'click': {fn:function() {
                        this.addItem({data:{}});
                    },scope: this}
                }
            }]
        });

        MODx.panel.multiItemsTV.superclass.constructor.call(this,config);
		this.loadInitItems();
        this.addEvents({select: true});
    }
    Ext.extend(MODx.panel.multiItemsTV,MODx.Panel,{
	itemIdentifier: 0
	,tvid:'{/literal}{$tv->id}{literal}'
    ,fields: Ext.util.JSON.decode('{/literal}{$fieldnames}{literal}')
	,captions: Ext.util.JSON.decode('{/literal}{$captions}{literal}')
	,TypeChp: Ext.util.JSON.decode('{/literal}{$TypeChp}{literal}')
	,loadInitItems: function(){
    var items_string = Ext.select("#tv"+this.tvid).elements[0].value;
    var	items = [];
    try {
        items = Ext.util.JSON.decode(items_string);
    }
    catch (e){

    }

    if (items.length>0){
        for (var i = 0; i < items.length; i++) {
            //menueItem_Identifier++;
            this.addItem({data:items[i]});
        }
    }
	else {
		//menueItem_Identifier++;
        this.addItem({data:{}});
	}
	}
	,addItem: function(config){

		var data=config.data || null;

		this.itemIdentifier++;
		var itemfields=[];
        for (i=0;i<this.fields.length;i++) {
            if (this.TypeChp[i] =="file") {
            itemfield = {
                xtype: 'modx-combo-browser'
                ,name: 'tv'+this.tvid+'_'+this.fields[i]+'_'+this.itemIdentifier
                ,id: 'tv'+this.tvid+'_'+this.fields[i]+'_'+this.itemIdentifier
                ,value: data[this.fields[i]]||''
                ,width: '293px'
				,fieldLabel: this.captions[i]
                ,cls:'tv'+this.tvid+this.fields[i]
                ,listeners: {
                    'select': {fn: function(data) {
                        this.fireEvent('select',data);
                         this.collectItems();
                    },scope:this}
                    ,'change': {fn:function(D) {
                    this.fireEvent('change',D);
                     this.collectItems();
                    },scope:this}
                }
             }
            }
            else {
            itemfield = {
                xtype: 'textfield'
                ,name: 'tv'+this.tvid+'_'+this.fields[i]+'_'+this.itemIdentifier
                ,id: 'tv'+this.tvid+'_'+this.fields[i]+'_'+this.itemIdentifier
                ,value: data[this.fields[i]]||''
                ,width: '293px'
				,fieldLabel: this.captions[i]
                ,cls:'tv'+this.tvid+this.fields[i]
                ,listeners: {
                    'change': {fn:function(D) {
                    this.fireEvent('change',D);
                     this.collectItems();
                    },scope:this}
                }
             }

            }

			 itemfields.push(itemfield);
		};
		//console.log(items);


		MODx.load({
			xtype: 'modx-panel-multitvitem',
			renderTo: 'tvpanel2' + this.tvid,
			//fields:this.fields,
			tv: this.tvid,
			itemid: this.itemIdentifier,
			//toggleCb:data['toggleCb']||'off',
			cls: 'tv' + this.tvid + '_item',
			id: 'tv' + this.tvid + '_item' + this.itemIdentifier,
			width: '97%',
			data: {description:''}
			,itemfields : itemfields
			,tvpanel:this
		});
	}
    ,collectItems: function(){
        var items=[];
        var rows = Ext.select('.tv'+this.tvid+'_item');
        //console.log(this);
		var inputs = null;
		var item = null;
		var _this = this;
		rows.each(function(row){
            inputs = row.select('input');
			//console.log(inputs);
			item={};
			inputs.each(function(input){
            	var name = input.dom.name.substring(input.dom.name.indexOf("_")+1, input.dom.name.lastIndexOf("_"));
				item[name]=input.getValue();
				//console.log(name);
			});
			items.push(item);
            //console.log(item);
        });
		//console.log(items);
        Ext.select('#tv'+this.tvid).elements[0].value = Ext.util.JSON.encode(items);
    }

	});
    Ext.reg('modx-panel-multiitemstv',MODx.panel.multiItemsTV);

        MODx.load({
            xtype: 'modx-panel-multiitemstv'
            ,renderTo: 'tvpanel{/literal}{$tv->id}{literal}'
            ,tv: '{/literal}{$tv->id}{literal}'
            ,cls:'tv{/literal}{$tv->id}{literal}_items'
            ,id:'tv{/literal}{$tv->id}{literal}_items'
            ,width: '97%'
        });


</script>