JavaScript DHTML/Ext JS/Store
Load a grid with XML data
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: "ext-3.0.0/examples/grid/sheldon.xml",
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: "Item",
id: "ASIN",
totalRecords: "@total"
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: "Author", mapping: "ItemAttributes > Author"},
"Title", "Manufacturer", "ProductGroup"
])
});
// 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}
],
renderTo:"example-grid",
width:540,
height:200
});
store.load();
});
</script>
<div id="example-grid"></div></body>
</html>
Server Json reader based Store
<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 values = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ["id", "name"],
root: "rows"
}),
proxy: new Ext.data.HttpProxy({
url: "data.php"
}),
autoLoad: true
});
new Ext.FormPanel({
url: "your.php",
renderTo: Ext.getBody(),
frame: true,
title: "Title",
width: 550,
items: [
{
xtype: "combo",
name: "value",
fieldLabel: "Value",
mode: "local",
store: values,
displayField:"name",
valueField: "id",
width: 130
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
Set sortInfo for Ext.data.Store
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
<script type="text/javascript" src="ext-3.0.0/examples/ux/CheckColumn.js"></script>
<style type="text/css">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
#grid-example .x-grid-col-1 {
text-align: right;
}
#grid-example .x-grid-col-2{
text-align: right;
}
#grid-example .x-grid-col-3 {
text-align: right;
}
#grid-example .x-grid-col-4 {
text-align: right;
}
#grid-example.x-grid-mso{
border: 1px solid #6593cf;
}
#grid-example.x-grid-vista{
border: 1px solid #b3bcc0;
}
#xml-grid-example{
border: 1px solid #cbc7b8;
left: 0;
position: relative;
top: 0;
}
#editor-grid .x-grid-col-2{
text-align:right;
}
.x-grid3-td-topic b {
font-family:tahoma, verdana;
display:block;
}
.x-grid3-td-topic b i {
font-weight:normal;
font-style: normal;
color:#000;
}
.x-grid3-td-topic .x-grid3-cell-inner {
white-space:normal;
}
.x-grid3-td-topic a {
color: #385F95;
text-decoration:none;
}
.x-grid3-td-topic a:hover {
text-decoration:underline;
}
.details .x-btn-text {
background-image: url(details.gif);
}
.x-resizable-pinned .x-resizable-handle-south{
background:url(ext-3.0.0/resources/images/default/sizer/s-handle-dark.gif);
background-position: top;
}
</style>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
function formatDate(value){
return value ? value.dateFormat("M d, Y") : "";
}
// shorthand alias
var fm = Ext.form;
// custom column plugin example
var checkColumn = new Ext.grid.CheckColumn({
header: "Indoor?",
dataIndex: "indoor",
width: 55
});
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
id: "common",
header: "Common Name",
dataIndex: "common",
width: 220,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
})
},{
header: "Light",
dataIndex: "light",
width: 130,
editor: new fm.ruboBox({
typeAhead: true,
triggerAction: "all",
transform:"light",
lazyRender: true,
listClass: "x-combo-list-small"
})
},{
header: "Price",
dataIndex: "price",
width: 70,
align: "right",
renderer: "usMoney",
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
},{
header: "Available",
dataIndex: "availDate",
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: "m/d/y",
minValue: "01/01/06",
disabledDays: [0, 6],
disabledDaysText: "Plants are not available on the weekends"
})
},
checkColumn
]);
// by default columns are sortable
cm.defaultSortable = true;
// create the Data Store
var store = new Ext.data.Store({
// load remote data using HTTP
url: "ext-3.0.0/examples/grid/plants.xml",
// specify a XmlReader (coincides with the XML format of the returned data)
reader: new Ext.data.XmlReader(
{
// records will have a "plant" tag
record: "plant"
},
// use an Array of field definition objects to implicitly create a Record constructor
[
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: "common", type: "string"},
{name: "botanical", type: "string"},
{name: "light"},
{name: "price", type: "float"},
// dates can be automatically converted by specifying dateFormat
{name: "availDate", mapping: "availability", type: "date", dateFormat: "m/d/Y"},
{name: "indoor", type: "bool"}
]
),
sortInfo: {field:"common", direction:"ASC"}
});
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: "editor-grid",
width: 600,
height: 300,
autoExpandColumn: "common",
title: "Edit Plants?",
frame: true,
plugins: checkColumn,
clicksToEdit: 1,
tbar: [{
text: "Add Plant",
handler : function(){
// access the Record constructor through the grid"s store
var Plant = grid.getStore().recordType;
var p = new Plant({
common: "New Plant 1",
light: "Mostly Shade",
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
});
grid.stopEditing();
store.insert(0, p);
grid.startEditing(0, 0);
}
}]
});
// trigger the data store load
store.load();
});
</script>
<!-- the custom editor for the "Light" column references the id="light" -->
<select name="light" id="light" style="display: none;">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>
<option value="Mostly Sunny">Mostly Sunny</option>
<option value="Sunny">Sunny</option>
</select>
<div id="editor-grid"></div>
</body>
</html>