Any computer user will be familiar with the concept of windows; an informational panel that appears on the screen to provide more data on the current user's actions. We can replicate this concept using the Ext.Window
class, a powerful component that supports many advanced scenarios.
We can open a window using a very minimal amount of code:
var w = new Ext.Window({height:100, width: 200}); w.show();
Running this gives you an empty pop up window that in itself is…well, completely useless; but it does show off a few of the interesting default features of an Ext.Window
. Straight out of the box, without any configuration, your window will be draggable, resizable, and will have a handy close icon in the upper right corner of the dialog box. It's still not a very impressive demonstration, however, because our window doesn't actually show anything.
The easiest way to populate a window is with plain old HTML. Here's an extended example that demonstrates...