JavaScript DHTML/Ext JS/Grid Renderer
Содержание
- 1 Add Ext.grid.RowNumberer to GridPanel
- 2 Custom Group Summary Plugin
- 3 Custom Hybrid Summary Plugin
- 4 Custom renderer function
- 5 Define custom renderer for table row
- 6 Define your own render function for columns in a GridPanel
- 7 Ext.util.Format.usMoney
- 8 Ext.ux.grid.RowExpander
- 9 Set different renders for columns
- 10 Use Ext.util.Format.dateRenderer
Add Ext.grid.RowNumberer to GridPanel
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/ux/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>
<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(
"<a href="http://extjs.ru/forum/showthread.php?t={2}" target="_blank">{0}</a><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}
by {1}", value.dateFormat("M j, Y, g:i a"), r.data["lastposter"]);
}
});
</script>
</body> </html>
</source>
Custom Group Summary Plugin
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/examples/ux/css/GroupSummary.css" /> <script type="text/javascript" src="ext-3.0.0/examples/ux/GroupSummary.js"></script>
</head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init();
var xg = Ext.grid;
var reader = new Ext.data.JsonReader({
idProperty: "taskId",
fields: [
{name: "projectId", type: "int"},
{name: "project", type: "string"},
{name: "taskId", type: "int"},
{name: "description", type: "string"},
{name: "estimate", type: "float"},
{name: "rate", type: "float"},
{name: "cost", type: "float"},
{name: "due", type: "date", dateFormat:"m/d/Y"}
]
});
// define a custom summary function
Ext.ux.grid.GroupSummary.Calculations["totalCost"] = function(v, record, field){
return v + (record.data.estimate * record.data.rate);
};
// utilize custom extension for Group Summary
var summary = new Ext.ux.grid.GroupSummary();
var grid = new xg.EditorGridPanel({
ds: new Ext.data.GroupingStore({
reader: reader,
// use local data
data: app.grid.dummyData,
sortInfo: {field: "due", direction: "ASC"},
groupField: "project"
}),
columns: [
{
id: "description",
header: "Task",
width: 80,
sortable: true,
dataIndex: "description",
summaryType: "count",
hideable: false,
summaryRenderer: function(v, params, data){
return ((v === 0 || v > 1) ? "(" + v +" Tasks)" : "(1 Task)");
},
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: "Project",
width: 20,
sortable: true,
dataIndex: "project"
},{
header: "Due Date",
width: 25,
sortable: true,
dataIndex: "due",
summaryType: "max",
renderer: Ext.util.Format.dateRenderer("m/d/Y"),
editor: new Ext.form.DateField({
format: "m/d/Y"
})
},{
header: "Estimate",
width: 20,
sortable: true,
dataIndex: "estimate",
summaryType: "sum",
renderer : function(v){
return v +" hours";
},
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
style: "text-align:left"
})
},{
header: "Rate",
width: 20,
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: "rate",
summaryType: "average",
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
style: "text-align:left"
})
},{
id: "cost",
header: "Cost",
width: 20,
sortable: false,
groupable: false,
renderer: function(v, params, record){
return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);
},
dataIndex: "cost",
summaryType: "totalCost",
summaryRenderer: Ext.util.Format.usMoney
}
],
view: new Ext.grid.GroupingView({
forceFit: true,
showGroupName: false,
enableNoGroups: false,
enableGroupingMenu: false,
hideGroupedColumn: true
}),
plugins: summary,
tbar : [{
text: "Toggle",
tooltip: "Toggle the visibility of summary row",
handler: function(){summary.toggleSummaries();}
}],
frame: true,
width: 800,
height: 450,
clicksToEdit: 1,
collapsible: true,
animCollapse: false,
trackMouseOver: false,
//enableColumnMove: false,
title: "Sponsored Projects",
iconCls: "icon-grid",
renderTo: document.body
});
}); // set up namespace for application Ext.ns("app.grid"); // store dummy data in the app namespace app.grid.dummyData = [
{projectId: 100, project: "Ext Forms: Field Anchoring", taskId: 112, description: "Integrate 2.0 Forms with 2.0 Layouts", estimate: 6, rate: 150, due:"06/24/2007"},
{projectId: 100, project: "Ext Forms: Field Anchoring", taskId: 113, description: "Implement AnchorLayout", estimate: 4, rate: 150, due:"06/25/2007"},
{projectId: 100, project: "Ext Forms: Field Anchoring", taskId: 114, description: "Add support for multiple types of anchors", estimate: 4, rate: 150, due:"06/27/2007"},
{projectId: 100, project: "Ext Forms: Field Anchoring", taskId: 115, description: "Testing and debugging", estimate: 8, rate: 0, due:"06/29/2007"},
{projectId: 101, project: "Ext Grid: Single-level Grouping", taskId: 101, description: "Add required rendering "hooks" to GridView", estimate: 6, rate: 100, due:"07/01/2007"},
{projectId: 101, project: "Ext Grid: Single-level Grouping", taskId: 102, description: "Extend GridView and override rendering functions", estimate: 6, rate: 100, due:"07/03/2007"},
{projectId: 101, project: "Ext Grid: Single-level Grouping", taskId: 103, description: "Extend Store with grouping functionality", estimate: 4, rate: 100, due:"07/04/2007"},
{projectId: 101, project: "Ext Grid: Single-level Grouping", taskId: 121, description: "Default CSS Styling", estimate: 2, rate: 100, due:"07/05/2007"},
{projectId: 101, project: "Ext Grid: Single-level Grouping", taskId: 104, description: "Testing and debugging", estimate: 6, rate: 100, due:"07/06/2007"},
{projectId: 102, project: "Ext Grid: Summary Rows", taskId: 105, description: "Ext Grid plugin integration", estimate: 4, rate: 125, due:"07/01/2007"},
{projectId: 102, project: "Ext Grid: Summary Rows", taskId: 106, description: "Summary creation during rendering phase", estimate: 4, rate: 125, due:"07/02/2007"},
{projectId: 102, project: "Ext Grid: Summary Rows", taskId: 107, description: "Dynamic summary updates in editor grids", estimate: 6, rate: 125, due:"07/05/2007"},
{projectId: 102, project: "Ext Grid: Summary Rows", taskId: 108, description: "Remote summary integration", estimate: 4, rate: 125, due:"07/05/2007"},
{projectId: 102, project: "Ext Grid: Summary Rows", taskId: 109, description: "Summary renderers and calculators", estimate: 4, rate: 125, due:"07/06/2007"},
{projectId: 102, project: "Ext Grid: Summary Rows", taskId: 110, description: "Integrate summaries with GroupingView", estimate: 10, rate: 125, due:"07/11/2007"},
{projectId: 102, project: "Ext Grid: Summary Rows", taskId: 111, description: "Testing and debugging", estimate: 8, rate: 125, due:"07/15/2007"}
]; </script>
</body> </html>
</source>
Custom Hybrid Summary Plugin
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/GroupSummary.js"></script>
</head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init();
var xg = Ext.grid;
var reader = new Ext.data.JsonReader({
idProperty:"taskId",
fields: [
{name: "projectId", type: "int"},
{name: "project", type: "string"},
{name: "taskId", type: "int"},
{name: "description", type: "string"},
{name: "estimate", type: "float"},
{name: "rate", type: "float"},
{name: "cost", type: "float"},
{name: "due", type: "date", dateFormat:"m/d/Y"}
],
// additional configuration for remote
root:"data",
remoteGroup:true,
remoteSort: true
});
// define a custom summary function
Ext.ux.grid.GroupSummary.Calculations["totalCost"] = function(v, record, field){
return v + (record.data.estimate * record.data.rate);
};
// utilize custom extension for Hybrid Summary
var summary = new Ext.ux.grid.HybridSummary();
var grid = new xg.EditorGridPanel({
ds: new Ext.data.GroupingStore({
reader: reader,
// use remote data
proxy : new Ext.data.HttpProxy({
url: "ext-3.0.0/examples/grid/totals-hybrid.json",
method: "GET"
}),
sortInfo: {field: "due", direction: "ASC"},
groupField: "project"
}),
columns: [
{
id: "description",
header: "Task",
width: 80,
sortable: true,
dataIndex: "description",
summaryType: "count",
hideable: false,
summaryRenderer: function(v, params, data){
return ((v === 0 || v > 1) ? "(" + v +" Tasks)" : "(1 Task)");
},
editor: new Ext.form.TextField({
allowBlank: false
})
},{
header: "Project",
width: 20,
sortable: true,
dataIndex: "project"
},{
header: "Due Date",
width: 25,
sortable: true,
dataIndex: "due",
summaryType:"max",
renderer: Ext.util.Format.dateRenderer("m/d/Y"),
editor: new Ext.form.DateField({
format: "m/d/Y"
})
},{
header: "Estimate",
width: 20,
sortable: true,
dataIndex: "estimate",
summaryType:"sum",
renderer : function(v){
return v +" hours";
},
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
style: "text-align:left"
})
},{
header: "Rate",
width: 20,
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: "rate",
summaryType:"average",
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
style: "text-align:left"
})
},{
id: "cost",
header: "Cost",
width: 20,
sortable: false,
groupable: false,
renderer: function(v, params, record){
return Ext.util.Format.usMoney(record.data.estimate * record.data.rate);
},
dataIndex: "cost",
summaryType: "totalCost",
summaryRenderer: Ext.util.Format.usMoney
}
],
view: new Ext.grid.GroupingView({
forceFit:true,
showGroupName: false,
enableNoGroups:false,
enableGroupingMenu:false,
hideGroupedColumn: true
}),
plugins: summary,
tbar : [{
text: "Toggle",
tooltip: "Toggle the visibility of summary row",
handler: function(){summary.toggleSummaries();}
}],
frame: true,
width: 800,
height: 450,
clicksToEdit: 1,
collapsible: true,
animCollapse: false,
trackMouseOver: false,
//enableColumnMove: false,
title: "Sponsored Projects",
iconCls: "icon-grid",
renderTo: document.body
});
grid.on("afteredit", function(){
var groupValue = "Ext Forms: Field Anchoring";
summary.showSummaryMsg(groupValue, "Updating Summary...");
setTimeout(function(){ // simulate server call
// HybridSummary class implements updateSummaryData
summary.updateSummaryData(groupValue,
// create data object based on configured dataIndex
{description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
}, 2000);
});
// load the remote data
grid.store.load();
}); </script>
</body></html>
</source>
Custom renderer function
<source lang="html4strict">
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
// 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 "" + val + "";
}else if(val < 0){
return "" + val + "";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "" + val + "%";
}else if(val < 0){
return "" + val + "%";
}
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>
</body> </html>
</source>
Define custom renderer for table row
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function() {
var store = new Ext.data.Store({
data: [
[1,"A","D","2009-02-19",1,"asdf",19.95,true],
[3,"B","E","2002-02-15",1,"asdf",14.95,1],
[4,"C","F","2009-10-01",2,"asdf",19.95,true]
],
reader: new Ext.data.ArrayReader({id:"id"}, [
"id",
"title",
"director",
{name: "released", type: "date", dateFormat: "Y-m-d"},
"genre",
"tagline",
{name: "price", type: "float"},
{name: "available", type: "bool"}
])
});
function title_tagline(val, x, store){
return ""+val+"
"+store.data.tagline;
}
var grid = new Ext.grid.GridPanel({
renderTo: document.body,
frame:true,
title: "Movie Database",
height:200,
width:520,
enableColumnMove: false,
store: store,
columns: [
{header: "Title", dataIndex: "title",renderer: title_tagline},
{header: "Director", dataIndex: "director"},
{header: "Released", dataIndex: "released", renderer: Ext.util.Format.dateRenderer("m/d/Y")},
{header: "Genre", dataIndex: "genre"},
{header: "Tagline", dataIndex: "tagline"}
]
});
});
</script> <body>
</body> </html>
</source>
Define your own render function for columns in a GridPanel
<source lang="html4strict">
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
// create the Data Store
var store = new Ext.data.JsonStore({
root: "topics",
totalProperty: "totalCount",
idProperty: "threadid",
remoteSort: true,
fields: [
"title", "forumtitle", "forumid", "author",
{name: "replycount", type: "int"},
{name: "lastpost", mapping: "lastpost", type: "date", dateFormat: "timestamp"},
"lastposter", "excerpt"
],
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: "http://extjs.ru/forum/topics-browse-remote.php"
})
});
store.setDefaultSort("lastpost", "desc");
// pluggable renders
function renderTopic(value, p, record){
return String.format(
"<a href="http://extjs.ru/forum/showthread.php?t={2}" target="_blank">{0}</a><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}
by {1}", value.dateFormat("M j, Y, g:i a"), r.data["lastposter"]);
}
var grid = new Ext.grid.GridPanel({
width:700,
height:500,
title:"ExtJS.ru - Browse Forums",
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true,
// grid columns
columns:[{
id: "topic", // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
header: "Topic",
dataIndex: "title",
width: 420,
renderer: renderTopic,
sortable: true
},{
header: "Author",
dataIndex: "author",
width: 100,
hidden: true,
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
}],
// customize view config
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store){
if(this.showPreview){
p.body = ""+record.data.excerpt+"
"; return "x-grid3-row-expanded";
}
return "x-grid3-row-collapsed";
}
},
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: "Displaying topics {0} - {1} of {2}",
emptyMsg: "No topics to display",
items:[
"-", {
pressed: true,
enableToggle:true,
text: "Show Preview",
cls: "x-btn-text-icon details",
toggleHandler: function(btn, pressed){
var view = grid.getView();
view.showPreview = pressed;
view.refresh();
}
}]
})
});
// render it
grid.render("topic-grid");
// trigger the data store load
store.load({params:{start:0, limit:25}});
}); </script>
</body> </html>
</source>
Ext.util.Format.usMoney
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/ux/RowExpander.js"></script> <style type="text/css">
body .x-panel {
margin-bottom:20px;
}
.icon-grid {
background-image:url(ext-3.0.0/examples/shared/icons/fam/grid.png) !important;
}
#button-grid .x-panel-body {
border:1px solid #99bbe8;
border-top:0 none;
}
.add {
background-image:url(ext-3.0.0/examples/shared/icons/fam/add.gif) !important;
}
.option {
background-image:url(ext-3.0.0/examples/shared/icons/fam/plugin.gif) !important;
}
.remove {
background-image:url(ext-3.0.0/examples/shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(ext-3.0.0/examples/shared/icons/save.gif) !important;
}
</style> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init();
var xg = Ext.grid;
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: "company"},
{name: "price", type: "float"},
{name: "change", type: "float"},
{name: "pctChange", type: "float"},
{name: "lastChange", type: "date", dateFormat: "n/j h:ia"},
{name: "industry"},
{name: "desc"}
]);
////////////////////////////////////////////////////////////////////////////////////////
// Grid 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.
Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.");
} </script> </body> </html>
</source>
Ext.ux.grid.RowExpander
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/ux/RowExpander.js"></script> <style type="text/css">
body .x-panel {
margin-bottom:20px;
}
.icon-grid {
background-image:url(ext-3.0.0/examples/shared/icons/fam/grid.png) !important;
}
#button-grid .x-panel-body {
border:1px solid #99bbe8;
border-top:0 none;
}
.add {
background-image:url(ext-3.0.0/examples/shared/icons/fam/add.gif) !important;
}
.option {
background-image:url(ext-3.0.0/examples/shared/icons/fam/plugin.gif) !important;
}
.remove {
background-image:url(ext-3.0.0/examples/shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(ext-3.0.0/examples/shared/icons/save.gif) !important;
}
</style> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init();
var xg = Ext.grid;
// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: "company"},
{name: "price", type: "float"},
{name: "change", type: "float"},
{name: "pctChange", type: "float"},
{name: "lastChange", type: "date", dateFormat: "n/j h:ia"},
{name: "industry"},
{name: "desc"}
]);
////////////////////////////////////////////////////////////////////////////////////////
// Grid 1
////////////////////////////////////////////////////////////////////////////////////////
// row expander
var expander = new Ext.ux.grid.RowExpander({
tpl : new Ext.Template(
"Company: {company}
", "
Summary: {desc}
" )
});
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.
Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.");
} </script> </body> </html>
</source>
Set different renders for columns
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
// 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 "" + val + "";
}else if(val < 0){
return "" + val + "";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "" + val + "%";
}else if(val < 0){
return "" + val + "%";
}
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>
</body> </html>
</source>
Use Ext.util.Format.dateRenderer
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
// 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 "" + val + "";
}else if(val < 0){
return "" + val + "";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "" + val + "%";
}else if(val < 0){
return "" + val + "%";
}
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>
</body> </html>
</source>
