JavaScript DHTML/Ext JS/GridPanel — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 10: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
<source lang="html4strict">
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/RowExpander.js"></script>
<style type="text/css">
body .x-panel { margin-bottom:20px; } .icon-grid { background-image:url(ext-3.0.0/examples/shared/icons/fam/grid.png) !important; } #button-grid .x-panel-body { border:1px solid #99bbe8; border-top:0 none; } .add { background-image:url(ext-3.0.0/examples/shared/icons/fam/add.gif) !important; } .option { background-image:url(ext-3.0.0/examples/shared/icons/fam/plugin.gif) !important; } .remove { background-image:url(ext-3.0.0/examples/shared/icons/fam/delete.gif) !important; } .save { background-image:url(ext-3.0.0/examples/shared/icons/save.gif) !important; }
</style> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init(); var xg = Ext.grid; // shared reader var reader = new Ext.data.ArrayReader({}, [ {name: "company"}, {name: "price", type: "float"}, {name: "change", type: "float"}, {name: "pctChange", type: "float"}, {name: "lastChange", type: "date", dateFormat: "n/j h:ia"}, {name: "industry"}, {name: "desc"} ]); //////////////////////////////////////////////////////////////////////////////////////// // Grid 4 //////////////////////////////////////////////////////////////////////////////////////// var sm2 = new xg.CheckboxSelectionModel({ listeners: { // On selection change, set enabled state of the removeButton // which was placed into the GridPanel using the ref config selectionchange: function(sm) { if (sm.getCount()) { grid4.removeButton.enable(); } else { grid4.removeButton.disable(); } } } }); var grid4 = new xg.GridPanel({ id:"button-grid", store: new Ext.data.Store({ reader: reader, data: xg.dummyData }), cm: new xg.ColumnModel([ sm2, {id:"company",header: "Company", width: 40, sortable: true, dataIndex: "company"}, {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"}, {header: "Change", width: 20, sortable: true, dataIndex: "change"}, {header: "% Change", width: 20, sortable: true, dataIndex: "pctChange"}, {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"} ]), sm: sm2, viewConfig: { forceFit:true }, columnLines: true, // inline buttons buttons: [{text:"Save"},{text:"Cancel"}], buttonAlign:"center", // inline toolbars tbar:[{ text:"Add Something", tooltip:"Add a new row", iconCls:"add" }, "-", { text:"Options", tooltip:"Blah blah blah blaht", iconCls:"option" },"-",{ text:"Remove Something", tooltip:"Remove the selected item", iconCls:"remove", // Place a reference in the GridPanel ref: "../removeButton", disabled: true }], width:600, height:300, frame:true, title:"Support for standard Panel features such as framing, buttons and toolbars", iconCls:"icon-grid", renderTo: document.body });});
// Array data for the grids Ext.grid.dummyData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am", "Manufacturing"], ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am", "Manufacturing"], ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am", "Manufacturing"], ["American Express Company",52.55,0.01,0.02,"9/1 12:00am", "Finance"], ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am", "Services"], ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am", "Services"], ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am", "Manufacturing"], ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am", "Services"], ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am", "Finance"], ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am", "Manufacturing"], ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am", "Manufacturing"], ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am", "Manufacturing"], ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am", "Automotive"], ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am", "Computer"], ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am", "Manufacturing"], ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am", "Computer"], ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am", "Computer"], ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am", "Medical"], ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am", "Finance"], ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am", "Food"], ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am", "Medical"], ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am", "Computer"], ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am", "Services", "Medical"], ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am", "Food"], ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am", "Retail"], ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am", "Manufacturing"], ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am", "Computer"], ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am", "Services"], ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am", "Retail"], ["Walt Disney Company (The) (Holding Company)",29.89,0.24,0.81,"9/1 12:00am", "Services"]
]; // add in some dummy descriptions for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.
Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.");
} </script> </body> </html>
</source>
Add rowselect event handler to 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.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>
", "Author: {Author}
", "Manufacturer: {Manufacturer}
", "Product Group: {ProductGroup}
" ]; 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>
</body> </html>
</source>
Add row to a table
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> Ext.onReady(function() {
var myData = { records : [ { name : "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>
</body> </html>
</source>
autoExpandColumn: "column name",
<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>
Buffer Grid Example
<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>
Create a grid with from an existing, unformatted HTML table.
<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/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>
<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>
Name | Age | Sex |
---|---|---|
Barney Rubble | 32 | Male |
Fred Flintstone | 33 | Male |
Betty Rubble | 32 | Female |
Pebbles | 1 | Female |
Bamm Bamm | 2 | Male |
</body> </html>
</source>
Data Binding Example - Implemented with classes
<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 */
// 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>
", "Author: {Author}
", "Manufacturer: {Manufacturer}
", "Product Group: {ProductGroup}
" ], // 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>
</body> </html>
</source>
Define column model and set header, dataIndex and sortable
<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 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>
</source>
Define RowSelectionModel and set single selection
<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 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>
</source>
GridPanel: buttons
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/ux/RowExpander.js"></script> <style type="text/css">
body .x-panel { margin-bottom:20px; } .icon-grid { background-image:url(ext-3.0.0/examples/shared/icons/fam/grid.png) !important; } #button-grid .x-panel-body { border:1px solid #99bbe8; border-top:0 none; } .add { background-image:url(ext-3.0.0/examples/shared/icons/fam/add.gif) !important; } .option { background-image:url(ext-3.0.0/examples/shared/icons/fam/plugin.gif) !important; } .remove { background-image:url(ext-3.0.0/examples/shared/icons/fam/delete.gif) !important; } .save { background-image:url(ext-3.0.0/examples/shared/icons/save.gif) !important; }
</style> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init(); var xg = Ext.grid; // shared reader var reader = new Ext.data.ArrayReader({}, [ {name: "company"}, {name: "price", type: "float"}, {name: "change", type: "float"}, {name: "pctChange", type: "float"}, {name: "lastChange", type: "date", dateFormat: "n/j h:ia"}, {name: "industry"}, {name: "desc"} ]); //////////////////////////////////////////////////////////////////////////////////////// // Grid 4 //////////////////////////////////////////////////////////////////////////////////////// var sm2 = new xg.CheckboxSelectionModel({ listeners: { // On selection change, set enabled state of the removeButton // which was placed into the GridPanel using the ref config selectionchange: function(sm) { if (sm.getCount()) { grid4.removeButton.enable(); } else { grid4.removeButton.disable(); } } } }); var grid4 = new xg.GridPanel({ id:"button-grid", store: new Ext.data.Store({ reader: reader, data: xg.dummyData }), cm: new xg.ColumnModel([ sm2, {id:"company",header: "Company", width: 40, sortable: true, dataIndex: "company"}, {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"}, {header: "Change", width: 20, sortable: true, dataIndex: "change"}, {header: "% Change", width: 20, sortable: true, dataIndex: "pctChange"}, {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"} ]), sm: sm2, viewConfig: { forceFit:true }, columnLines: true, // inline buttons buttons: [{text:"Save"},{text:"Cancel"}], buttonAlign:"center", // inline toolbars tbar:[{ text:"Add Something", tooltip:"Add a new row", iconCls:"add" }, "-", { text:"Options", tooltip:"Blah blah blah blaht", iconCls:"option" },"-",{ text:"Remove Something", tooltip:"Remove the selected item", iconCls:"remove", // Place a reference in the GridPanel ref: "../removeButton", disabled: true }], width:600, height:300, frame:true, title:"Support for standard Panel features such as framing, buttons and toolbars", iconCls:"icon-grid", renderTo: document.body });});
// Array data for the grids Ext.grid.dummyData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am", "Manufacturing"], ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am", "Manufacturing"], ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am", "Manufacturing"], ["American Express Company",52.55,0.01,0.02,"9/1 12:00am", "Finance"], ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am", "Services"], ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am", "Services"], ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am", "Manufacturing"], ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am", "Services"], ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am", "Finance"], ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am", "Manufacturing"], ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am", "Manufacturing"], ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am", "Manufacturing"], ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am", "Automotive"], ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am", "Computer"], ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am", "Manufacturing"], ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am", "Computer"], ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am", "Computer"], ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am", "Medical"], ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am", "Finance"], ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am", "Food"], ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am", "Medical"], ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am", "Computer"], ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am", "Services", "Medical"], ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am", "Food"], ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am", "Retail"], ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am", "Manufacturing"], ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am", "Computer"], ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am", "Services"], ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am", "Retail"], ["Walt Disney Company (The) (Holding Company)",29.89,0.24,0.81,"9/1 12:00am", "Services"]
]; // add in some dummy descriptions for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.
Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.");
} </script> </body> </html>
</source>
GridPanel Framed with Checkbox Selection and Horizontal Scrolling
<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 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.
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>
GridPanel: framing
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script type="text/javascript" src="ext-3.0.0/examples/ux/RowExpander.js"></script> <style type="text/css">
body .x-panel { margin-bottom:20px; } .icon-grid { background-image:url(ext-3.0.0/examples/shared/icons/fam/grid.png) !important; } #button-grid .x-panel-body { border:1px solid #99bbe8; border-top:0 none; } .add { background-image:url(ext-3.0.0/examples/shared/icons/fam/add.gif) !important; } .option { background-image:url(ext-3.0.0/examples/shared/icons/fam/plugin.gif) !important; } .remove { background-image:url(ext-3.0.0/examples/shared/icons/fam/delete.gif) !important; } .save { background-image:url(ext-3.0.0/examples/shared/icons/save.gif) !important; }
</style> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init(); var xg = Ext.grid; // shared reader var reader = new Ext.data.ArrayReader({}, [ {name: "company"}, {name: "price", type: "float"}, {name: "change", type: "float"}, {name: "pctChange", type: "float"}, {name: "lastChange", type: "date", dateFormat: "n/j h:ia"}, {name: "industry"}, {name: "desc"} ]); //////////////////////////////////////////////////////////////////////////////////////// // Grid 4 //////////////////////////////////////////////////////////////////////////////////////// var sm2 = new xg.CheckboxSelectionModel({ listeners: { // On selection change, set enabled state of the removeButton // which was placed into the GridPanel using the ref config selectionchange: function(sm) { if (sm.getCount()) { grid4.removeButton.enable(); } else { grid4.removeButton.disable(); } } } }); var grid4 = new xg.GridPanel({ id:"button-grid", store: new Ext.data.Store({ reader: reader, data: xg.dummyData }), cm: new xg.ColumnModel([ sm2, {id:"company",header: "Company", width: 40, sortable: true, dataIndex: "company"}, {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"}, {header: "Change", width: 20, sortable: true, dataIndex: "change"}, {header: "% Change", width: 20, sortable: true, dataIndex: "pctChange"}, {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"} ]), sm: sm2, viewConfig: { forceFit:true }, columnLines: true, // inline buttons buttons: [{text:"Save"},{text:"Cancel"}], buttonAlign:"center", // inline toolbars tbar:[{ text:"Add Something", tooltip:"Add a new row", iconCls:"add" }, "-", { text:"Options", tooltip:"Blah blah blah blaht", iconCls:"option" },"-",{ text:"Remove Something", tooltip:"Remove the selected item", iconCls:"remove", // Place a reference in the GridPanel ref: "../removeButton", disabled: true }], width:600, height:300, frame:true, title:"Support for standard Panel features such as framing, buttons and toolbars", iconCls:"icon-grid", renderTo: document.body });});
// Array data for the grids Ext.grid.dummyData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am", "Manufacturing"], ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am", "Manufacturing"], ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am", "Manufacturing"], ["American Express Company",52.55,0.01,0.02,"9/1 12:00am", "Finance"], ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am", "Services"], ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am", "Services"], ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am", "Manufacturing"], ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am", "Services"], ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am", "Finance"], ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am", "Manufacturing"], ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am", "Manufacturing"], ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am", "Manufacturing"], ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am", "Automotive"], ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am", "Computer"], ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am", "Manufacturing"], ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am", "Computer"], ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am", "Computer"], ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am", "Medical"], ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am", "Finance"], ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am", "Food"], ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am", "Medical"], ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am", "Computer"], ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am", "Services", "Medical"], ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am", "Food"], ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am", "Retail"], ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am", "Manufacturing"], ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am", "Computer"], ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am", "Services"], ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am", "Retail"], ["Walt Disney Company (The) (Holding Company)",29.89,0.24,0.81,"9/1 12:00am", "Services"]
]; // add in some dummy descriptions for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.
Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.");
} </script> </body> </html>
</source>
GridPanel: toolbars
<source lang="html4strict">
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/RowExpander.js"></script>
<style type="text/css">
body .x-panel { margin-bottom:20px; } .icon-grid { background-image:url(ext-3.0.0/examples/shared/icons/fam/grid.png) !important; } #button-grid .x-panel-body { border:1px solid #99bbe8; border-top:0 none; } .add { background-image:url(ext-3.0.0/examples/shared/icons/fam/add.gif) !important; } .option { background-image:url(ext-3.0.0/examples/shared/icons/fam/plugin.gif) !important; } .remove { background-image:url(ext-3.0.0/examples/shared/icons/fam/delete.gif) !important; } .save { background-image:url(ext-3.0.0/examples/shared/icons/save.gif) !important; }
</style> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init(); var xg = Ext.grid; // shared reader var reader = new Ext.data.ArrayReader({}, [ {name: "company"}, {name: "price", type: "float"}, {name: "change", type: "float"}, {name: "pctChange", type: "float"}, {name: "lastChange", type: "date", dateFormat: "n/j h:ia"}, {name: "industry"}, {name: "desc"} ]); //////////////////////////////////////////////////////////////////////////////////////// // Grid 4 //////////////////////////////////////////////////////////////////////////////////////// var sm2 = new xg.CheckboxSelectionModel({ listeners: { // On selection change, set enabled state of the removeButton // which was placed into the GridPanel using the ref config selectionchange: function(sm) { if (sm.getCount()) { grid4.removeButton.enable(); } else { grid4.removeButton.disable(); } } } }); var grid4 = new xg.GridPanel({ id:"button-grid", store: new Ext.data.Store({ reader: reader, data: xg.dummyData }), cm: new xg.ColumnModel([ sm2, {id:"company",header: "Company", width: 40, sortable: true, dataIndex: "company"}, {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: "price"}, {header: "Change", width: 20, sortable: true, dataIndex: "change"}, {header: "% Change", width: 20, sortable: true, dataIndex: "pctChange"}, {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"} ]), sm: sm2, viewConfig: { forceFit:true }, columnLines: true, // inline buttons buttons: [{text:"Save"},{text:"Cancel"}], buttonAlign:"center", // inline toolbars tbar:[{ text:"Add Something", tooltip:"Add a new row", iconCls:"add" }, "-", { text:"Options", tooltip:"Blah blah blah blaht", iconCls:"option" },"-",{ text:"Remove Something", tooltip:"Remove the selected item", iconCls:"remove", // Place a reference in the GridPanel ref: "../removeButton", disabled: true }], width:600, height:300, frame:true, title:"Support for standard Panel features such as framing, buttons and toolbars", iconCls:"icon-grid", renderTo: document.body });});
// Array data for the grids Ext.grid.dummyData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am", "Manufacturing"], ["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am", "Manufacturing"], ["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am", "Manufacturing"], ["American Express Company",52.55,0.01,0.02,"9/1 12:00am", "Finance"], ["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am", "Services"], ["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am", "Services"], ["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am", "Manufacturing"], ["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am", "Services"], ["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am", "Finance"], ["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am", "Manufacturing"], ["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am", "Manufacturing"], ["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am", "Manufacturing"], ["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am", "Automotive"], ["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am", "Computer"], ["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am", "Manufacturing"], ["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am", "Computer"], ["International Business Machines",81.41,0.44,0.54,"9/1 12:00am", "Computer"], ["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am", "Medical"], ["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am", "Finance"], ["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am", "Food"], ["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am", "Medical"], ["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am", "Computer"], ["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am", "Services", "Medical"], ["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am", "Food"], ["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am", "Retail"], ["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am", "Manufacturing"], ["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am", "Computer"], ["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am", "Services"], ["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am", "Retail"], ["Walt Disney Company (The) (Holding Company)",29.89,0.24,0.81,"9/1 12:00am", "Services"]
]; // add in some dummy descriptions for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push("Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.
Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.");
} </script> </body> </html>
</source>
Grid Plugins
<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>
Grid with Numbered Rows and Force Fit
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <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>
Grouping 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(){
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.
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>
Layout GridPanel(table) and FormPanel in border layout
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> Ext.onReady(function() {
var 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>
</body> </html>
</source>
Mark changed field
<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/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>
<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>
<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>
</body> </html>
</source>
Reload data 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> </head>
<body> <script type="text/javascript"> Ext.onReady(function() {
var myData = { records : [ { name : "Record 0", column1 : "0", column2 : "0" }, { name : "Record 1", column1 : "1", column2 : "1" }, { name : "Record 2", column1 : "2", column2 : "2" }, { name : "Record 3", column1 : "3", column2 : "3" }, { name : "Record 4", column1 : "4", column2 : "4" }, { name : "Record 5", column1 : "5", column2 : "5" }, { name : "Record 6", column1 : "6", column2 : "6" }, { name : "Record 7", column1 : "7", column2 : "7" }, { name : "Record 8", column1 : "8", column2 : "8" }, { name : "Record 9", column1 : "9", column2 : "9" } ] };
// Generic fields array to use in both store defs. var fields = [ {name: "name", mapping : "name"}, {name: "column1", mapping : "column1"}, {name: "column2", mapping : "column2"} ]; // create the data store var gridStore = new Ext.data.JsonStore({ fields : fields, data : myData, root : "records" });
// Column Model shortcut array var cols = [ { id : "name", header: "Record Name", width: 160, sortable: true, dataIndex: "name"}, {header: "column1", width: 50, sortable: true, dataIndex: "column1"}, {header: "column2", width: 50, sortable: true, dataIndex: "column2"} ]; // declare the source Grid var grid = new Ext.grid.GridPanel({ ddGroup : "gridDDGroup", store : gridStore, columns : cols, enableDragDrop : true, stripeRows : true, autoExpandColumn : "name", width : 650, height : 325, region : "west", title : "Data Grid", selModel : new Ext.grid.RowSelectionModel({singleSelect : true}) }); //Simple "border layout" panel to house both grids var displayPanel = new Ext.Panel({ width : 650, height : 300, layout: "fit", renderTo : "panel", items : [ grid ], bbar : [ "->", // Fill { text : "Reset Example", handler : function() { //refresh source grid gridStore.loadData(myData); } } ] });
}); </script>
</body> </html>
</source>
Remove all data from 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.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>
</body> </html>
</source>
Remove a row from a table
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> Ext.onReady(function() {
var myData = { records : [ { name : "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>
</body> </html>
</source>
Set autoExpandColumn for 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/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>
<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 "" + 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.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>
</body></html>
</source>
Set column name, width, height, title for Ext.grid.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.onReady(function() {
var myData = { records : [ { name : "Record 0", column1 : "0", column2 : "0" }, { name : "Record 1", column1 : "1", column2 : "1" }, { name : "Record 2", column1 : "2", column2 : "2" }, { name : "Record 3", column1 : "3", column2 : "3" }, { name : "Record 4", column1 : "4", column2 : "4" }, { name : "Record 5", column1 : "5", column2 : "5" }, { name : "Record 6", column1 : "6", column2 : "6" }, { name : "Record 7", column1 : "7", column2 : "7" }, { name : "Record 8", column1 : "8", column2 : "8" }, { name : "Record 9", column1 : "9", column2 : "9" } ] };
// Generic fields array to use in both store defs. var fields = [ {name: "name", mapping : "name"}, {name: "column1", mapping : "column1"}, {name: "column2", mapping : "column2"} ]; // create the data store var gridStore = new Ext.data.JsonStore({ fields : fields, data : myData, root : "records" });
// Column Model shortcut array var cols = [ { id : "name", header: "Record Name", width: 160, sortable: true, dataIndex: "name"}, {header: "column1", width: 50, sortable: true, dataIndex: "column1"}, {header: "column2", width: 50, sortable: true, dataIndex: "column2"} ]; // declare the source Grid var grid = new Ext.grid.GridPanel({ ddGroup : "gridDDGroup", store : gridStore, columns : cols, enableDragDrop : true, stripeRows : true, autoExpandColumn : "name", width : 650, height : 325, region : "west", title : "Data Grid", selModel : new Ext.grid.RowSelectionModel({singleSelect : true}) }); //Simple "border layout" panel to house both grids var displayPanel = new Ext.Panel({ width : 650, height : 300, layout: "fit", renderTo : "panel", items : [ grid ], bbar : [ "->", // Fill { text : "Reset Example", handler : function() { //refresh source grid gridStore.loadData(myData); } } ] });
}); </script>
</body> </html>
</source>
Set column to sortable
<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>
Set RowSelectionModel for Ext.grid.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.onReady(function() {
var myData = { records : [ { name : "Record 0", column1 : "0", column2 : "0" }, { name : "Record 1", column1 : "1", column2 : "1" }, { name : "Record 2", column1 : "2", column2 : "2" }, { name : "Record 3", column1 : "3", column2 : "3" }, { name : "Record 4", column1 : "4", column2 : "4" }, { name : "Record 5", column1 : "5", column2 : "5" }, { name : "Record 6", column1 : "6", column2 : "6" }, { name : "Record 7", column1 : "7", column2 : "7" }, { name : "Record 8", column1 : "8", column2 : "8" }, { name : "Record 9", column1 : "9", column2 : "9" } ] };
// Generic fields array to use in both store defs. var fields = [ {name: "name", mapping : "name"}, {name: "column1", mapping : "column1"}, {name: "column2", mapping : "column2"} ]; // create the data store var gridStore = new Ext.data.JsonStore({ fields : fields, data : myData, root : "records" });
// Column Model shortcut array var cols = [ { id : "name", header: "Record Name", width: 160, sortable: true, dataIndex: "name"}, {header: "column1", width: 50, sortable: true, dataIndex: "column1"}, {header: "column2", width: 50, sortable: true, dataIndex: "column2"} ]; // declare the source Grid var grid = new Ext.grid.GridPanel({ ddGroup : "gridDDGroup", store : gridStore, columns : cols, enableDragDrop : true, stripeRows : true, autoExpandColumn : "name", width : 650, height : 325, region : "west", title : "Data Grid", selModel : new Ext.grid.RowSelectionModel({singleSelect : true}) }); //Simple "border layout" panel to house both grids var displayPanel = new Ext.Panel({ width : 650, height : 300, layout: "fit", renderTo : "panel", items : [ grid ], bbar : [ "->", // Fill { text : "Reset Example", handler : function() { //refresh source grid gridStore.loadData(myData); } } ] });
}); </script>
</body> </html>
</source>
Set up data, column for Ext.grid.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.onReady(function() {
var myData = { records : [ { name : "Record 0", column1 : "0", column2 : "0" }, { name : "Record 1", column1 : "1", column2 : "1" }, { name : "Record 2", column1 : "2", column2 : "2" }, { name : "Record 3", column1 : "3", column2 : "3" }, { name : "Record 4", column1 : "4", column2 : "4" }, { name : "Record 5", column1 : "5", column2 : "5" }, { name : "Record 6", column1 : "6", column2 : "6" }, { name : "Record 7", column1 : "7", column2 : "7" }, { name : "Record 8", column1 : "8", column2 : "8" }, { name : "Record 9", column1 : "9", column2 : "9" } ] };
// Generic fields array to use in both store defs. var fields = [ {name: "name", mapping : "name"}, {name: "column1", mapping : "column1"}, {name: "column2", mapping : "column2"} ]; // create the data store var gridStore = new Ext.data.JsonStore({ fields : fields, data : myData, root : "records" });
// Column Model shortcut array var cols = [ { id : "name", header: "Record Name", width: 160, sortable: true, dataIndex: "name"}, {header: "column1", width: 50, sortable: true, dataIndex: "column1"}, {header: "column2", width: 50, sortable: true, dataIndex: "column2"} ]; // declare the source Grid var grid = new Ext.grid.GridPanel({ ddGroup : "gridDDGroup", store : gridStore, columns : cols, enableDragDrop : true, stripeRows : true, autoExpandColumn : "name", width : 650, height : 325, region : "west", title : "Data Grid", selModel : new Ext.grid.RowSelectionModel({singleSelect : true}) }); //Simple "border layout" panel to house both grids var displayPanel = new Ext.Panel({ width : 650, height : 300, layout: "fit", renderTo : "panel", items : [ grid ], bbar : [ "->", // Fill { text : "Reset Example", handler : function() { //refresh source grid gridStore.loadData(myData); } } ] });
}); </script>
</body> </html>
</source>
Sort table by name
<source lang="html4strict">
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body> <script type="text/javascript"> Ext.onReady(function() {
var myData = { records : [ { name : "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>
</body> </html>
</source>
Static data grid
<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 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>
</source>
stripeRows: true,
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext 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>
Table Selection
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init(); // turn on validation errors beside the field globally Ext.form.Field.prototype.msgTarget = "side"; var bd = Ext.getBody();
// 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 "" + value + ""; } // 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; } // 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>
</body> </html>
</source>
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.
<source lang="html4strict">
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
Ext.QuickTips.init(); // turn on validation errors beside the field globally Ext.form.Field.prototype.msgTarget = "side"; var bd = Ext.getBody();
// 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 "" + value + ""; } // 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; } // 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>
</source>
Updating the grid data via a button click
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
var 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>
</body> </html>
</source>
Using a Grid with a Form
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext 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 "" + value + ""; } // 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; } // 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>
</body> </html>
</source>