Hi,

i'm trying to implement dynamic component (view) creation and my problem is that the backbtn tap event fires correctly the first time but not the second time when the News view is recreated.

could you please help me find what i'm missing?
thanks a lot for your help

here is my code :
-app file: app.js
Code:
Ext.Loader.setConfig({enabled:true});
Ext.application({
    name: 'myAPP',
	controllers: ['Main']
});
- controller : main.js
Code:
Ext.define('myAPP.controller.Main', {
    extend: 'Ext.app.Controller',
	
	config: {
        profile: Ext.os.deviceType.toLowerCase()
    },
	views:['Main','Home','News'],
	
    refs:[
		{ref: 'Main',selector: 'Main',autoCreate: true},
		{ref: 'News',selector: 'News'},
		{ref: 'Home',selector: 'Home'},	
		{ref: 'newsBtn',selector: '#newsBtn'},
		{ref: 'backBtn',selector: '#backBtn'}
	],
    init: function() {
		this.getMainView().create();
        this.control({
            '#newsBtn': {
                tap: this.onNewsBtnTap
            },
			'News #backBtn':{
				tap: this.onBackBtnTap
			}
        });
    },
	onNewsBtnTap:function(){
		var main=this.getMain();
		var news=Ext.create('myAPP.view.News');
		var home=this.getHome();
		main.setActiveItem(news);
	},
	
	onBackBtnTap:function(){
		var main=this.getMain();
		var home=this.getHome();
		var news=this.getNews();
		
		main.setActiveItem(home);
		news.remove();


	}
});
- main view: Main.js
Code:
Ext.define('myAPP.view.Main', {
	extend: 'Ext.Container',
	alias:'widget.Main',
	xtype:'Main',
	requires: [
		'Ext.NavigationBar'
	],
	config:  {
		fullscreen: true,
		layout    : {
			type: 'card',
			animation: {
				type: 'slide',
				direction: 'left',
				duration: 250
			}
		},
		
		items: [
			{
				xtype:'Home',
			}
		]
	} 
});
- Home view : Home.js
Code:
Ext.define('myAPP.view.Home', {
    extend: 'Ext.Container',
	require:[
	'Ext.Img'
	],
	alias:'widget.Home',
	//xtype:'Home',
    config: {
		style:"background:white",
        layout: {
            type : 'vbox',
            pack : 'center',
            align: 'center'
        },
        cls   : 'card1',
        //scrollable: 'vertical',
        defaults: {
            xtype: 'container',
            height:110,
            layout: {
                type : 'hbox',
                align: 'bottom',


            },
            defaults: {
                xtype : 'button',
                flex  : 1,
                margin: 5,
            }
        },
        items: [
			{
				html:"<img src='resources/img/parkerlegris.jpg'/>",		
			},
            {
                items: [
				    {ui: 'round small', text: 'News',height:100,width:90,id:'newsBtn'},
                    {ui: 'round small', text: 'Products',height:100,width:90},
                    {ui: 'round small', text: 'Downloadings',height:100,width:90,iconCls:'bookmarks',iconMask:true}		
                ]
            },
			{
                items: [
                    {ui: 'round small', text: 'Tools',height:100,width:90},
                    {ui: 'round small', text: 'Contact',height:100,width:90,iconCls:'team',iconMask:true},
                    {ui: 'round small', text: 'Settings',height:100,width:90,iconCls: 'settings',iconMask:true}			
                ]			
			}
        ]
    }
});
- News view: News.js
Code:
Ext.define('myAPP.view.News', {
    extend: 'Ext.Panel',
	alias:'widget.News',
	fullscreen:true,
	config:
	{
			
			layout:{
				type:'vbox',
				align:'stretch'
			},
			defaults:{flex:1},
			items:[
					Ext.create('Ext.Carousel', {
								defaults: {
									cls: 'card'
								},
								items: [{
									html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>'
								}, {
									html: '2'
								}, {
									html: '3'
								}, {
									html: '4'
								}, {
									html: '5'
								}, {
									html: '6'
								}]
							}),
					{
						id: 'mainNavigationBar',
						xtype : 'navigationbar',
						docked: 'top',
						title : 'News',
						ui:'light',
						items: [{
							xtype : 'button',
							id: 'backBtn',
							hidden: false,
							align : 'left',
							ui    : 'back',
							text  : 'Back'
						}]
					}
			]
	}




	
});