Extjs : Manipulating Items in Containers

Create two Windows and add a panel.

	var panelX = {
		html : 'panelX',
		id : 'panelX',
		frame : true
	}

	var parentX = new Ext.Window({
		title : 'parentX',
		id : 'parentX',
		height : 250,
		width : 250,
		items : [panelX]
	});

	var parentY = new Ext.Window({
		title : 'parentY',
		id : 'parentY',
		height : 250,
		width : 250
	});

	parentX.show();
	parentY.show();

Remove the panel from a Window and add it to the other Window.

	var panel = Ext.getCmp('panelX');
	Ext.getCmp('parentX').remove(panel, false);
	//Ext.getCmp('parentX').doLayout();
	// panel is still there in the parentX, because we passed false to remove()
	
	Ext.getCmp('parentY').add(panel);
	// Now it is in the parentY

Complete Code

Ext.onReady(function() {

	var panelX = {
		html : 'panelX',
		id : 'panelX',
		frame : true
	}

	var parentX = new Ext.Window({
		title : 'parentX',
		id : 'parentX',
		height : 250,
		width : 250,
		items : [panelX]
	});

	var parentY = new Ext.Window({
		title : 'parentY',
		id : 'parentY',
		height : 250,
		width : 250
	});

	parentX.show();
	parentY.show();

	var panel = Ext.getCmp('panelX');
	Ext.getCmp('parentX').remove(panel, false);
	// Ext.getCmp('parentX').doLayout();
	// panel is still there in the parentX, because we passed false to remove()
	
	Ext.getCmp('parentY').add(panel);
	// Now it is in the parentY
});

Another Example

Ext.onReady(function() {

	var panelX = {
		html : 'panelX',
		id : 'panelX',
		frame : true
	}

	var button = new Ext.Button({
		text : 'Knock',
		handler : function() {
			var panel = Ext.getCmp('panelX');
			Ext.getCmp('parentX').remove(panel, false);
			Ext.getCmp('parentY').add(panel);
		}
	});

	var parentX = new Ext.Window({
		title : 'parentX',
		id : 'parentX',
		height : 250,
		width : 250,
		items : [panelX, button]
	});

	var parentY = new Ext.Window({
		title : 'parentY',
		id : 'parentY',
		height : 250,
		width : 250
	});

	parentX.show();
	parentY.show();

});
Advertisements
Tagged ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: