JavaScript DHTML/Ext JS/XmlReader
Data Binding Example and Ext.data.XmlReader
<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>
Define XML reader for read data from xml file
<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 */
// some data used in the examples Ext.namespace("Ext.exampledata"); Ext.exampledata.states = [
["AL", "Alabama", "The Heart of Dixie"],
["AK", "Alaska", "The Land of the Midnight Sun"],
["AZ", "Arizona", "The Grand Canyon State"],
["AR", "Arkansas", "The Natural State"],
["CA", "California", "The Golden State"],
["CO", "Colorado", "The Mountain State"],
["CT", "Connecticut", "The Constitution State"],
["DE", "Delaware", "The First State"],
["DC", "District of Columbia", "The Nation"s Capital"],
["FL", "Florida", "The Sunshine State"],
["GA", "Georgia", "The Peach State"],
["HI", "Hawaii", "The Aloha State"],
["ID", "Idaho", "Famous Potatoes"],
["IL", "Illinois", "The Prairie State"],
["IN", "Indiana", "The Hospitality State"],
["IA", "Iowa", "The Corn State"],
["KS", "Kansas", "The Sunflower State"],
["KY", "Kentucky", "The Bluegrass State"],
["LA", "Louisiana", "The Bayou State"],
["ME", "Maine", "The Pine Tree State"],
["MD", "Maryland", "Chesapeake State"],
["MA", "Massachusetts", "The Spirit of America"],
["MI", "Michigan", "Great Lakes State"],
["MN", "Minnesota", "North Star State"],
["MS", "Mississippi", "Magnolia State"],
["MO", "Missouri", "Show Me State"],
["MT", "Montana", "Big Sky Country"],
["NE", "Nebraska", "Beef State"],
["NV", "Nevada", "Silver State"],
["NH", "New Hampshire", "Granite State"],
["NJ", "New Jersey", "Garden State"],
["NM", "New Mexico", "Land of Enchantment"],
["NY", "New York", "Empire State"],
["NC", "North Carolina", "First in Freedom"],
["ND", "North Dakota", "Peace Garden State"],
["OH", "Ohio", "The Heart of it All"],
["OK", "Oklahoma", "Oklahoma is OK"],
["OR", "Oregon", "Pacific Wonderland"],
["PA", "Pennsylvania", "Keystone State"],
["RI", "Rhode Island", "Ocean State"],
["SC", "South Carolina", "Nothing Could be Finer"],
["SD", "South Dakota", "Great Faces, Great Places"],
["TN", "Tennessee", "Volunteer State"],
["TX", "Texas", "Lone Star State"],
["UT", "Utah", "Salt Lake State"],
["VT", "Vermont", "Green Mountain State"],
["VA", "Virginia", "Mother of States"],
["WA", "Washington", "Green Tree State"],
["WV", "West Virginia", "Mountain State"],
["WI", "Wisconsin", "America"s Dairyland"],
["WY", "Wyoming", "Like No Place on Earth"]
];
/*!
* 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 fs = new Ext.FormPanel({
frame: true,
title:"XML Form",
labelAlign: "right",
labelWidth: 85,
width:340,
waitMsgTarget: true,
// configure how to read the XML Data
reader : new Ext.data.XmlReader({
record : "contact",
success: "@success"
}, [
{name: "first", mapping:"name/first"}, // custom mapping
{name: "last", mapping:"name/last"},
"company", "email", "state",
{name: "dob", type:"date", dateFormat:"m/d/Y"} // custom data types
]),
// reusable eror reader class defined at the end of this file
errorReader: new Ext.form.XmlErrorReader(),
items: [
new Ext.form.FieldSet({
title: "Contact Information",
autoHeight: true,
defaultType: "textfield",
items: [{
fieldLabel: "First Name",
name: "first",
width:190
}, {
fieldLabel: "Last Name",
name: "last",
width:190
}, {
fieldLabel: "Company",
name: "company",
width:190
}, {
fieldLabel: "Email",
name: "email",
vtype:"email",
width:190
},
new Ext.form.ruboBox({
fieldLabel: "State",
hiddenName:"state",
store: new Ext.data.ArrayStore({
fields: ["abbr", "state"],
data : Ext.exampledata.states // from states.js
}),
valueField:"abbr",
displayField:"state",
typeAhead: true,
mode: "local",
triggerAction: "all",
emptyText:"Select a state...",
selectOnFocus:true,
width:190
}),
new Ext.form.DateField({
fieldLabel: "Date of Birth",
name: "dob",
width:190,
allowBlank:false
})
]
})
]
});
// simple button add
fs.addButton("Load", function(){
fs.getForm().load({url:"ext-3.0.0/examples/form/xml-form.xml", waitMsg:"Loading"});
});
// explicit add
var submit = fs.addButton({
text: "Submit",
disabled:true,
handler: function(){
fs.getForm().submit({url:"ext-3.0.0/examples/form/xml-errors.xml", waitMsg:"Saving Data..."});
}
});
fs.render("form-ct");
fs.on({
actioncomplete: function(form, action){
if(action.type == "load"){
submit.enable();
}
}
});
}); // A reusable error reader class for XML forms Ext.form.XmlErrorReader = function(){
Ext.form.XmlErrorReader.superclass.constructor.call(this, {
record : "field",
success: "@success"
}, [
"id", "msg"
]
);
}; Ext.extend(Ext.form.XmlErrorReader, Ext.data.XmlReader); </script>
</body> </html>
</source>
Use Ext.data.XmlReader to load data from xml file
<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>
