JavaScript DHTML/Ext JS/Window

Содержание

1 Add components to a window
2 Add html code to a window
3 Add top Toolbar, bottom Toolbar and button to a window
4 Add two panels to a window
5 Add two TextFields to a window
6 Call close to hide the window
7 Call show method to display a window
8 Call show to display the window
9 Collapsible Panel
10 Collapsible Window
11 Create a form control, add to a form and then add the form to the window
12 Create a very simple modal Window with "autoTabs" from existing markup
13 Create a window and set title, width, height and panel
14 Create Ext.form.TextField and add to Window
15 Dynamically add item to a window
16 Fit a panel to a window
17 Google map window
18 minimizable and maximizable Window
19 Minimized to Body
20 No border
21 Not closable
22 Not draggable
23 Not resizable
24 Place html to Ext Window
25 Plain Window
26 Set body style for a window
27 Set item for a window
28 Set layout for a window
29 Set only height and width for a window
30 Set title for a window
31 Set width and height for a window
32 Set width, height, minWidth, minHeight for a window
33 Set window animation target
34 Set window autoscroll to true
35 Set Window autoScroll to true and anchor size
36 Set window border style
37 Set window close action to hide
38 Set window default field type
39 Set window label width
40 Window anchor size
41 Window buttonAlign: "center"
42 Window: closable, draggable, resizable
43 Window layout = anchor
44 Window with animated layout
45 Window with auto height
46 Window without border

Add components to a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){
  
    var w = new Ext.Window({
      items:[
        { xtype: "textfield", fieldLabel: "First Name"},
        new Ext.form.TextField({fieldLabel: "Surname"})
      ]
    });
    w.show();
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>

Add html code to a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){
  
    var w = new Ext.Window({
      height: 150, 
      width: 200,
      title: "A Window",
      html: "<h1>Oh</h1>"
    });
    w.show();
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>

Add top Toolbar, bottom Toolbar and button to a window

   
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){
  
    var w = new Ext.Window({
      tbar: [{ text: "A tbar item"}],
      bbar: [{ text: "A bbar item"}],
      buttons: [{text: "A button"}],
      width: 300,
      height: 200,
      html: "<p>test.</p>"
    });
    w.show();
});
</script>
<body>
    <div id="animTarget">
    </div>
</body>
</html>

