JavaScript DHTML/Ext JS/Panel
Содержание
- 1 Add bottom Toolbar for Ext.Panel
- 2 Add Button to a toolbar on a Ext.Panel
- 3 Add children panel to panel
- 4 Add Ext.Panel to DIV tag
- 5 Add panel to a form
- 6 Add panel to window as items
- 7 Add panel to window items
- 8 Add toolbar to Ext.Panel
- 9 Apply array data to Ext.Panel
- 10 collapsed Panel
- 11 Create Panel with title, width, html and render to body
- 12 Highlight Panel body
- 13 Inline panel creation
- 14 Load your html file to a Ext.Panel
- 15 Nested logic to add panel to a window
- 16 Render Ext.Panel to a DIV tag
- 17 Render Panel to body
- 18 Set layout for Ext.Panel to fit
- 19 Set panel height
- 20 Set Panel layout to Ext.Panel
- 21 Set title, width and height for Panel
- 22 Set width and height for panel
- 23 Set xtype, title and html for a Panel
- 24 Set X, Y, height, width for a panel
- 25 Support for standard Panel features such as framing, buttons and toolbars
- 26 Three level Nested Panel
Add bottom Toolbar for Ext.Panel
<!--
/*!
* 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 from ext3.0.0 -->
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myData = {
records : [
{ name : "Record 0", column1 : "0", column2 : "0" },
{ name : "Record 1", column1 : "1", column2 : "1" },
{ name : "Record 2", column1 : "2", column2 : "2" },
{ name : "Record 3", column1 : "3", column2 : "3" },
{ name : "Record 4", column1 : "4", column2 : "4" },
{ name : "Record 5", column1 : "5", column2 : "5" },
{ name : "Record 6", column1 : "6", column2 : "6" },
{ name : "Record 7", column1 : "7", column2 : "7" },
{ name : "Record 8", column1 : "8", column2 : "8" },
{ name : "Record 9", column1 : "9", column2 : "9" }
]
};
// Generic fields array to use in both store defs.
var fields = [
{name: "name", mapping : "name"},
{name: "column1", mapping : "column1"},
{name: "column2", mapping : "column2"}
];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : "records"
});
// Column Model shortcut array
var cols = [
{ id : "name", header: "Record Name", width: 160, sortable: true, dataIndex: "name"},
{header: "column1", width: 50, sortable: true, dataIndex: "column1"},
{header: "column2", width: 50, sortable: true, dataIndex: "column2"}
];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup : "gridDDGroup",
store : gridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : "name",
width : 650,
height : 325,
region : "west",
title : "Data Grid",
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});
//Simple "border layout" panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout: "fit",
renderTo : "panel",
items : [
grid
],
bbar : [
"->", // Fill
{
text : "Reset Example",
handler : function() {
//refresh source grid
gridStore.loadData(myData);
}
}
]
});
});
</script>
<div id="panel"></div>
</body>
</html>
Add Button to a toolbar on a Ext.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 p = new Ext.Panel({
title: "Title",
width: 300,
html: "html code <B>here</B>",
tbar: [{
text: "Click",
handler: function(){
alert("asdf");
}
}],
renderTo: Ext.getBody()
});
});
</script>
</body>
</html>
Add children panel to 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.Panel({
renderTo : Ext.getBody(),
title : "Panel 1",
width : 200,
height : 180,
items : makeChildren("Panel 1")
});
});
</script>
<div id="panel"></div>
</body>
</html>
Add Ext.Panel to DIV tag
<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 example1 = new Ext.Panel({
applyTo:"my",
title:"Example 1",
width:250,
height:250,
frame:true,
autoLoad:{
url:"your.htm"
}
});
});
</script>
<body>
<div id="my" style="margin:25px;"></div>
</body>
</html>
Add panel to a form
<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
},
{
xtype : "panel",
fieldLabel : "Field",
labelSeparator : "asdf",
frame : true,
title : "Instructions",
html : "Please fill in the form",
height : 55
}
]
});
myWin.show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Add panel to window as items
<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 : "line 1<br/>line 2<hr>",
id : "panel2",
frame : true
}
var myWin = new Ext.Window({
id : "myWin",
height : 250,
width : 400,
items : [
panel1,
panel2
]
});
myWin.show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Add panel to window items
<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>
Add toolbar to Ext.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 p = new Ext.Panel({
title: "Title",
width: 300,
html: "html code <B>here</B>",
tbar: [{
text: "Click",
handler: function(){
alert("asdf");
}
}],
renderTo: Ext.getBody()
});
});
</script>
</body>
</html>
Apply array data to Ext.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>
<script type="text/javascript">
Ext.onReady(function(){
var cls = "myclass";
var member = {
firstName: "A",
lastName: "B"
};
var pnl = new Ext.Panel({
applyTo: "mainContent",
width: 200,
height: 100,
bodyStyle: "padding:5px",
title: "title",
html: String.format("<div class=\"{0}\">{2}, {1}</div>", cls, member.firstName, member.lastName)
});
});
</script>
<body>
<div id="mainContent">
</div>
</body>
</html>
collapsed Panel
<!--
/*!
* 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(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = "side";
var bd = Ext.getBody();
/*
* Form 2
*/
bd.createChild({tag: "h2", html: "Form 2 - Adding fieldsets"});
var fsf = new Ext.FormPanel({
labelWidth: 75, // label settings here cascade unless overridden
url:"save-form.php",
frame:true,
title: "Simple Form with FieldSets",
bodyStyle:"padding:5px 5px 0",
width: 350,
items: [{
xtype:"fieldset",
checkboxToggle:true,
title: "User Information",
autoHeight:true,
defaults: {width: 210},
defaultType: "textfield",
collapsed: true,
items :[{
fieldLabel: "First Name",
name: "first",
allowBlank:false
},{
fieldLabel: "Last Name",
name: "last"
},{
fieldLabel: "Company",
name: "company"
}, {
fieldLabel: "Email",
name: "email",
vtype:"email"
}
]
},{
xtype:"fieldset",
title: "Phone Number",
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: "textfield",
items :[{
fieldLabel: "Home",
name: "home",
value: "(888) 555-1212"
},{
fieldLabel: "Business",
name: "business"
},{
fieldLabel: "Mobile",
name: "mobile"
},{
fieldLabel: "Fax",
name: "fax"
}
]
}],
buttons: [{
text: "Save"
},{
text: "Cancel"
}]
});
fsf.render(document.body);
});
</script>
</div>
</body>
</html>
Create Panel with title, width, html and render 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>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var p = new Ext.Panel({
title: "Title",
width: 300,
html: "html code <B>here</B>",
renderTo: Ext.getBody()
});
});
</script>
</body>
</html>
Highlight Panel body
<!--
/*!
* 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>
<body>
<!-- Revised from demo code from ext3.0.0 -->
<script type="text/javascript">
Ext.onReady(function() {
var data = {
name: "A",
company: "B",
city: "D",
state: "E"
};
var p = new Ext.Panel({
title: "Title",
width: 300,
html: "html code <B>here</B>",
tbar: [{
text: "Template",
handler: function(){
var tpl = new Ext.Template(
"Name: {name}",
"Company: {company}",
"Location: {city}, {state}"
);
tpl.overwrite(p.body, data);
p.body.highlight("#00ff00", {block:true});
}
}],
renderTo: Ext.getBody()
});
});
</script>
</body>
</html>
Inline panel creation
<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() {
new Ext.Window({
width : 300,
height : 650,
title : "Accordion window",
layout : "accordion",
border : false,
layoutConfig : {
animate : true
},
items : [
{
xtype : "panel",
title : "Plain Panel",
html : "asdf"
},
{
title : "Plain Panel 2",
html : "asdf"
}
]
}).show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Load your html file to a Ext.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>
<script type="text/javascript">
Ext.onReady(function(){
var example1 = new Ext.Panel({
applyTo:Ext.getBody(),
title:"Example 1",
width:250,
height:250,
frame:true,
autoLoad:{
url:"your.htm"
}
});
});
</script>
<body>
</body>
</html>
Nested logic to add 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() {
new Ext.Window({
width : 300,
height : 300,
title : "Accordion window",
layout : "accordion",
border : false,
layoutConfig : {
animate : true
},
items : [
{
xtype : "form",
title : "Form Panel",
defaults : {
width : 150
},
items : [
{
xtype : "textfield",
fieldLabel : "Name"
},
{
xtype : "checkbox",
fieldLabel : "CheckBox"
},
{
xtype : "combo",
fieldLabel : "Type",
store : [ "A", "B", "C" ]
}
]
},
{
xtype : "form",
title : "Form Panel",
defaults : {
width : 150
},
items : [
{
xtype : "textfield",
fieldLabel : "Name"
},
{
xtype : "checkbox",
fieldLabel : "CheckBox"
},
{
xtype : "combo",
fieldLabel : "Type",
store : [ "A", "B", "C" ]
}
]
},
{
xtype : "form",
title : "Form Panel",
defaults : {
width : 150
},
items : [
{
xtype : "textfield",
fieldLabel : "Name"
},
{
xtype : "checkbox",
fieldLabel : "CheckBox"
},
{
xtype : "combo",
fieldLabel : "Type",
store : [ "A", "B", "C" ]
}
]
},
]
}).show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Render Ext.Panel to a DIV tag
<!--
/*!
* 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 from ext3.0.0 -->
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myData = {
records : [
{ name : "Record 0", column1 : "0", column2 : "0" },
{ name : "Record 1", column1 : "1", column2 : "1" },
{ name : "Record 2", column1 : "2", column2 : "2" },
{ name : "Record 3", column1 : "3", column2 : "3" },
{ name : "Record 4", column1 : "4", column2 : "4" },
{ name : "Record 5", column1 : "5", column2 : "5" },
{ name : "Record 6", column1 : "6", column2 : "6" },
{ name : "Record 7", column1 : "7", column2 : "7" },
{ name : "Record 8", column1 : "8", column2 : "8" },
{ name : "Record 9", column1 : "9", column2 : "9" }
]
};
// Generic fields array to use in both store defs.
var fields = [
{name: "name", mapping : "name"},
{name: "column1", mapping : "column1"},
{name: "column2", mapping : "column2"}
];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : "records"
});
// Column Model shortcut array
var cols = [
{ id : "name", header: "Record Name", width: 160, sortable: true, dataIndex: "name"},
{header: "column1", width: 50, sortable: true, dataIndex: "column1"},
{header: "column2", width: 50, sortable: true, dataIndex: "column2"}
];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup : "gridDDGroup",
store : gridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : "name",
width : 650,
height : 325,
region : "west",
title : "Data Grid",
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});
//Simple "border layout" panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout: "fit",
renderTo : "panel",
items : [
grid
],
bbar : [
"->", // Fill
{
text : "Reset Example",
handler : function() {
//refresh source grid
gridStore.loadData(myData);
}
}
]
});
});
</script>
<div id="panel"></div>
</body>
</html>
Render Panel 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>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var p = new SamplePanel({
title: "Standard",
renderTo : Ext.getBody(),
tbar: [{
xtype:"splitbutton",
text: "Menu Button",
iconCls: "add16",
menu: [{text: "Menu Button 1"}]
},"-",{
xtype:"splitbutton",
text: "Cut",
iconCls: "add16",
menu: [{text: "Cut Menu Item"}]
},{
text: "Copy",
iconCls: "add16"
},{
text: "Paste",
iconCls: "add16",
menu: [{text: "Paste Menu Item"}]
},"-",{
text: "Format",
iconCls: "add16"
}]
});
});
</script>
<div id="panel"></div>
</body>
</html>
Set layout for Ext.Panel to fit
<!--
/*!
* 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 from ext3.0.0 -->
<body>
<script type="text/javascript">
Ext.onReady(function() {
var myData = {
records : [
{ name : "Record 0", column1 : "0", column2 : "0" },
{ name : "Record 1", column1 : "1", column2 : "1" },
{ name : "Record 2", column1 : "2", column2 : "2" },
{ name : "Record 3", column1 : "3", column2 : "3" },
{ name : "Record 4", column1 : "4", column2 : "4" },
{ name : "Record 5", column1 : "5", column2 : "5" },
{ name : "Record 6", column1 : "6", column2 : "6" },
{ name : "Record 7", column1 : "7", column2 : "7" },
{ name : "Record 8", column1 : "8", column2 : "8" },
{ name : "Record 9", column1 : "9", column2 : "9" }
]
};
// Generic fields array to use in both store defs.
var fields = [
{name: "name", mapping : "name"},
{name: "column1", mapping : "column1"},
{name: "column2", mapping : "column2"}
];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : "records"
});
// Column Model shortcut array
var cols = [
{ id : "name", header: "Record Name", width: 160, sortable: true, dataIndex: "name"},
{header: "column1", width: 50, sortable: true, dataIndex: "column1"},
{header: "column2", width: 50, sortable: true, dataIndex: "column2"}
];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup : "gridDDGroup",
store : gridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : "name",
width : 650,
height : 325,
region : "west",
title : "Data Grid",
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});
//Simple "border layout" panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout: "fit",
renderTo : "panel",
items : [
grid
],
bbar : [
"->", // Fill
{
text : "Reset Example",
handler : function() {
//refresh source grid
gridStore.loadData(myData);
}
}
]
});
});
</script>
<div id="panel"></div>
</body>
</html>
Set panel 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>
<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>
Set Panel layout to Ext.Panel
<!--
/*!
* 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.onReady(function() {
var item1 = new Ext.Panel({
title: "Accordion Item 1",
html: "<empty panel>",
cls:"empty"
});
var item2 = new Ext.Panel({
title: "Accordion Item 2",
html: "<empty panel>",
cls:"empty"
});
var item3 = new Ext.Panel({
title: "Accordion Item 3",
html: "<empty panel>",
cls:"empty"
});
var item4 = new Ext.Panel({
title: "Accordion Item 4",
html: "<empty panel>",
cls:"empty"
});
var item5 = new Ext.Panel({
title: "Accordion Item 5",
html: "<empty panel>",
cls:"empty"
});
var accordion = new Ext.Panel({
region:"west",
margins:"5 0 5 5",
split:true,
width: 210,
layout:"accordion",
items: [item1, item2, item3, item4, item5]
});
var viewport = new Ext.Viewport({
layout:"border",
items:[
accordion, {
region:"center",
margins:"5 5 5 0",
cls:"empty",
bodyStyle:"background:#f1f1f1",
html:"<br/><br/><empty center panel>"
}]
});
});
</script>
</body>
</html>
Set title, width and height for 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.Panel({
renderTo : Ext.getBody(),
title : "Panel 1",
width : 200,
height : 180,
items : makeChildren("Panel 1")
});
});
</script>
<div id="panel"></div>
</body>
</html>
Set width and height for 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 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 xtype, title and html for a 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 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>
Set X, Y, height, width for a 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 myWin = new Ext.Window({
height : 300,
width : 300,
layout : "absolute",
autoScroll : true,
id : "myWin",
border : false,
items : [
{
title : "Panel1",
x : 5,
y : 5,
height : 100,
width : 100,
html : "asdf",
frame : true
},
{
title : "Panel2",
x : 10,
y : 110,
height : 75,
width : 77,
html : "asdf",
frame : true
}
]
});
myWin.show();
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Support for standard Panel features such as framing, buttons and toolbars
<!--
/*!
* 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>
<script type="text/javascript" src="ext-3.0.0/examples/ux/RowExpander.js"></script>
<style type="text/css">
body .x-panel {
margin-bottom:20px;
}
.icon-grid {
background-image:url(ext-3.0.0/examples/shared/icons/fam/grid.png) !important;
}
#button-grid .x-panel-body {
border:1px solid #99bbe8;
border-top:0 none;
}
.add {
background-image:url(ext-3.0.0/examples/shared/icons/fam/add.gif) !important;
}
.option {
background-image:url(ext-3.0.0/examples/shared/icons/fam/plugin.gif) !important;
}
.remove {
background-image:url(ext-3.0.0/examples/shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(ext-3.0.0/examples/shared/icons/save.gif) !important;
}
</style>
</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(){
Ext.QuickTips.init();
var xg = Ext.grid;
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: "company"},
{name: "price", type: "float"},
{name: "change", type: "float"},
{name: "pctChange", type: "float"},
{name: "lastChange", type: "date", dateFormat: "n/j h:ia"},
{name: "industry"},
{name: "desc"}
]);
////////////////////////////////////////////////////////////////////////////////////////
// Grid 4
////////////////////////////////////////////////////////////////////////////////////////
var sm2 = new xg.CheckboxSelectionModel({
listeners: {
// On selection change, set enabled state of the removeButton
// which was placed into the GridPanel using the ref config
selectionchange: function(sm) {
if (sm.getCount()) {
grid4.removeButton.enable();
} else {
grid4.removeButton.disable();
}
}
}
});
var grid4 = new xg.GridPanel({
id:"button-grid",
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
sm2,
{id:"company",header: "Company", width: 40, sortable: true, dataIndex: "company"},
{header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"},
{header: "Change", width: 20, sortable: true, dataIndex: "change"},
{header: "% Change", width: 20, sortable: true, dataIndex: "pctChange"},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
]),
sm: sm2,
viewConfig: {
forceFit:true
},
columnLines: true,
// inline buttons
buttons: [{text:"Save"},{text:"Cancel"}],
buttonAlign:"center",
// inline toolbars
tbar:[{
text:"Add Something",
tooltip:"Add a new row",
iconCls:"add"
}, "-", {
text:"Options",
tooltip:"Blah blah blah blaht",
iconCls:"option"
},"-",{
text:"Remove Something",
tooltip:"Remove the selected item",
iconCls:"remove",
// Place a reference in the GridPanel
ref: "../removeButton",
disabled: true
}],
width:600,
height:300,
frame:true,
title:"Support for standard Panel features such as framing, buttons and toolbars",
iconCls:"icon-grid",
renderTo: document.body
});});
// Array data for the grids
Ext.grid.dummyData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am", "Manufacturing"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am", "Manufacturing"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am", "Manufacturing"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am", "Finance"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am", "Services"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am", "Services"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am", "Manufacturing"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am", "Services"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am", "Finance"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am", "Manufacturing"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am", "Manufacturing"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am", "Manufacturing"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am", "Automotive"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am", "Computer"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am", "Manufacturing"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am", "Computer"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am", "Computer"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am", "Medical"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am", "Finance"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am", "Food"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am", "Medical"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am", "Computer"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am", "Services", "Medical"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am", "Food"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am", "Retail"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am", "Manufacturing"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am", "Computer"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am", "Services"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am", "Retail"],
["Walt Disney Company (The) (Holding Company)",29.89,0.24,0.81,"9/1 12:00am", "Services"]
];
// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.");
}
</script>
</body>
</html>
Three level Nested 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",
frame : true,
items : {
xtype : "panel",
title : "Child 1 of "Child Panel 1"",
html : "a grand child of " + ownerTitle,
frame : true
}
}
];
}
Ext.onReady(function() {
new Ext.Panel({
renderTo : Ext.getBody(),
title : "Panel 1",
width : 500,
height : 680,
items : makeChildren("Panel 1")
});
});
</script>
<div id="panel"></div>
</body>
</html>