View Full Version : Ext-JS Component

27 Apr 2011, 1:42 AM
I have a requirement to create a component which is a search window.The component is a window having panel on which search fields ,result grid and OK or cancel button placed.

This component is instantiated and window is opened from another script.So Below are the few items which I need more information.

Is it possible to instantiate a window in OnRender() method of component.

On click of cancel the window should close and navigate back to parent menu.any code snippet to close the window on cancel event.

27 Apr 2011, 5:32 AM
Here's a centered button that will close the window that contains it when clicked:

new Ext.Button({
scale: 'medium', text: 'Cancel',
style: {margin: '0 auto'},
handler: function() {

You certainly can launch a new window whenever the 'render', 'beforerender' or 'afterrender' events are fired; it's up to you which event is most appropriate for your needs. Here's an example of a pre-configured panel class with such behavior tied to the 'afterrender' event:

App.SearchPanel = Ext.extend(Ext.Panel, {
constructor: function(config) {
config = config || {};
config.listeners = config.listeners || {};
Ext.applyIf(config.listeners, {
afterrender: function() {
var w = new Ext.Window({title: 'My Window', html: 'Why, hello there!'});
App.SearchPanel.superclass.constructor.call(this, config);