Add two panels to a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var panel1 = {                                          
        html   : "I am Panel1",
        id     : "panel1",
        frame  : true,
        height : 100
    }
    var panel2 = {
        html  : "<b>I am Panel2</b>",
        id     : "panel2",
        frame : true
    }
    
    var myWin = new Ext.Window({                            
        id     : "myWin",
        height : 400,
        width  : 400,
        items  : [
            panel1,
            panel2
        ]
    });
    
    myWin.show();
    
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Add two TextFields to a window

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){
  
    var w = new Ext.Window({
      items:[
        { xtype: "textfield", fieldLabel: "First Name"},
        new Ext.form.TextField({fieldLabel: "Surname"})
      ]
    });
    w.show();
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>

Call close to hide the window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var win = new Ext.Window({
        height      : 305,
        width       : 200,
        modal       : true,
        title       : "Rigid window",
        html        : "Unable to move or resize.",
        plain       : true,
        border      : false,
        resizable   : false,
        draggable   : false,
        closable    : false,
        buttonAlign : "center",
        buttons     : [
            {
                text    : "OK",
                handler : function() {
                    win.close();
                }
            }
        ]
    })
    win.show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Call show method to display a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

var panel1 =     {
  xtype : "panel",
  title : "Plain Panel",
  html  : "Panel with an xtype specified"
}
new Ext.Window({
  width        : 300,
  height       : 300,
  title        : "Accordion window",
  layout       : "accordion",
  border       : false,
  layoutConfig : {
    animate : true
  },
  items : [panel1,panel1,panel1,]
}).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Call show to display the window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var win = new Ext.Window({
        height      : 305,
        width       : 200,
        modal       : true,
        title       : "Rigid window",
        html        : "Unable to move or resize.",
        plain       : true,
        border      : false,
        resizable   : false,
        draggable   : false,
        closable    : false,
        buttonAlign : "center",
        buttons     : [
            {
                text    : "OK",
                handler : function() {
                    win.close();
                }
            }
        ]
    })
    win.show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Collapsible Panel

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
        
    var myBtnHandler = function(btn) {
        Ext.MessageBox.alert("You Clicked", btn.text);
    }
    
    var fileBtn =  new Ext.Button({
        text    : "File",
        handler : myBtnHandler
    });
    var editBtn = new Ext.Button({
        text    : "Edit",
        handler : myBtnHandler
    });
    
    
    var myTopToolbar = new Ext.Toolbar({
        items : [ 
            fileBtn,
            editBtn
        ]
    });
    
    var myPanel = new Ext.Panel({
        width       : 600,
        height      : 650,
        title       : "Ext Panels rock!",
        collapsible : true,
        renderTo    : Ext.getBody(),
        tbar        : myTopToolbar,
        html        : "My first Toolbar Panel!"
    });
        
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Collapsible Window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){
  
    var w = new Ext.Window({title: "Collapse Me", height:100, width: 150, collapsible: true});
    w.show();
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>

Create a form control, add to a form and then add the form to the window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    
    var htmlEditor = {
      xtype          : "htmleditor",
      fieldLabel     : "",
      anchor         : "100% 100%",
      allowBlank     : false,
      validateValue  : function() {
        var val = this.getRawValue();  
        return  false;
      }
    }
    var f = {
      xtype      : "form",
      labelWidth : -20,
      items      : htmlEditor,
      border     : false
    }
    new Ext.Window({
      title      : "",
      layout     : "fit",
      height     : 300,
      width      : 600,
      items      : f,
      buttons    : [
        {
          text : "Is the html editor valid??",
          handler : function() {
            var isValid = Ext.getCmp("ext-comp-1003").form.isValid();
            var msg = (isValid) ? "valid" : "invalid";
            Ext.MessageBox.alert("Title", "The HTML Editor is " + msg);
          }
        }
      
      ]
    }).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Create a very simple modal Window with "autoTabs" from existing markup

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
 
--> 
<!-- Revised from Ext JS Library 3.0.0 --> 
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
    <script>
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    var win;
    var button = Ext.get("show-btn");
    button.on("click", function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!win){
            win = new Ext.Window({
                applyTo:"hello-win",
                layout:"fit",
                width:500,
                height:300,
                closeAction:"hide",
                plain: true,
                items: new Ext.TabPanel({
                    applyTo: "hello-tabs",
                    autoTabs:true,
                    activeTab:0,
                    deferredRender:false,
                    border:false
                }),
                buttons: [{
                    text:"Submit",
                    disabled:true
                },{
                    text: "Close",
                    handler: function(){
                        win.hide();
                    }
                }]
            });
        }
        win.show(this);
    });
});
</script>

</head>
<body>
<input type="button" id="show-btn" value="Hello World" /><br /><br />
<div id="hello-win" class="x-hidden">
    <div class="x-window-header">Hello Dialog</div>
    <div id="hello-tabs">
        <!-- Auto create tab 1 -->
        <div class="x-tab" title="Hello World 1">
            <p>Hello...</p>
        </div>
        <!-- Auto create tab 2 -->
        <div class="x-tab" title="Hello World 2">
            <p>... World!</p>
        </div>
    </div>
</div>
</body>
</html>

Create a window and set title, width, height and panel

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
function makeChildren(ownerTitle) {
  return nestedChildItems =  [
    {
      xtype : "panel",
      title : "Child Panel 1",
      html  : "Panels can contain Children",
      frame : true
    },
  ];
}
Ext.onReady(function() {
  new Ext.Window({
    title    : "Window 1",
    width    : 200,
    height   : 180,
    items    : makeChildren("Window 1")
  }).show();

});
</script> 
<div id="panel"></div>
</body>
</html>

