JavaScript DHTML/Ext JS/Window
Содержание
- 1 Add components to a window
- 2 Add html code to a window
- 3 Oh
- 3.1 Add top Toolbar, bottom Toolbar and button to a window
- 3.2 Add two panels to a window
- 3.3 Add two TextFields to a window
- 3.4 Call close to hide the window
- 3.5 Call show method to display a window
- 3.6 Call show to display the window
- 3.7 Collapsible Panel
- 3.8 Collapsible Window
- 3.9 Create a form control, add to a form and then add the form to the window
- 3.10 Create a very simple modal Window with "autoTabs" from existing markup
- 3.11 Create a window and set title, width, height and panel
- 3.12 Create Ext.form.TextField and add to Window
- 3.13 Dynamically add item to a window
- 3.14 Fit a panel to a window
- 3.15 Google map window
- 4 GMap Window
- 4.1 minimizable and maximizable Window
- 4.2 Minimized to Body
- 4.3 No border
- 4.4 Not closable
- 4.5 Not draggable
- 4.6 Not resizable
- 4.7 Place html to Ext Window
- 4.8 Plain Window
- 4.9 Set body style for a window
- 4.10 Set item for a window
- 4.11 Set layout for a window
- 4.12 Set only height and width for a window
- 4.13 Set title for a window
- 4.14 Set width and height for a window
- 4.15 Set width, height, minWidth, minHeight for a window
- 4.16 Set window animation target
- 4.17 Set window autoscroll to true
- 4.18 Set Window autoScroll to true and anchor size
- 4.19 Set window border style
- 4.20 Set window close action to hide
- 4.21 Set window default field type
- 4.22 Set window label width
- 4.23 Window anchor size
- 4.24 Window buttonAlign: "center"
- 4.25 Window: closable, draggable, resizable
- 4.26 Window layout = anchor
- 4.27 Window with animated layout
- 4.28 Window with auto height
- 4.29 Window without border
Add components to a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Add html code to a window
<source lang="html4strict">
<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: "Oh
"}); w.show();
}); </script> <body>
</body> </html>
</source>
Add top Toolbar, bottom Toolbar and button to a window
<source lang="html4strict">
<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: "test.
"}); w.show();
}); </script> <body>
</body> </html>
</source>
Add two panels to a window
<source lang="html4strict">
<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 : "I am Panel2",
id : "panel2",
frame : true
}
var myWin = new Ext.Window({
id : "myWin",
height : 400,
width : 400,
items : [
panel1,
panel2
]
});
myWin.show();
}); </script>
</body> </html>
</source>
Add two TextFields to a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Call close to hide the window
<source lang="html4strict">
<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>
</body> </html>
</source>
Call show method to display a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Call show to display the window
<source lang="html4strict">
<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>
</body> </html>
</source>
Collapsible Panel
<source lang="html4strict">
<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>
</body> </html>
</source>
Collapsible Window
<source lang="html4strict">
<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>
</body> </html>
</source>
Create a form control, add to a form and then add the form to the window
<source lang="html4strict">
<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>
</body> </html>
</source>
Create a very simple modal Window with "autoTabs" from existing markup
<source lang="html4strict">
<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" />
Hello...
... World!
</body> </html>
</source>
Create a window and set title, width, height and panel
<source lang="html4strict">
<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>
</body> </html>
</source>
Create Ext.form.TextField and add to Window
<source lang="html4strict">
<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>
</body> </html>
</source>
Dynamically add item to a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Fit a panel to a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Google map window
<source lang="html4strict">
<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 src="http://maps.google.ru/maps?file=api&v=2.x&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>
GMap Window
This example shows how to create an extension and utilize an external library.
<input type="button" id="show-btn" value="Gimme a Map" />
</body>
</html>
</source>
minimizable and maximizable Window
<source lang="html4strict">
<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>
</body> </html>
</source>
Minimized to Body
<source lang="html4strict">
<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>
</body> </html>
</source>
No border
<source lang="html4strict">
<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>
</body> </html>
</source>
Not closable
<source lang="html4strict">
<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>
</body> </html>
</source>
Not draggable
<source lang="html4strict">
<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>
</body> </html>
</source>
Not resizable
<source lang="html4strict">
<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>
</body> </html>
</source>
Place html to Ext Window
<source lang="html4strict">
<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>
</body> </html>
</source>
Plain Window
<source lang="html4strict">
<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>
</body> </html>
</source>
Set body style for a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Set item for a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Set layout for a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Set only height and width for a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Set title for a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Set width and height for a window
<source lang="html4strict">
<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>
</body> </html>
</source>
Set width, height, minWidth, minHeight for a window
<source lang="html4strict">
<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 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>
</source>
Set window animation target
<source lang="html4strict">
<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>
</body> </html>
</source>
Set window autoscroll to true
<source lang="html4strict">
<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>
</body> </html>
</source>
Set Window autoScroll to true and anchor size
<source lang="html4strict">
<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>
</body> </html>
</source>
Set window border style
<source lang="html4strict">
<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>
</body> </html>
</source>
Set window close action to hide
<source lang="html4strict">
<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>
</body> </html>
</source>
Set window default field type
<source lang="html4strict">
<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>
</body> </html>
</source>
Set window label width
<source lang="html4strict">
<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>
</body> </html>
</source>
Window anchor size
<source lang="html4strict">
<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>
</body> </html>
</source>
Window buttonAlign: "center"
<source lang="html4strict">
<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 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>
</source>
Window: closable, draggable, resizable
<source lang="html4strict">
<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>
</body> </html>
</source>
Window layout = anchor
<source lang="html4strict">
<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>
</body> </html>
</source>
Window with animated layout
<source lang="html4strict">
<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>
</body> </html>
</source>
Window with auto height
<source lang="html4strict">
<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: "test test test.
"}); w.show();
}); </script> <body>
</body> </html>
</source>
Window without border
<source lang="html4strict">
<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>
</body> </html>
</source>
