Tag Archives: extjs

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 ,

Extjs : Events

Software driven events

Create an object of Observable

var myObservable = new Ext.util.Observable();

Add custom events

myObservable.addEvents('sayHello');
// or
myObservable.addEvents({
  'sayHello' : true // enabled by default
});

Register event handler

myObservable.on('sayHello', function() {
  console.log('Hello stranger');
});
// myObservable.on is the shorthand for myObservable.addListener

Fire the event

myObservable.fireEvent('sayHello');

If we want to pass parameters

myObservable.addEvents('sayHello');
var sayGoodbyeFn = function(firstName, lastName) {
console.log('Goodbye ' + firstName + ' ' + lastName + '!');
}
myObservable.on('sayGoodbye', sayGoodbyeFn);
myObservable.fireEvent('sayGoodbye', 'Holly', 'Cow');

Remove listeners

myObservable.un('sayGoodbye', sayGoodbyeFn);
// myObservable.un is the shorthand for myObservable.removeListener

Originally from [ Ext JS in Action by Jesus Garcia ]


Complete Example

Ext.onReady(function() {
	Ext.define('Test', {
		extend : 'Ext.util.Observable',
		constructor : function(config) {
			this.name = config.name;
			this.addEvents({
				'test' : true
			});
			this.listeners = config.listeners;
			this.callParent(arguments);
		}
	});

	var test = new Test({
		name : 'Test X',
		listeners : {
			test : function(param_x, param_y) {
				console.log('initiating ' + this.name + ' : ' + param_x +  ': ' + param_y);
			}
		}
	});	
	test.fireEvent('test', 'x', 'y');		
});
// http://docs.sencha.com/ext-js/4-0/#!/api/Ext.util.Observable

result : initiating Test X : x : y

For more details Extjs docs

Tagged ,