Create Ext.form.TextField and add to Window

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){
  
    var w = new Ext.Window({
      items:[
        { xtype: "textfield", fieldLabel: "First Name"},
        new Ext.form.TextField({fieldLabel: "Surname"})
      ]
    });
    w.show();
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>

Dynamically add item to a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var myWin = new Ext.Window({
       height     : 300,
       width      : 300,
       title      : "A window with a container layout",
       autoScroll : true,
       items      : [],
       tbar : [
          {
             text    : "Add child",
             handler : function() {
                var numItems = myWin.items.getCount() + 1;
                myWin.add({
                   title       : "Child number " + numItems,
                   height      : 60,
                   frame       : true,
                   collapsible : true,
                   collapsed   : true,
                   html        : "asdf"
                });
                myWin.doLayout();
             }
          }
       ]
    });
    
    myWin.show();

});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Fit a panel to a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

    var myWin = new Ext.Window({
      height     : 200,
      width      : 200,
      layout     : "fit",
      autoScroll : true,
      border     : false,
      items      : [
        {
          title : "Panel1",
          html   : "fit!",
          frame  : true
        }
      ]
    });
    
    myWin.show();

});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Google map window

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
 
--> 
<!-- Revised from Ext JS Library 3.0.0 --> 
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<!-- GMaps API Key that works for www.extjs.ru -->
<!--<script src="http://maps.google.ru/maps?file=api&amp;v=2&amp;key=ABQIAAAA2CKu_qQN-JHtlfQ5L7BLlRRadLUjZPtnrRT4mXZqcP4UUH-2OxREmPm3GpN_NHsHuvuHd-QKI4YoRg" type="text/javascript"></script>-->
<!-- GMaps API Key that works for localhost -->
<script src="http://maps.google.ru/maps?file=api&amp;v=2.x&amp;key=ABQIAAAA2CKu_qQN-JHtlfQ5L7BLlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQl3I3p2yrGARYK4f4bkjp9NHpm5w" type="text/javascript"></script>

    <script src="ext-3.0.0/examples/ux/GMapPanel.js"></script>
    <script>
    /*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    var mapwin;
    var button = Ext.get("show-btn");
    button.on("click", function(){
        // create the window on the first click and reuse on subsequent clicks
        if(!mapwin){
            mapwin = new Ext.Window({
                layout: "fit",
                title: "GMap Window",
                closeAction: "hide",
                width:400,
                height:400,
                x: 40,
                y: 60,
                items: {
                    xtype: "gmappanel",
                    region: "center",
                    zoomLevel: 14,
                    gmapType: "map",
                    mapConfOpts: ["enableScrollWheelZoom","enableDoubleClickZoom","enableDragging"],
                    mapControls: ["GSmallMapControl","GMapTypeControl","NonExistantControl"],
                    setCenter: {
                        geoCodeAddr: "4 Yawkey Way, Boston, MA, 02215-3409, USA",
                        marker: {title: "Fenway Park"}
                    },
                    markers: [{
                        lat: 42.339641,
                        lng: -71.094224,
                        marker: {title: "Boston Museum of Fine Arts"},
                        listeners: {
                            click: function(e){
                                Ext.Msg.alert("Its fine", "and its art.");
                            }
                        }
                    },{
                        lat: 42.339419,
                        lng: -71.09077,
                        marker: {title: "Northeastern University"}
                    }]
                }
            });
            
        }
        
        mapwin.show();
        
    });
    
 });
    </script>

</head>
<body>
<h1>GMap Window</h1>
<p>This example shows how to create an extension and utilize an external library.</p>
<input type="button" id="show-btn" value="Gimme a Map" /><br /><br />
</body>
</html>

minimizable and maximizable Window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){
  
    var w = new Ext.Window(
        {
            height:50, 
            width: 100, 
            minimizable: true, 
            maximizable: true
    });
    w.show();
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>

Minimized to Body

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
function doMin() {
  this.collapse(false);
  this.alignTo(document.body, "bl-bl");
}
Ext.onReady(function(){
  
    var w = new Ext.Window({
      height: 50,
      width: 100,
      minimizable: true
    });
    w.on("minimize", doMin, w);
    w.show();
});
</script>
<body>
    <div id="animTarget">
    </div>
</body>
</html>

No border

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var win = new Ext.Window({
        height      : 305,
        width       : 200,
        modal       : true,
        title       : "Rigid window",
        html        : "Unable to move or resize.",
        plain       : true,
        border      : false,
        resizable   : false,
        draggable   : false,
        closable    : false,
        buttonAlign : "center",
        buttons     : [
            {
                text    : "OK",
                handler : function() {
                    win.close();
                }
            }
        ]
    })
    win.show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Not closable

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var win = new Ext.Window({
        height      : 305,
        width       : 200,
        modal       : true,
        title       : "Rigid window",
        html        : "Unable to move or resize.",
        plain       : true,
        border      : false,
        resizable   : false,
        draggable   : false,
        closable    : false,
        buttonAlign : "center",
        buttons     : [
            {
                text    : "OK",
                handler : function() {
                    win.close();
                }
            }
        ]
    })
    win.show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Not draggable

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var win = new Ext.Window({
        height      : 305,
        width       : 200,
        modal       : true,
        title       : "Rigid window",
        html        : "Unable to move or resize.",
        plain       : true,
        border      : false,
        resizable   : false,
        draggable   : false,
        closable    : false,
        buttonAlign : "center",
        buttons     : [
            {
                text    : "OK",
                handler : function() {
                    win.close();
                }
            }
        ]
    })
    win.show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Not resizable

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var win = new Ext.Window({
        height      : 305,
        width       : 200,
        modal       : true,
        title       : "Rigid window",
        html        : "Unable to move or resize.",
        plain       : true,
        border      : false,
        resizable   : false,
        draggable   : false,
        closable    : false,
        buttonAlign : "center",
        buttons     : [
            {
                text    : "OK",
                handler : function() {
                    win.close();
                }
            }
        ]
    })
    win.show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Place html to Ext Window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
  var panel = new Ext.Window({
    title    : "Static Panel",
    width    : 400,
    height   : 600,
    frame    : true,
    html     : "This is a static panel" 
  });
  panel.show()

});
</script> 
<div id="panel"></div>
</body>
</html>

Plain Window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){
  
    var w = new Ext.Window({
      height:50,
      width: 100,
      closable: false,
      draggable: false,
      resizable: false,
      plain: true
    });
    w.show();
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>

Set body style for a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    var names = [
        ["A"],
        ["B"],
        ["C"],
        ["D"]
    ];
    var mySimpleStore = new Ext.data.ArrayStore({
        data   : names,
        fields : ["name"]
    });
    var combo = {
        xtype        : "combo",
        fieldLabel   : "Letter",
        store        : mySimpleStore,
        displayField : "name",
        typeAhead    : true,
        mode         : "local"
    }
    new Ext.Window({
        title      : "Title here",
        height     : 100,
        layout     : "form",
        labelWidth : 80,
        bodyStyle  : "padding: 5px",
        items      : combo
    }).show()
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set item for a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    var names = [
        ["A"],
        ["B"],
        ["C"],
        ["D"]
    ];
    var mySimpleStore = new Ext.data.ArrayStore({
        data   : names,
        fields : ["name"]
    });
    var combo = {
        xtype        : "combo",
        fieldLabel   : "Letter",
        store        : mySimpleStore,
        displayField : "name",
        typeAhead    : true,
        mode         : "local"
    }
    new Ext.Window({
        title      : "Title here",
        height     : 100,
        layout     : "form",
        labelWidth : 80,
        bodyStyle  : "padding: 5px",
        items      : combo
    }).show()
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set layout for a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    var names = [
        ["A"],
        ["B"],
        ["C"],
        ["D"]
    ];
    var mySimpleStore = new Ext.data.ArrayStore({
        data   : names,
        fields : ["name"]
    });
    var combo = {
        xtype        : "combo",
        fieldLabel   : "Letter",
        store        : mySimpleStore,
        displayField : "name",
        typeAhead    : true,
        mode         : "local"
    }
    new Ext.Window({
        title      : "Title here",
        height     : 100,
        layout     : "form",
        labelWidth : 80,
        bodyStyle  : "padding: 5px",
        items      : combo
    }).show()
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set only height and width for a window

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){
  
    var w = new Ext.Window({height:50, width: 100});
    w.show();
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>

Set title for a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    var names = [
        ["A"],
        ["B"],
        ["C"],
        ["D"]
    ];
    var mySimpleStore = new Ext.data.ArrayStore({
        data   : names,
        fields : ["name"]
    });
    var combo = {
        xtype        : "combo",
        fieldLabel   : "Letter",
        store        : mySimpleStore,
        displayField : "name",
        typeAhead    : true,
        mode         : "local"
    }
    new Ext.Window({
        title      : "Title here",
        height     : 100,
        layout     : "form",
        labelWidth : 80,
        bodyStyle  : "padding: 5px",
        items      : combo
    }).show()
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set width and height for a window

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    Ext.QuickTips.init();
    var names = [
        ["A"],
        ["B"],
        ["C"],
        ["D"]
    ];
    var mySimpleStore = new Ext.data.ArrayStore({
        data   : names,
        fields : ["name"]
    });
    var combo = {
        xtype        : "combo",
        fieldLabel   : "Letter",
        store        : mySimpleStore,
        displayField : "name",
        typeAhead    : true,
        mode         : "local"
    }
    new Ext.Window({
        title      : "Title here",
        height     : 100,
        layout     : "form",
        labelWidth : 80,
        bodyStyle  : "padding: 5px",
        items      : combo
    }).show()
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set width, height, minWidth, minHeight for a window

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
        baseCls: "x-plain",
        layout:"absolute",
        url:"save-form.php",
        defaultType: "textfield",
        items: [{
            x: 0,
            y: 5,
            xtype:"label",
            text: "Send To:"
        },{
            x: 60,
            y: 0,
            name: "to",
            anchor:"100%"  // anchor width by percentage
        },{
            x: 0,
            y: 35,
            xtype:"label",
            text: "Subject:"
        },{
            x: 60,
            y: 30,
            name: "subject",
            anchor: "100%"  // anchor width by percentage
        },{
            x:0,
            y: 60,
            xtype: "textarea",
            name: "msg",
            anchor: "100% 100%"  // anchor width and height
        }]
    });
    var window = new Ext.Window({
        title: "Resize Me",
        width: 500,
        height:300,
        minWidth: 300,
        minHeight: 200,
        layout: "fit",
        plain:true,
        bodyStyle:"padding:5px;",
        buttonAlign:"center",
        items: form,
        buttons: [{
            text: "Send"
        },{
            text: "Cancel"
        }]
    });
    window.show();
});
</script> 
</body>
</html>

Set window animation target

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var win;
    var newWindow = function(btn) {
        if (! win) {
            win = new Ext.Window({
                 title    : "title",
                animateTarget : btn.el,
                html          : "My first Window",
                closeAction   : "hide",
                id            : "myWin",
                height        : 200,
                width         : 300,
                constrain     : true
            });
        }
        win.show();
    }
    new Ext.Button({
        renderTo : Ext.getBody(),
        text     : "Open my Window",
        style    : "margin: 100px",
        handler  : newWindow
    });
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set window autoscroll to true

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

var childPnl1 = {                                                    
   frame  : true,
   height : 50,
   html   : "My First Child Panel",
   title  : "First"
}

var childPnl2 = {                                                     
   xtype  : "panel",
   width  : 150,
   html   : "Second child",
   title  : "Second"
}
var myWin = new Ext.Window({                                          
   height     : 600,
   width      : 600,
   title      : "A window with a container layout",
   autoScroll : true,                                                
   items      : [                                                     
      childPnl1,
      childPnl2
   ],
});
myWin.show();

});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set Window autoScroll to true and anchor size

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

    var myWin = new Ext.Window({
      height     : 300,
      width      : 300,
      layout     : "anchor",
      autoScroll : true,
      border     : false,
      anchorSize : "400",
      items      : [
        {
          title  : "Panel1",
          anchor : "100%, 25%",
          frame  : true
        },
        {
          title  : "Panel2",
          anchor : "50%, 50%",
          frame  : true
        },
        {
          title  : "Panel3",
          anchor : "50%, 25%",
          frame  : true
        },
        {
          title  : "Panel3",
          anchor : "0, 25%",
          frame  : true
        }        
      ]
    
    });
    
    myWin.show();


});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set window border style

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

    var myWin =  new Ext.Window({
      height      : 220,
      width       : 230,
      bodyStyle   : "padding: 5px",
      layout      : "form",
      labelWidth  : 50,
      defaultType : "field",
      items       : [
        {
          fieldLabel : "Name",
          width      : 110
        },
        {
          fieldLabel : "Age",
          width      : 25  
        }
        ]
    });
    
    myWin.show();

});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set window close action to hide

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
    var win;
    var newWindow = function(btn) {
        if (! win) {
            win = new Ext.Window({
                 title    : "title",
                animateTarget : btn.el,
                html          : "My first Window",
                closeAction   : "hide",
                id            : "myWin",
                height        : 200,
                width         : 300,
                constrain     : true
            });
        }
        win.show();
    }
    new Ext.Button({
        renderTo : Ext.getBody(),
        text     : "Open my Window",
        style    : "margin: 100px",
        handler  : newWindow
    });
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set window default field type

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

    var myWin =  new Ext.Window({
      height      : 220,
      width       : 230,
      bodyStyle   : "padding: 5px",
      layout      : "form",
      labelWidth  : 50,
      defaultType : "field",
      items       : [
        {
          fieldLabel : "Name",
          width      : 110
        },
        {
          fieldLabel : "Age",
          width      : 25  
        }
        ]
    });
    
    myWin.show();

});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Set window label width

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

    var myWin =  new Ext.Window({
      height      : 220,
      width       : 230,
      bodyStyle   : "padding: 5px",
      layout      : "form",
      labelWidth  : 50,
      defaultType : "field",
      items       : [
        {
          fieldLabel : "Name",
          width      : 110
        },
        {
          fieldLabel : "Age",
          width      : 25  
        }
        ]
    });
    
    myWin.show();

});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Window anchor size

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

    var myWin = new Ext.Window({
      height     : 300,
      width      : 300,
      layout     : "anchor",
      autoScroll : true,
      border     : false,
      anchorSize : "400",
      items      : [
        {
          title  : "Panel1",
          anchor : "100%, 25%",
          frame  : true
        },
        {
          title  : "Panel2",
          anchor : "50%, 50%",
          frame  : true
        },
        {
          title  : "Panel3",
          anchor : "50%, 25%",
          frame  : true
        },
        {
          title  : "Panel3",
          anchor : "0, 25%",
          frame  : true
        }        
      ]
    
    });
    
    myWin.show();


});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Window buttonAlign: "center"

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
        baseCls: "x-plain",
        layout:"absolute",
        url:"save-form.php",
        defaultType: "textfield",
        items: [{
            x: 0,
            y: 5,
            xtype:"label",
            text: "Send To:"
        },{
            x: 60,
            y: 0,
            name: "to",
            anchor:"100%"  // anchor width by percentage
        },{
            x: 0,
            y: 35,
            xtype:"label",
            text: "Subject:"
        },{
            x: 60,
            y: 30,
            name: "subject",
            anchor: "100%"  // anchor width by percentage
        },{
            x:0,
            y: 60,
            xtype: "textarea",
            name: "msg",
            anchor: "100% 100%"  // anchor width and height
        }]
    });
    var window = new Ext.Window({
        title: "Resize Me",
        width: 500,
        height:300,
        minWidth: 300,
        minHeight: 200,
        layout: "fit",
        plain:true,
        bodyStyle:"padding:5px;",
        buttonAlign:"center",
        items: form,
        buttons: [{
            text: "Send"
        },{
            text: "Cancel"
        }]
    });
    window.show();
});
</script> 
</body>
</html>

Window: closable, draggable, resizable

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){
  
      var w = new Ext.Window({
      height:50,
      width: 100,
      closable: false,
      draggable: false,
      resizable: false
    });
    w.show();
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>

Window layout = anchor

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

    var myWin = new Ext.Window({
      height     : 300,
      width      : 300,
      layout     : "anchor",
      autoScroll : true,
      border     : false,
      anchorSize : "400",
      items      : [
        {
          title  : "Panel1",
          anchor : "100%, 25%",
          frame  : true
        },
        {
          title  : "Panel2",
          anchor : "50%, 50%",
          frame  : true
        },
        {
          title  : "Panel3",
          anchor : "50%, 25%",
          frame  : true
        },
        {
          title  : "Panel3",
          anchor : "0, 25%",
          frame  : true
        }        
      ]
    
    });
    
    myWin.show();


});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Window with animated layout

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

var panel1 =     {
  xtype : "panel",
  title : "Plain Panel",
  html  : "Panel with an xtype specified"
}
new Ext.Window({
  width        : 300,
  height       : 300,
  title        : "Accordion window",
  layout       : "accordion",
  border       : false,
  layoutConfig : {
    animate : true
  },
  items : [panel1,panel1,panel1,]
}).show();
});
</script> 
<div id="div1">asdf</div>
</body>
</html>

Window with auto height

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">

Ext.onReady(function(){
  
    var w = new Ext.Window({
        width: 100, 
        autoHeight: true,
      html: "<p>test test test.</p>"
    });
    w.show();
});
</script>
<body>
    <div id="mainContent">
    </div>
</body>
</html>

Window without border

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {

    var myWin = new Ext.Window({
      height     : 300,
      width      : 300,
      layout     : "anchor",
      autoScroll : true,
      border     : false,
      anchorSize : "400",
      items      : [
        {
          title  : "Panel1",
          anchor : "100%, 25%",
          frame  : true
        },
        {
          title  : "Panel2",
          anchor : "50%, 50%",
          frame  : true
        },
        {
          title  : "Panel3",
          anchor : "50%, 25%",
          frame  : true
        },
        {
          title  : "Panel3",
          anchor : "0, 25%",
          frame  : true
        }        
      ]
    
    });
    
    myWin.show();


});
</script> 
<div id="div1">asdf</div>
</body>
</html>

JavaScript DHTML/Ext JS/Window

Содержание

Add components to a window

Add html code to a window

Add top Toolbar, bottom Toolbar and button to a window

Add two panels to a window

Add two TextFields to a window

Call close to hide the window

Call show method to display a window

Call show to display the window

Collapsible Panel

Collapsible Window

Create a form control, add to a form and then add the form to the window

Create a very simple modal Window with "autoTabs" from existing markup

Create a window and set title, width, height and panel

Create Ext.form.TextField and add to Window

Dynamically add item to a window

Fit a panel to a window

Google map window

minimizable and maximizable Window

Minimized to Body

No border

Not closable

Not draggable

Not resizable

Place html to Ext Window

Plain Window

Set body style for a window

Set item for a window

Set layout for a window

Set only height and width for a window

Set title for a window

Set width and height for a window

Set width, height, minWidth, minHeight for a window

Set window animation target

Set window autoscroll to true

Set Window autoScroll to true and anchor size

Set window border style

Set window close action to hide

Set window default field type

Set window label width

Window anchor size

Window buttonAlign: "center"

Window: closable, draggable, resizable

Window layout = anchor

Window with animated layout

Window with auto height

Window without border

Навигация

Поиск