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
<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 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>
</body> </html>
</source>
Add Button to a toolbar on a Ext.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 p = new Ext.Panel({
title: "Title",
width: 300,
html: "html code here",
tbar: [{
text: "Click",
handler: function(){
alert("asdf");
}
}],
renderTo: Ext.getBody()
});
}); </script>
</body> </html>
</source>
Add children panel to 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.Panel({
renderTo : Ext.getBody(),
title : "Panel 1",
width : 200,
height : 180,
items : makeChildren("Panel 1")
});
}); </script>
</body> </html>
</source>
Add Ext.Panel to DIV tag
<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 example1 = new Ext.Panel({
applyTo:"my",
title:"Example 1",
width:250,
height:250,
frame:true,
autoLoad:{
url:"your.htm"
}
});
});
</script> <body>
</body> </html>
</source>
Add panel to a form
<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
},
{
xtype : "panel",
fieldLabel : "Field",
labelSeparator : "asdf",
frame : true,
title : "Instructions",
html : "Please fill in the form",
height : 55
}
]
});
myWin.show();
}); </script>
</body> </html>
</source>
Add panel to window as items
<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 : "line 1line 2
",
id : "panel2",
frame : true
}
var myWin = new Ext.Window({
id : "myWin",
height : 250,
width : 400,
items : [
panel1,
panel2
]
});
myWin.show();
}); </script>
</body> </html>
</source>
Add panel to window items
<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>
Add toolbar to Ext.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 p = new Ext.Panel({
title: "Title",
width: 300,
html: "html code here",
tbar: [{
text: "Click",
handler: function(){
alert("asdf");
}
}],
renderTo: Ext.getBody()
});
}); </script> </body> </html>
</source>
Apply array data to Ext.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> <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("});
}); </script> <body>
</body> </html>
</source>
collapsed 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 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>
</source>
Create Panel with title, width, html and render 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> <body> <script type="text/javascript"> Ext.onReady(function() {
var p = new Ext.Panel({
title: "Title",
width: 300,
html: "html code here",
renderTo: Ext.getBody()
});
}); </script>
</body> </html>
</source>
Highlight Panel 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> <body>
<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 here",
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>
</source>
Inline panel creation
<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() {
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>
</body> </html>
</source>
Load your html file to a Ext.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> <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>
</source>
Nested logic to add 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() {
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>
</body> </html>
</source>
Render Ext.Panel to a DIV tag
<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 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>
</body> </html>
</source>
Render Panel 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> <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>
</body> </html>
</source>
Set layout for Ext.Panel to fit
<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 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>
</body> </html>
</source>
Set panel 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> <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>
Set Panel layout to Ext.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 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:"
<empty center panel>"
}]
});
});
</script> </body> </html>
</source>
Set title, width and height for 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.Panel({
renderTo : Ext.getBody(),
title : "Panel 1",
width : 200,
height : 180,
items : makeChildren("Panel 1")
});
}); </script>
</body> </html>
</source>
Set width and height for 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 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 xtype, title and html for a 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 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>
Set X, Y, height, width for a 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 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>
</body> </html>
</source>
Support for standard Panel features such as framing, buttons and toolbars
<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 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>
<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.
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>
</source>
Three level Nested 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",
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>
</body> </html>
</source>
