Ext.Window attributes and their usages

The Ext.Window class in Ext JS has several attributes that can be used to customize its behavior and appearance. Here are some commonly used attributes and their usages:

1. title: Specifies the title text displayed in the window’s header. It can be set using the title attribute during window instantiation or by calling the setTitle() method.
2. width and height: Determines the initial width and height of the window in pixels. These attributes can be set during instantiation or modified using the setWidth() and setHeight() methods.
3. resizable: A boolean attribute that allows the user to resize the window. Set it to true to enable resizing, and false to disable it. It can be set during instantiation or modified using the setResizable() method.
4. draggable: A boolean attribute that enables or disables dragging the window. When set to true, the user can move the window by dragging its title bar. It can be set during instantiation or modified using the setDraggable() method.
5. modal: A boolean attribute that determines whether the window should be displayed as a modal window. When set to true, the window will block user interaction with the rest of the application. It can be set during instantiation or modified using the setModal() method.
6. layout: Specifies the layout to be used within the window for arranging its content. Common layouts include border, hbox, vbox, and fit. It can be set during instantiation or modified using the setLayout() method.
7. closable: A boolean attribute that controls whether the window can be closed by the user. When set to true, a close button will be displayed in the window’s header. It can be set during instantiation or modified using the setClosable() method.
8. maximizable and minimizable: Boolean attributes that determine whether the window can be maximized or minimized, respectively. Set them to true to enable the corresponding functionality. They can be set during instantiation or modified using the setMaximizable() and setMinimizable() methods.
9. items: Specifies the content to be placed inside the window. It can be any Ext JS component, such as a form, grid, or panel. The items attribute accepts an array of components or a single component instance.
10. listeners: Allows you to define event listeners to handle various events triggered by the window, such as ‘beforeclose’, ‘resize’, ‘dragstart’, and more. You can define listeners as an object with event names as keys and function references as values.

Example:

new Ext.Window({
  title: 'Select Options',
  layout: 'form',
  width: 460,
  height: 125,
  items: [selectField],
  buttons: [submitButton, Cancel],
  closable: false,
  scrollable: true,
  modal: true,
  centered: true
});