JavaScript DHTML/Ext JS/GridPanel — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 07:21, 26 мая 2010
Содержание
- 1 Add buttons to GridPanel
- 2 Add rowselect event handler to a GridPanel
- 3 Add row to a table
- 4 autoExpandColumn: "column name",
- 5 Buffer Grid Example
- 6 Create a grid with from an existing, unformatted HTML table.
- 7 Data Binding Example - Implemented with classes
- 8 Define column model and set header, dataIndex and sortable
- 9 Define RowSelectionModel and set single selection
- 10 GridPanel: buttons
- 11 GridPanel Framed with Checkbox Selection and Horizontal Scrolling
- 12 GridPanel: framing
- 13 GridPanel: toolbars
- 14 Grid Plugins
- 15 Grid with Numbered Rows and Force Fit
- 16 Grouping GridPanel
- 17 Layout GridPanel(table) and FormPanel in border layout
- 18 Mark changed field
- 19 Reload data to GridPanel
- 20 Remove all data from GridPanel
- 21 Remove a row from a table
- 22 Set autoExpandColumn for GridPanel
- 23 Set column name, width, height, title for Ext.grid.GridPanel
- 24 Set column to sortable
- 25 Set RowSelectionModel for Ext.grid.GridPanel
- 26 Set up data, column for Ext.grid.GridPanel
- 27 Sort table by name
- 28 Static data grid
- 29 stripeRows: true,
- 30 Table Selection
- 31 The Grid demonstrates the use of creation of derived fields in a Record created using a custom convert function, and the use of column renderers.
- 32 Updating the grid data via a button click
- 33 Using a Grid with a Form
Add buttons to GridPanel
<!--
/*!
* 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>
Add rowselect event handler to a GridPanel
<!--
/*!
* 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(){
// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: "ext-3.0.0/examples/grid/sheldon.xml",
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: "Item",
id: "ASIN",
totalRecords: "@total"
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: "Author", mapping: "ItemAttributes > Author"},
"Title",
"Manufacturer",
"ProductGroup",
// Detail URL is not part of the column model of the grid
"DetailPageURL"
])
});
// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Author", width: 120, dataIndex: "Author", sortable: true},
{header: "Title", width: 180, dataIndex: "Title", sortable: true},
{header: "Manufacturer", width: 115, dataIndex: "Manufacturer", sortable: true},
{header: "Product Group", width: 100, dataIndex: "ProductGroup", sortable: true}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
viewConfig: {
forceFit: true
},
height:210,
split: true,
region: "north"
});
// define a template to use for the detail view
var bookTplMarkup = [
"Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>",
"Author: {Author}<br/>",
"Manufacturer: {Manufacturer}<br/>",
"Product Group: {ProductGroup}<br/>"
];
var bookTpl = new Ext.Template(bookTplMarkup);
var ct = new Ext.Panel({
renderTo: "binding-example",
frame: true,
title: "Book List",
width: 540,
height: 400,
layout: "border",
items: [
grid,
{
id: "detailPanel",
region: "center",
bodyStyle: {
background: "#ffffff",
padding: "7px"
},
html: "Please select a book to see additional details."
}
]
})
grid.getSelectionModel().on("rowselect", function(sm, rowIdx, r) {
var detailPanel = Ext.getCmp("detailPanel");
bookTpl.overwrite(detailPanel.body, r.data);
});
store.load();
});
</script>
<div id="binding-example"></div>
</body>
</html>
Add row to a table
<!--
/*!
* 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 : "Rec 0", column1 : "0", column2 : "0" },
{ name : "Rec 1", column1 : "1", column2 : "1" },
{ name : "Rec 2", column1 : "2", column2 : "2" },
{ name : "Rec 3", column1 : "3", column2 : "3" },
{ name : "Rec 4", column1 : "4", column2 : "4" },
{ name : "Rec 5", column1 : "5", column2 : "5" },
{ name : "Rec 6", column1 : "6", column2 : "6" },
{ name : "Rec 7", column1 : "7", column2 : "7" },
{ name : "Rec 8", column1 : "8", column2 : "8" },
{ name : "Rec 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 firstGridStore = 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 firstGrid = new Ext.grid.GridPanel({
ddGroup : "secondGridDDGroup",
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : "name",
width : 325,
region : "west",
title : "First Grid"
});
var secondGridStore = new Ext.data.JsonStore({
fields : fields,
root : "records"
});
// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
ddGroup : "firstGridDDGroup",
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : "name",
width : 325,
region : "center",
title : "Second Grid"
});
//Simple "border layout" panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout : "border",
renderTo : "panel",
items : [
firstGrid,
secondGrid
],
bbar : [
"->", // Fill
{
text : "Reset both grids",
handler : function() {
//refresh source grid
firstGridStore.loadData(myData);
//purge destination grid
secondGridStore.removeAll();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : "firstGridDDGroup",
copy : true,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = firstGridStore.findExact("name", record.data.name);
// if not found
if (foundItem == -1) {
firstGridStore.add(record);
// Call a sort dynamically
firstGridStore.sort("name", "ASC");
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
// This will make sure we only drop to the view container
var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]
var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : "secondGridDDGroup",
copy : false,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = secondGridStore.findExact("name", record.data.name);
// if not found
if (foundItem == -1) {
secondGridStore.add(record);
// Call a sort dynamically
secondGridStore.sort("name", "ASC");
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
});
</script>
<div id="panel"></div>
</body>
</html>
autoExpandColumn: "column name",
<!--
/*!
* 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(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
];
// example of custom renderer function
function change(val){
if(val > 0){
return "<span style="color:green;">" + val + "</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "</span>";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "<span style="color:green;">" + val + "%</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "%</span>";
}
return val;
}
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: "company"},
{name: "price", type: "float"},
{name: "change", type: "float"},
{name: "pctChange", type: "float"},
{name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
]
});
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
{header: "Price", width: 75, sortable: true, renderer: "usMoney", dataIndex: "price"},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
],
stripeRows: true,
autoExpandColumn: "company",
height:350,
width:600,
title:"Array Grid"
});
grid.render("grid-example");
});
</script>
<div id="grid-example"></div>
</body>
</html>
Buffer Grid Example
<!--
/*!
* 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/BufferView.js"></script>
<style type="text/css">
.x-grid3-td-topic b {
font-family:tahoma, verdana;
display:block;
overflow:hidden;
width:98%;
text-overflow:ellipsis;
}
.x-grid3-td-topic b i {
font-weight:normal;
font-style: normal;
color:#000;
overflow:hidden;
text-overflow:ellipsis;
}
.x-grid3-td-topic .x-grid3-cell-inner {
white-space: nowrap;
}
</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(){
var store = new Ext.data.Store({
remoteSort: true,
baseParams: {lightWeight:true,ext: "js"},
sortInfo: {field:"lastpost", direction:"DESC"},
autoLoad: {params:{start:0, limit:500}},
proxy: new Ext.data.ScriptTagProxy({
url: "http://extjs.ru/forum/topics-browse-remote.php"
}),
reader: new Ext.data.JsonReader({
root: "topics",
totalProperty: "totalCount",
idProperty: "threadid",
fields: [
"title", "forumtitle", "forumid", "author",
{name: "replycount", type: "int"},
{name: "lastpost", mapping: "lastpost", type: "date", dateFormat: "timestamp"},
"lastposter", "excerpt"
]
})
});
var grid = new Ext.grid.GridPanel({
renderTo: "topic-grid",
width:700,
height:500,
frame:true,
title:"ExtJS.ru - Browse Forums",
trackMouseOver:false,
autoExpandColumn: "topic",
store: store,
columns: [new Ext.grid.RowNumberer({width: 30}),{
id: "topic",
header: "Topic",
dataIndex: "title",
width: 420,
renderer: renderTopic,
sortable:true
},{
header: "Replies",
dataIndex: "replycount",
width: 70,
align: "right",
sortable:true
},{
id: "last",
header: "Last Post",
dataIndex: "lastpost",
width: 150,
renderer: renderLast,
sortable:true
}],
bbar: new Ext.PagingToolbar({
store: store,
pageSize:500,
displayInfo:true
}),
view: new Ext.ux.grid.BufferView({
// custom row height
rowHeight: 34,
// render rows as they come into viewable area.
scrollDelay: false
})
});
// render functions
function renderTopic(value, p, record){
return String.format(
"<b><a href="http://extjs.ru/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.ru/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>",
value, record.data.forumtitle, record.id, record.data.forumid);
}
function renderLast(value, p, r){
return String.format("{0}<br/>by {1}", value.dateFormat("M j, Y, g:i a"), r.data["lastposter"]);
}
});
</script>
<div id="topic-grid"></div>
</body>
</html>
Create a grid with from an existing, unformatted HTML table.
<!--
/*!
* 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/TableGrid.js"></script>
<style type="text/css">
#the-table { border:1px solid #bbb;border-collapse:collapse; }
#the-table td,#the-table th { border:1px solid #ccc;border-collapse:collapse;padding:5px; }
</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(){
var btn = Ext.get("create-grid");
btn.on("click", function(){
btn.dom.disabled = true;
// create the grid
var grid = new Ext.ux.grid.TableGrid("the-table", {
stripeRows: true // stripe alternate rows
});
grid.render();
}, false, {
single: true
}); // run once
});
</script>
<button id="create-grid" type="button">Create grid</button>
<br />
<br />
<table cellspacing="0" id="the-table">
<thead>
<tr style="background:#eeeeee;">
<th>Name</th>
<th style="width: 40px;">Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr>
<td>Barney Rubble</td>
<td>32</td>
<td>Male</td>
</tr>
<tr>
<td>Fred Flintstone</td>
<td>33</td>
<td>Male</td>
</tr>
<tr>
<td>Betty Rubble</td>
<td>32</td>
<td>Female</td>
</tr>
<tr>
<td>Pebbles</td>
<td>1</td>
<td>Female</td>
</tr>
<tr>
<td>Bamm Bamm</td>
<td>2</td>
<td>Male</td>
</tr>
</tbody>
</table>
</body>
</html>
Data Binding Example - Implemented with classes
<!--
/*!
* 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
*/
// setup an App namespace
// This is done to prevent collisions in the global namespace
Ext.ns("App");
/**
* App.BookStore
* @extends Ext.data.Store
* @cfg {String} url This will be a url of a location to load the BookStore
* This is a specialized Store which maintains books.
* It already knows about Amazon"s XML definition and will expose the following
* Record defintion:
* - Author
* - Manufacturer
* - ProductGroup
* - DetailPageURL
*/
App.BookStore = function(config) {
var config = config || {};
Ext.applyIf(config, {
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: "Item",
id: "ASIN",
totalRecords: "@total"
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: "Author", mapping: "ItemAttributes > Author"},
"Title",
"Manufacturer",
"ProductGroup",
// Detail URL is not part of the column model of the grid
"DetailPageURL"
])
});
// call the superclass"s constructor
App.BookStore.superclass.constructor.call(this, config);
};
Ext.extend(App.BookStore, Ext.data.Store);
/**
* App.BookGrid
* @extends Ext.grid.GridPanel
* This is a custom grid which will display book information. It is tied to
* a specific record definition by the dataIndex properties.
*
* It follows a very custom pattern used only when extending Ext.ruponents
* in which you can omit the constructor.
*
* It also registers the class with the Component Manager with an xtype of
* bookgrid. This allows the application to take care of the lazy-instatiation
* facilities provided in Ext"s Component Model.
*/
App.BookGrid = Ext.extend(Ext.grid.GridPanel, {
// override
initComponent : function() {
Ext.apply(this, {
// Pass in a column model definition
// Note that the DetailPageURL was defined in the record definition but is not used
// here. That is okay.
columns: [
{header: "Author", width: 120, dataIndex: "Author", sortable: true},
{header: "Title", dataIndex: "Title", sortable: true},
{header: "Manufacturer", width: 115, dataIndex: "Manufacturer", sortable: true},
{header: "Product Group", dataIndex: "ProductGroup", sortable: true}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
// Note the use of a storeId, this will register thisStore
// with the StoreMgr and allow us to retrieve it very easily.
store: new App.BookStore({
storeId: "gridBookStore",
url: "ext-3.0.0/examples/grid/sheldon.xml"
}),
// force the grid to fit the space which is available
viewConfig: {
forceFit: true
}
});
// finally call the superclasses implementation
App.BookGrid.superclass.initComponent.call(this);
}
});
// This will associate an string representation of a class
// (called an xtype) with the Component Manager
// It allows you to support lazy instantiation of your components
Ext.reg("bookgrid", App.BookGrid);
/**
* App.BookDetail
* @extends Ext.Panel
* This is a specialized Panel which is used to show information about
* a book.
*
* This demonstrates adding 2 custom properties (tplMarkup and
* startingMarkup) to the class. It also overrides the initComponent
* method and adds a new method called updateDetail.
*
* The class will be registered with an xtype of "bookdetail"
*/
App.BookDetail = Ext.extend(Ext.Panel, {
// add tplMarkup as a new property
tplMarkup: [
"Title: <a href="{DetailPageURL}" target="_blank">{Title}</a><br/>",
"Author: {Author}<br/>",
"Manufacturer: {Manufacturer}<br/>",
"Product Group: {ProductGroup}<br/>"
],
// startingMarup as a new property
startingMarkup: "Please select a book to see additional details",
// override initComponent to create and compile the template
// apply styles to the body of the panel and initialize
// html to startingMarkup
initComponent: function() {
this.tpl = new Ext.Template(this.tplMarkup);
Ext.apply(this, {
bodyStyle: {
background: "#ffffff",
padding: "7px"
},
html: this.startingMarkup
});
// call the superclass"s initComponent implementation
App.BookDetail.superclass.initComponent.call(this);
},
// add a method which updates the details
updateDetail: function(data) {
this.tpl.overwrite(this.body, data);
}
});
// register the App.BookDetail class with an xtype of bookdetail
Ext.reg("bookdetail", App.BookDetail);
/**
* App.BookMasterDetail
* @extends Ext.Panel
*
* This is a specialized panel which is composed of both a bookgrid
* and a bookdetail panel. It provides the glue between the two
* components to allow them to communicate. You could consider this
* the actual application.
*
*/
App.BookMasterDetail = Ext.extend(Ext.Panel, {
// override initComponent
initComponent: function() {
// used applyIf rather than apply so user could
// override the defaults
Ext.applyIf(this, {
frame: true,
title: "Book List",
width: 540,
height: 400,
layout: "border",
items: [{
xtype: "bookgrid",
itemId: "gridPanel",
region: "north",
height: 210,
split: true
},{
xtype: "bookdetail",
itemId: "detailPanel",
region: "center"
}]
})
// call the superclass"s initComponent implementation
App.BookMasterDetail.superclass.initComponent.call(this);
},
// override initEvents
initEvents: function() {
// call the superclass"s initEvents implementation
App.BookMasterDetail.superclass.initEvents.call(this);
// now add application specific events
// notice we use the selectionmodel"s rowselect event rather
// than a click event from the grid to provide key navigation
// as well as mouse navigation
var bookGridSm = this.getComponent("gridPanel").getSelectionModel();
bookGridSm.on("rowselect", this.onRowSelect, this);
},
// add a method called onRowSelect
// This matches the method signature as defined by the "rowselect"
// event defined in Ext.grid.RowSelectionModel
onRowSelect: function(sm, rowIdx, r) {
// getComponent will retrieve itemId"s or id"s. Note that itemId"s
// are scoped locally to this instance of a component to avoid
// conflicts with the ComponentMgr
var detailPanel = this.getComponent("detailPanel");
detailPanel.updateDetail(r.data);
}
});
// register an xtype with this class
Ext.reg("bookmasterdetail", App.BookMasterDetail);
// Finally now that we"ve defined all of our classes we can instantiate
// an instance of the app and renderTo an existing div called "binding-example"
// Note now that classes have encapsulated this behavior we can easily create
// an instance of this app to be used in many different contexts, you could
// easily place this application in an Ext.Window for example
Ext.onReady(function() {
// create an instance of the app
var bookApp = new App.BookMasterDetail({
renderTo: "binding-example"
});
// We can retrieve a reference to the data store
// via the StoreMgr by its storeId
Ext.StoreMgr.get("gridBookStore").load();
});</script>
<div id="binding-example"></div>
</body>
</html>
Define column model and set header, dataIndex and sortable
<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 arrayData = [
["J", "MD"],
["A", "VA"],
["S", "DC"],
["M", "DE"],
["B", "NJ"],
["N", "CA"]
];
var store = new Ext.data.ArrayStore({
data : arrayData,
fields : ["fullName", "state"]
});
var cm = new Ext.grid.ColumnModel([
{
header : "Full Name",
sortable : true,
dataIndex : "fullName"
},
{
header : "State",
dataIndex : "state"
}
]);
var gridView = new Ext.grid.GridView();
var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
})
var grid = new Ext.grid.GridPanel({
title : "Our first grid",
renderTo : Ext.getBody(),
autoHeight : true,
width : 250,
store : store,
view : gridView,
colModel : cm,
selModel : selModel
});
});
</script>
<body>
</body>
</html>
Define RowSelectionModel and set single selection
<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 arrayData = [
["J", "MD"],
["A", "VA"],
["S", "DC"],
["M", "DE"],
["B", "NJ"],
["N", "CA"]
];
var store = new Ext.data.ArrayStore({
data : arrayData,
fields : ["fullName", "state"]
});
var cm = new Ext.grid.ColumnModel([
{
header : "Full Name",
sortable : true,
dataIndex : "fullName"
},
{
header : "State",
dataIndex : "state"
}
]);
var gridView = new Ext.grid.GridView();
var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
})
var grid = new Ext.grid.GridPanel({
title : "Our first grid",
renderTo : Ext.getBody(),
autoHeight : true,
width : 250,
store : store,
view : gridView,
colModel : cm,
selModel : selModel
});
});
</script>
<body>
</body>
</html>
GridPanel: buttons
<!--
/*!
* 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>
GridPanel Framed with Checkbox Selection and Horizontal Scrolling
<!--
/*!
* 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 2
////////////////////////////////////////////////////////////////////////////////////////
var sm = new xg.CheckboxSelectionModel();
var grid2 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
sm,
{id:"company",header: "Company", width: 200, dataIndex: "company"},
{header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: "price"},
{header: "Change", dataIndex: "change"},
{header: "% Change", dataIndex: "pctChange"},
{header: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
]
}),
sm: sm,
columnLines: true,
width:600,
height:300,
frame:true,
title:"Framed with Checkbox Selection and Horizontal Scrolling",
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>
GridPanel: framing
<!--
/*!
* 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>
GridPanel: 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>
Grid Plugins
<!--
/*!
* 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 1
////////////////////////////////////////////////////////////////////////////////////////
// row expander
var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
"<p><b>Company:</b> {company}</p><br>",
"<p><b>Summary:</b> {desc}</p>"
)
});
var grid1 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel({
defaults: {
width: 20,
sortable: true
},
columns: [
expander,
{id:"company",header: "Company", width: 40, dataIndex: "company"},
{header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: "price"},
{header: "Change", dataIndex: "change"},
{header: "% Change", dataIndex: "pctChange"},
{header: "Last Updated", renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
]
}),
viewConfig: {
forceFit:true
},
columnLines: true,
width: 600,
height: 300,
plugins: expander,
collapsible: true,
animCollapse: false,
title: "Expander Rows, Collapse and Force Fit",
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>
Grid with Numbered Rows and Force 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>
<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 3
////////////////////////////////////////////////////////////////////////////////////////
var grid3 = new xg.GridPanel({
store: new Ext.data.Store({
reader: reader,
data: xg.dummyData
}),
cm: new xg.ColumnModel([
new xg.RowNumberer(),
{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"}
]),
viewConfig: {
forceFit:true
},
columnLines: true,
width:600,
height:300,
title:"Grid with Numbered Rows and Force Fit",
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>
Grouping GridPanel
<!--
/*!
* 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();
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"}
]);
var grid = new xg.GridPanel({
store: new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: "company", direction: "ASC"},
groupField:"industry"
}),
columns: [
{id:"company",header: "Company", width: 60, 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", renderer: Ext.util.Format.usMoney},
{header: "Industry", width: 20, sortable: true, dataIndex: "industry"},
{header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
],
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: "{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})"
}),
frame:true,
width: 700,
height: 450,
collapsible: true,
animCollapse: false,
title: "Grouping Example",
iconCls: "icon-grid",
renderTo: document.body
});
});
// Array data for the grids
Ext.grid.dummyData = [
["3m Co",71.72,0.02,0.03,"4/2 12:00am", "Manufacturing"],
["Alcoa Inc",29.01,0.42,1.47,"4/1 12:00am", "Manufacturing"],
["Altria Group Inc",83.81,0.28,0.34,"4/3 12:00am", "Manufacturing"],
["American Express Company",52.55,0.01,0.02,"4/8 12:00am", "Finance"],
["American International Group, Inc.",64.13,0.31,0.49,"4/1 12:00am", "Services"],
["AT&T Inc.",31.61,-0.48,-1.54,"4/8 12:00am", "Services"],
["Boeing Co.",75.43,0.53,0.71,"4/8 12:00am", "Manufacturing"],
["Caterpillar Inc.",67.27,0.92,1.39,"4/1 12:00am", "Services"],
["Citigroup, Inc.",49.37,0.02,0.04,"4/4 12:00am", "Finance"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"4/1 12:00am", "Manufacturing"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"4/3 12:00am", "Manufacturing"],
["General Electric Company",34.14,-0.08,-0.23,"4/3 12:00am", "Manufacturing"],
["General Motors Corporation",30.27,1.09,3.74,"4/3 12:00am", "Automotive"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"4/3 12:00am", "Computer"],
["Honeywell Intl Inc",38.77,0.05,0.13,"4/3 12:00am", "Manufacturing"],
["Intel Corporation",19.88,0.31,1.58,"4/2 12:00am", "Computer"],
["International Business Machines",81.41,0.44,0.54,"4/1 12:00am", "Computer"],
["Johnson & Johnson",64.72,0.06,0.09,"4/2 12:00am", "Medical"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"4/2 12:00am", "Finance"],
["McDonald\"s Corporation",36.76,0.86,2.40,"4/2 12:00am", "Food"],
["Merck & Co., Inc.",40.96,0.41,1.01,"4/2 12:00am", "Medical"],
["Microsoft Corporation",25.84,0.14,0.54,"4/2 12:00am", "Computer"],
["Pfizer Inc",27.96,0.4,1.45,"4/8 12:00am", "Services", "Medical"],
["The Coca-Cola Company",45.07,0.26,0.58,"4/1 12:00am", "Food"],
["The Home Depot, Inc.",34.64,0.35,1.02,"4/8 12:00am", "Retail"],
["The Procter & Gamble Company",61.91,0.01,0.02,"4/1 12:00am", "Manufacturing"],
["United Technologies Corporation",63.26,0.55,0.88,"4/1 12:00am", "Computer"],
["Verizon Communications",35.57,0.39,1.11,"4/3 12:00am", "Services"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"4/3 12:00am", "Retail"],
["Walt Disney Company (The) (Holding Company)",29.89,0.24,0.81,"4/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>
<div id="grid-example"></div>
</body>
</html>
Layout GridPanel(table) and FormPanel in border layout
<!--
/*!
* 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 : 325,
region : "west",
title : "Data Grid",
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});
// Declare the text fields. This could have been done inline, is easier to read
// for folks learning :)
var textField1 = new Ext.form.TextField({
fieldLabel : "Record Name",
name : "name"
});
var textField2 = new Ext.form.TextField({
fieldLabel : "Column 1",
name : "column1"
});
var textField3 = new Ext.form.TextField({
fieldLabel : "Column 2",
name : "column2"
});
// Setup the form panel
var formPanel = new Ext.form.FormPanel({
region : "center",
title : "Generic Form Panel",
bodyStyle : "padding: 10px; background-color: #DFE8F6",
labelWidth : 100,
width : 325,
items : [
textField1,
textField2,
textField3
]
});
//Simple "border layout" panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout : "border",
renderTo : "panel",
items : [
grid,
formPanel
],
bbar : [
"->", // Fill
{
text : "Reset Example",
handler : function() {
//refresh source grid
gridStore.loadData(myData);
formPanel.getForm().reset();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var formPanelDropTargetEl = formPanel.body.dom;
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
ddGroup : "gridDDGroup",
notifyEnter : function(ddSource, e, data) {
//Add some flare to invite drop.
formPanel.body.stopFx();
formPanel.body.highlight();
},
notifyDrop : function(ddSource, e, data){
// Reference the record (single selection) for readability
var selectedRecord = ddSource.dragData.selections[0];
// Load the record into the form
formPanel.getForm().loadRecord(selectedRecord);
// Delete record from the grid. not really required.
ddSource.grid.store.remove(selectedRecord);
return(true);
}
});
});
</script>
<div id="panel"></div>
</body>
</html>
Mark changed field
<!--
/*!
* 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/CheckColumn.js"></script>
<style type="text/css">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
#grid-example .x-grid-col-1 {
text-align: right;
}
#grid-example .x-grid-col-2{
text-align: right;
}
#grid-example .x-grid-col-3 {
text-align: right;
}
#grid-example .x-grid-col-4 {
text-align: right;
}
#grid-example.x-grid-mso{
border: 1px solid #6593cf;
}
#grid-example.x-grid-vista{
border: 1px solid #b3bcc0;
}
#xml-grid-example{
border: 1px solid #cbc7b8;
left: 0;
position: relative;
top: 0;
}
#editor-grid .x-grid-col-2{
text-align:right;
}
.x-grid3-td-topic b {
font-family:tahoma, verdana;
display:block;
}
.x-grid3-td-topic b i {
font-weight:normal;
font-style: normal;
color:#000;
}
.x-grid3-td-topic .x-grid3-cell-inner {
white-space:normal;
}
.x-grid3-td-topic a {
color: #385F95;
text-decoration:none;
}
.x-grid3-td-topic a:hover {
text-decoration:underline;
}
.details .x-btn-text {
background-image: url(details.gif);
}
.x-resizable-pinned .x-resizable-handle-south{
background:url(ext-3.0.0/resources/images/default/sizer/s-handle-dark.gif);
background-position: top;
}
</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();
function formatDate(value){
return value ? value.dateFormat("M d, Y") : "";
}
// shorthand alias
var fm = Ext.form;
// custom column plugin example
var checkColumn = new Ext.grid.CheckColumn({
header: "Indoor?",
dataIndex: "indoor",
width: 55
});
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
id: "common",
header: "Common Name",
dataIndex: "common",
width: 220,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
},{
header: "Light",
dataIndex: "light",
width: 130,
editor: new fm.ruboBox({
typeAhead: true,
triggerAction: "all",
transform:"light",
lazyRender: true,
listClass: "x-combo-list-small"
})
},{
header: "Price",
dataIndex: "price",
width: 70,
align: "right",
renderer: "usMoney",
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},{
header: "Available",
dataIndex: "availDate",
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: "m/d/y",
minValue: "01/01/06",
disabledDays: [0, 6],
disabledDaysText: "Plants are not available on the weekends"
})
},
checkColumn
]);
// by default columns are sortable
cm.defaultSortable = true;
// create the Data Store
var store = new Ext.data.Store({
// load remote data using HTTP
url: "ext-3.0.0/examples/grid/plants.xml",
// specify a XmlReader (coincides with the XML format of the returned data)
reader: new Ext.data.XmlReader(
{
// records will have a "plant" tag
record: "plant"
},
// use an Array of field definition objects to implicitly create a Record constructor
[
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: "common", type: "string"},
{name: "botanical", type: "string"},
{name: "light"},
{name: "price", type: "float"},
// dates can be automatically converted by specifying dateFormat
{name: "availDate", mapping: "availability", type: "date", dateFormat: "m/d/Y"},
{name: "indoor", type: "bool"}
]
),
sortInfo: {field:"common", direction:"ASC"}
});
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: "editor-grid",
width: 600,
height: 300,
autoExpandColumn: "common",
title: "Edit Plants?",
frame: true,
plugins: checkColumn,
clicksToEdit: 1,
tbar: [{
text: "Add Plant",
handler : function(){
// access the Record constructor through the grid"s store
var Plant = grid.getStore().recordType;
var p = new Plant({
common: "New Plant 1",
light: "Mostly Shade",
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});
// trigger the data store load
store.load();
});
</script>
<!-- the custom editor for the "Light" column references the id="light" -->
<select name="light" id="light" style="display: none;">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>
<option value="Mostly Sunny">Mostly Sunny</option>
<option value="Sunny">Sunny</option>
</select>
<div id="editor-grid"></div>
</body>
</html>
Reload data to GridPanel
<!--
/*!
* 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>
Remove all data from GridPanel
<!--
/*!
* 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 : "Rec 0", column1 : "0", column2 : "0" },
{ name : "Rec 1", column1 : "1", column2 : "1" },
{ name : "Rec 2", column1 : "2", column2 : "2" },
{ name : "Rec 3", column1 : "3", column2 : "3" },
{ name : "Rec 4", column1 : "4", column2 : "4" },
{ name : "Rec 5", column1 : "5", column2 : "5" },
{ name : "Rec 6", column1 : "6", column2 : "6" },
{ name : "Rec 7", column1 : "7", column2 : "7" },
{ name : "Rec 8", column1 : "8", column2 : "8" },
{ name : "Rec 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 firstGridStore = 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 firstGrid = new Ext.grid.GridPanel({
ddGroup : "secondGridDDGroup",
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : "name",
width : 325,
region : "west",
title : "First Grid"
});
var secondGridStore = new Ext.data.JsonStore({
fields : fields,
root : "records"
});
// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
ddGroup : "firstGridDDGroup",
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : "name",
width : 325,
region : "center",
title : "Second Grid"
});
//Simple "border layout" panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout : "border",
renderTo : "panel",
items : [
firstGrid,
secondGrid
],
bbar : [
"->", // Fill
{
text : "Reset both grids",
handler : function() {
//refresh source grid
firstGridStore.loadData(myData);
//purge destination grid
secondGridStore.removeAll();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : "firstGridDDGroup",
copy : true,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = firstGridStore.findExact("name", record.data.name);
// if not found
if (foundItem == -1) {
firstGridStore.add(record);
// Call a sort dynamically
firstGridStore.sort("name", "ASC");
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
// This will make sure we only drop to the view container
var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]
var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : "secondGridDDGroup",
copy : false,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = secondGridStore.findExact("name", record.data.name);
// if not found
if (foundItem == -1) {
secondGridStore.add(record);
// Call a sort dynamically
secondGridStore.sort("name", "ASC");
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
});
</script>
<div id="panel"></div>
</body>
</html>
Remove a row from a table
<!--
/*!
* 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 : "Rec 0", column1 : "0", column2 : "0" },
{ name : "Rec 1", column1 : "1", column2 : "1" },
{ name : "Rec 2", column1 : "2", column2 : "2" },
{ name : "Rec 3", column1 : "3", column2 : "3" },
{ name : "Rec 4", column1 : "4", column2 : "4" },
{ name : "Rec 5", column1 : "5", column2 : "5" },
{ name : "Rec 6", column1 : "6", column2 : "6" },
{ name : "Rec 7", column1 : "7", column2 : "7" },
{ name : "Rec 8", column1 : "8", column2 : "8" },
{ name : "Rec 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 firstGridStore = 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 firstGrid = new Ext.grid.GridPanel({
ddGroup : "secondGridDDGroup",
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : "name",
width : 325,
region : "west",
title : "First Grid"
});
var secondGridStore = new Ext.data.JsonStore({
fields : fields,
root : "records"
});
// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
ddGroup : "firstGridDDGroup",
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : "name",
width : 325,
region : "center",
title : "Second Grid"
});
//Simple "border layout" panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout : "border",
renderTo : "panel",
items : [
firstGrid,
secondGrid
],
bbar : [
"->", // Fill
{
text : "Reset both grids",
handler : function() {
//refresh source grid
firstGridStore.loadData(myData);
//purge destination grid
secondGridStore.removeAll();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : "firstGridDDGroup",
copy : true,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = firstGridStore.findExact("name", record.data.name);
// if not found
if (foundItem == -1) {
firstGridStore.add(record);
// Call a sort dynamically
firstGridStore.sort("name", "ASC");
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
// This will make sure we only drop to the view container
var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]
var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : "secondGridDDGroup",
copy : false,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = secondGridStore.findExact("name", record.data.name);
// if not found
if (foundItem == -1) {
secondGridStore.add(record);
// Call a sort dynamically
secondGridStore.sort("name", "ASC");
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
});
</script>
<div id="panel"></div>
</body>
</html>
Set autoExpandColumn for GridPanel
<!--
/*!
* 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/SlidingPager.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/SliderTip.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/PanelResizer.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/PagingMemoryProxy.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
var myData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
];
// example of custom renderer function
function change(val){
if(val > 0){
return "<span style="color:green;">" + val + "</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "</span>";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "<span style="color:green;">" + val + "%</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "%</span>";
}
return val;
}
// create the data store
var store = new Ext.data.Store({
proxy: new Ext.ux.data.PagingMemoryProxy(myData),
remoteSort:true,
sortInfo: {field:"price", direction:"ASC"},
reader: new Ext.data.ArrayReader({
fields: [
{name: "company"},
{name: "price", type: "float"},
{name: "change", type: "float"},
{name: "pctChange", type: "float"},
{name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
]
})
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
{header: "Price", width: 75, sortable: true, renderer: "usMoney", dataIndex: "price"},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
],
stripeRows: true,
autoExpandColumn: "company",
height:320,
width:600,
frame:true,
title:"Sliding Pager",
plugins: new Ext.ux.PanelResizer({
minHeight: 100
}),
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
plugins: new Ext.ux.SlidingPager()
})
});
grid.render("grid-example");
store.load({params:{start:0, limit:10}});
});
</script>
<div id="grid-example"></div></body>
</html>
Set column name, width, height, title for Ext.grid.GridPanel
<!--
/*!
* 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 column to sortable
<!--
/*!
* 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(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
];
// example of custom renderer function
function change(val){
if(val > 0){
return "<span style="color:green;">" + val + "</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "</span>";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "<span style="color:green;">" + val + "%</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "%</span>";
}
return val;
}
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: "company"},
{name: "price", type: "float"},
{name: "change", type: "float"},
{name: "pctChange", type: "float"},
{name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
]
});
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
{header: "Price", width: 75, sortable: true, renderer: "usMoney", dataIndex: "price"},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
],
stripeRows: true,
autoExpandColumn: "company",
height:350,
width:600,
title:"Array Grid"
});
grid.render("grid-example");
});
</script>
<div id="grid-example"></div>
</body>
</html>
Set RowSelectionModel for Ext.grid.GridPanel
<!--
/*!
* 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 up data, column for Ext.grid.GridPanel
<!--
/*!
* 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>
Sort table by name
<!--
/*!
* 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 : "Rec 0", column1 : "0", column2 : "0" },
{ name : "Rec 1", column1 : "1", column2 : "1" },
{ name : "Rec 2", column1 : "2", column2 : "2" },
{ name : "Rec 3", column1 : "3", column2 : "3" },
{ name : "Rec 4", column1 : "4", column2 : "4" },
{ name : "Rec 5", column1 : "5", column2 : "5" },
{ name : "Rec 6", column1 : "6", column2 : "6" },
{ name : "Rec 7", column1 : "7", column2 : "7" },
{ name : "Rec 8", column1 : "8", column2 : "8" },
{ name : "Rec 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 firstGridStore = 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 firstGrid = new Ext.grid.GridPanel({
ddGroup : "secondGridDDGroup",
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : "name",
width : 325,
region : "west",
title : "First Grid"
});
var secondGridStore = new Ext.data.JsonStore({
fields : fields,
root : "records"
});
// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
ddGroup : "firstGridDDGroup",
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : "name",
width : 325,
region : "center",
title : "Second Grid"
});
//Simple "border layout" panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout : "border",
renderTo : "panel",
items : [
firstGrid,
secondGrid
],
bbar : [
"->", // Fill
{
text : "Reset both grids",
handler : function() {
//refresh source grid
firstGridStore.loadData(myData);
//purge destination grid
secondGridStore.removeAll();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : "firstGridDDGroup",
copy : true,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = firstGridStore.findExact("name", record.data.name);
// if not found
if (foundItem == -1) {
firstGridStore.add(record);
// Call a sort dynamically
firstGridStore.sort("name", "ASC");
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
// This will make sure we only drop to the view container
var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]
var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : "secondGridDDGroup",
copy : false,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = secondGridStore.findExact("name", record.data.name);
// if not found
if (foundItem == -1) {
secondGridStore.add(record);
// Call a sort dynamically
secondGridStore.sort("name", "ASC");
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
});
</script>
<div id="panel"></div>
</body>
</html>
Static data grid
<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 arrayData = [
["J", "MD"],
["A", "VA"],
["S", "DC"],
["M", "DE"],
["B", "NJ"],
["N", "CA"]
];
var store = new Ext.data.ArrayStore({
data : arrayData,
fields : ["fullName", "state"]
});
var cm = new Ext.grid.ColumnModel([
{
header : "Full Name",
sortable : true,
dataIndex : "fullName"
},
{
header : "State",
dataIndex : "state"
}
]);
var gridView = new Ext.grid.GridView();
var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
})
var grid = new Ext.grid.GridPanel({
title : "Our first grid",
renderTo : Ext.getBody(),
autoHeight : true,
width : 250,
store : store,
view : gridView,
colModel : cm,
selModel : selModel
});
});
</script>
<body>
</body>
</html>
stripeRows: true,
<!--
/*!
* 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(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
];
// example of custom renderer function
function change(val){
if(val > 0){
return "<span style="color:green;">" + val + "</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "</span>";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "<span style="color:green;">" + val + "%</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "%</span>";
}
return val;
}
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: "company"},
{name: "price", type: "float"},
{name: "change", type: "float"},
{name: "pctChange", type: "float"},
{name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
]
});
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
{header: "Price", width: 75, sortable: true, renderer: "usMoney", dataIndex: "price"},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
],
stripeRows: true,
autoExpandColumn: "company",
height:350,
width:600,
title:"Array Grid"
});
grid.render("grid-example");
});
</script>
<div id="grid-example"></div>
</body>
</html>
Table Selection
<!--
/*!
* 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();
// Define the Grid data and create the Grid
var myData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
];
var ds = new Ext.data.Store({
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"},
// Rating dependent upon performance 0 = best, 2 = worst
{name: "rating", type: "int", convert: function(v, rec) {
if (rec[3] < 0) return 2;
if (rec[3] < 1) return 1;
return 0;
}
}
])
});
ds.loadData(myData);
// example of custom renderer function
function italic(value){
return "<i>" + value + "</i>";
}
// example of custom renderer function
function change(val){
if(val > 0){
return "<span style="color:green;">" + val + "</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "</span>";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "<span style="color:green;">" + val + "%</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "%</span>";
}
return val;
}
// render rating as "A", "B" or "C" depending upon numeric value.
function rating(v) {
if (v == 0) return "A"
if (v == 1) return "B"
if (v == 2) return "C"
}
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:"company",header: "Company", width: 160, sortable: true, locked:false, dataIndex: "company"},
{header: "Price", width: 55, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"},
{header: "Change", width: 55, sortable: true, renderer: change, dataIndex: "change"},
{header: "% Change", width: 65, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
{header: "Last Updated", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"},
{header: "Rating", width: 40, sortable: true, renderer: rating, dataIndex: "rating"}
]);
bd.createChild({tag: "h2", html: "Using a Grid with a Form"});
/*
* Here is where we create the Form
*/
var gridForm = new Ext.FormPanel({
id: "company-form",
frame: true,
labelAlign: "left",
title: "Company data",
bodyStyle:"padding:5px",
width: 750,
layout: "column", // Specifies that the items will now be arranged in columns
items: [{
columnWidth: 0.60,
layout: "fit",
items: {
xtype: "grid",
ds: ds,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("company-form").getForm().loadRecord(rec);
}
}
}),
autoExpandColumn: "company",
height: 350,
title:"Company Data",
border: true,
listeners: {
render: function(g) {
g.getSelectionModel().selectRow(0);
},
delay: 10 // Allow rows to be rendered.
}
}
},{
columnWidth: 0.4,
xtype: "fieldset",
labelWidth: 90,
title:"Company details",
defaults: {width: 140, border:false}, // Default config options for child items
defaultType: "textfield",
autoHeight: true,
bodyStyle: Ext.isIE ? "padding:0 0 5px 15px;" : "padding:10px 15px;",
border: false,
style: {
"margin-left": "10px", // when you add custom margin in IE 6...
"margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // you have to adjust for it somewhere else
},
items: [{
fieldLabel: "Name",
name: "company"
},{
fieldLabel: "Price",
name: "price"
},{
fieldLabel: "% Change",
name: "pctChange"
},{
xtype: "datefield",
fieldLabel: "Last Updated",
name: "lastChange"
}, {
xtype: "panel",
layout: "table",
layoutConfig: {
columns: 4
},
anchor: "100%",
defaults: {
border: false,
layout: "form",
labelWidth: 15,
style: {
paddingRight: "10px"
}
},
// A radio group: A setValue on any of the following "radio" inputs using the numeric
// "rating" field checks the radio instance which has the matching inputValue.
items: [{
cellCls: "x-form-item",
xtype: "label",
text: "Rating",
width: 98
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "0",
fieldLabel: "A"
}
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "1",
fieldLabel: "B"
}
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "2",
fieldLabel: "C"
}
}]
}]
}],
renderTo: bd
});
});</script>
<div id="bd"></div>
</body>
</html>
The Grid demonstrates the use of creation of derived fields in a Record created using a custom convert function, and the use of column renderers.
<!--
/*!
* 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();
// Define the Grid data and create the Grid
var myData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
];
var ds = new Ext.data.Store({
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"},
// Rating dependent upon performance 0 = best, 2 = worst
{name: "rating", type: "int", convert: function(v, rec) {
if (rec[3] < 0) return 2;
if (rec[3] < 1) return 1;
return 0;
}
}
])
});
ds.loadData(myData);
// example of custom renderer function
function italic(value){
return "<i>" + value + "</i>";
}
// example of custom renderer function
function change(val){
if(val > 0){
return "<span style="color:green;">" + val + "</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "</span>";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "<span style="color:green;">" + val + "%</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "%</span>";
}
return val;
}
// render rating as "A", "B" or "C" depending upon numeric value.
function rating(v) {
if (v == 0) return "A"
if (v == 1) return "B"
if (v == 2) return "C"
}
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:"company",header: "Company", width: 160, sortable: true, locked:false, dataIndex: "company"},
{header: "Price", width: 55, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"},
{header: "Change", width: 55, sortable: true, renderer: change, dataIndex: "change"},
{header: "% Change", width: 65, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
{header: "Last Updated", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"},
{header: "Rating", width: 40, sortable: true, renderer: rating, dataIndex: "rating"}
]);
bd.createChild({tag: "h2", html: "Using a Grid with a Form"});
/*
* Here is where we create the Form
*/
var gridForm = new Ext.FormPanel({
id: "company-form",
frame: true,
labelAlign: "left",
title: "Company data",
bodyStyle:"padding:5px",
width: 750,
layout: "column", // Specifies that the items will now be arranged in columns
items: [{
columnWidth: 0.60,
layout: "fit",
items: {
xtype: "grid",
ds: ds,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("company-form").getForm().loadRecord(rec);
}
}
}),
autoExpandColumn: "company",
height: 350,
title:"Company Data",
border: true,
listeners: {
render: function(g) {
g.getSelectionModel().selectRow(0);
},
delay: 10 // Allow rows to be rendered.
}
}
},{
columnWidth: 0.4,
xtype: "fieldset",
labelWidth: 90,
title:"Company details",
defaults: {width: 140, border:false}, // Default config options for child items
defaultType: "textfield",
autoHeight: true,
bodyStyle: Ext.isIE ? "padding:0 0 5px 15px;" : "padding:10px 15px;",
border: false,
style: {
"margin-left": "10px", // when you add custom margin in IE 6...
"margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // you have to adjust for it somewhere else
},
items: [{
fieldLabel: "Name",
name: "company"
},{
fieldLabel: "Price",
name: "price"
},{
fieldLabel: "% Change",
name: "pctChange"
},{
xtype: "datefield",
fieldLabel: "Last Updated",
name: "lastChange"
}, {
xtype: "panel",
layout: "table",
layoutConfig: {
columns: 4
},
anchor: "100%",
defaults: {
border: false,
layout: "form",
labelWidth: 15,
style: {
paddingRight: "10px"
}
},
// A radio group: A setValue on any of the following "radio" inputs using the numeric
// "rating" field checks the radio instance which has the matching inputValue.
items: [{
cellCls: "x-form-item",
xtype: "label",
text: "Rating",
width: 98
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "0",
fieldLabel: "A"
}
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "1",
fieldLabel: "B"
}
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "2",
fieldLabel: "C"
}
}]
}]
}],
renderTo: bd
});
// Create Panel view code. Ignore.
createCodePanel("form-grid.js", "View code to create this Form");
});
</script>
</div>
</body>
</html>
Updating the grid data via a button click
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
var propsGrid = new Ext.grid.PropertyGrid({
renderTo: "prop-grid",
width: 300,
autoHeight: true,
propertyNames: {
tested: "QA",
borderWidth: "Border Width"
},
source: {
"(name)": "Properties Grid",
grouping: false,
autoFitColumns: true,
productionQuality: false,
created: new Date(Date.parse("10/15/2006")),
tested: false,
version: 0.01,
borderWidth: 1
},
viewConfig : {
forceFit: true,
scrollOffset: 2 // the grid will never have scrollbars
}
});
// simulate updating the grid data via a button click
new Ext.Button({
renderTo: "button-container",
text: "Update source",
handler: function(){
propsGrid.setSource({
"(name)": "Property Grid",
grouping: false,
autoFitColumns: true,
productionQuality: true,
created: new Date(),
tested: false,
version: 0.8,
borderWidth: 2
});
}
});
});
</script>
<p id="button-container"></p>
<div id="prop-grid"></div>
</body>
</html>
Using a Grid with a Form
<!--
/*!
* 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();
// Define the Grid data and create the Grid
var myData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
];
var ds = new Ext.data.Store({
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"},
// Rating dependent upon performance 0 = best, 2 = worst
{name: "rating", type: "int", convert: function(v, rec) {
if (rec[3] < 0) return 2;
if (rec[3] < 1) return 1;
return 0;
}
}
])
});
ds.loadData(myData);
// example of custom renderer function
function italic(value){
return "<i>" + value + "</i>";
}
// example of custom renderer function
function change(val){
if(val > 0){
return "<span style="color:green;">" + val + "</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "</span>";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "<span style="color:green;">" + val + "%</span>";
}else if(val < 0){
return "<span style="color:red;">" + val + "%</span>";
}
return val;
}
// render rating as "A", "B" or "C" depending upon numeric value.
function rating(v) {
if (v == 0) return "A"
if (v == 1) return "B"
if (v == 2) return "C"
}
// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new Ext.grid.ColumnModel([
{id:"company",header: "Company", width: 160, sortable: true, locked:false, dataIndex: "company"},
{header: "Price", width: 55, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"},
{header: "Change", width: 55, sortable: true, renderer: change, dataIndex: "change"},
{header: "% Change", width: 65, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
{header: "Last Updated", width: 80, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"},
{header: "Rating", width: 40, sortable: true, renderer: rating, dataIndex: "rating"}
]);
bd.createChild({tag: "h2", html: "Using a Grid with a Form"});
/*
* Here is where we create the Form
*/
var gridForm = new Ext.FormPanel({
id: "company-form",
frame: true,
labelAlign: "left",
title: "Company data",
bodyStyle:"padding:5px",
width: 750,
layout: "column", // Specifies that the items will now be arranged in columns
items: [{
columnWidth: 0.60,
layout: "fit",
items: {
xtype: "grid",
ds: ds,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("company-form").getForm().loadRecord(rec);
}
}
}),
autoExpandColumn: "company",
height: 350,
title:"Company Data",
border: true,
listeners: {
render: function(g) {
g.getSelectionModel().selectRow(0);
},
delay: 10 // Allow rows to be rendered.
}
}
},{
columnWidth: 0.4,
xtype: "fieldset",
labelWidth: 90,
title:"Company details",
defaults: {width: 140, border:false}, // Default config options for child items
defaultType: "textfield",
autoHeight: true,
bodyStyle: Ext.isIE ? "padding:0 0 5px 15px;" : "padding:10px 15px;",
border: false,
style: {
"margin-left": "10px", // when you add custom margin in IE 6...
"margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0" // you have to adjust for it somewhere else
},
items: [{
fieldLabel: "Name",
name: "company"
},{
fieldLabel: "Price",
name: "price"
},{
fieldLabel: "% Change",
name: "pctChange"
},{
xtype: "datefield",
fieldLabel: "Last Updated",
name: "lastChange"
}, {
xtype: "panel",
layout: "table",
layoutConfig: {
columns: 4
},
anchor: "100%",
defaults: {
border: false,
layout: "form",
labelWidth: 15,
style: {
paddingRight: "10px"
}
},
// A radio group: A setValue on any of the following "radio" inputs using the numeric
// "rating" field checks the radio instance which has the matching inputValue.
items: [{
cellCls: "x-form-item",
xtype: "label",
text: "Rating",
width: 98
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "0",
fieldLabel: "A"
}
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "1",
fieldLabel: "B"
}
}, {
items: {
xtype: "radio",
name: "rating",
inputValue: "2",
fieldLabel: "C"
}
}]
}]
}],
renderTo: bd
});
});</script>
<div id="bd"></div>
</body>
</html>