JavaScript DHTML/Ext JS/ArrayStore
Содержание
Create a grid from Array data
<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>
Create ArrayStore, set data and 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> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
Ext.QuickTips.init();
var names = [
["A"],
["B"],
["C"],
["D"]
];
var mySimpleStore = new Ext.data.ArrayStore({
data : names,
fields : ["name"]
});
var combo = {
xtype : "combo",
fieldLabel : "Letter",
store : mySimpleStore,
displayField : "name",
typeAhead : true,
mode : "local"
}
new Ext.Window({
title : "Title here",
height : 100,
layout : "form",
labelWidth : 80,
bodyStyle : "padding: 5px",
items : combo
}).show()
}); </script>
asdf
</body> </html>
</source>
dateFormat for Ext.data.ArrayStore
<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 display field from ArrayStore for a 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> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
Ext.QuickTips.init();
var names = [
["A"],
["B"],
["C"],
["D"]
];
var mySimpleStore = new Ext.data.ArrayStore({
data : names,
fields : ["name"]
});
var combo = {
xtype : "combo",
fieldLabel : "Letter",
store : mySimpleStore,
displayField : "name",
typeAhead : true,
mode : "local"
}
new Ext.Window({
title : "Title here",
height : 100,
layout : "form",
labelWidth : 80,
bodyStyle : "padding: 5px",
items : combo
}).show()
}); </script>
asdf
</body> </html>
</source>
Set type for ArrayStore
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myData = [
["3m Co",71.72,0.02,0.03,"9/1 12:00am"],
["Alcoa Inc",29.01,0.42,1.47,"9/1 12:00am"],
["Altria Group Inc",83.81,0.28,0.34,"9/1 12:00am"],
["American Express Company",52.55,0.01,0.02,"9/1 12:00am"],
["American International Group, Inc.",64.13,0.31,0.49,"9/1 12:00am"],
["AT&T Inc.",31.61,-0.48,-1.54,"9/1 12:00am"],
["Boeing Co.",75.43,0.53,0.71,"9/1 12:00am"],
["Caterpillar Inc.",67.27,0.92,1.39,"9/1 12:00am"],
["Citigroup, Inc.",49.37,0.02,0.04,"9/1 12:00am"],
["E.I. du Pont de Nemours and Company",40.48,0.51,1.28,"9/1 12:00am"],
["Exxon Mobil Corp",68.1,-0.43,-0.64,"9/1 12:00am"],
["General Electric Company",34.14,-0.08,-0.23,"9/1 12:00am"],
["General Motors Corporation",30.27,1.09,3.74,"9/1 12:00am"],
["Hewlett-Packard Co.",36.53,-0.03,-0.08,"9/1 12:00am"],
["Honeywell Intl Inc",38.77,0.05,0.13,"9/1 12:00am"],
["Intel Corporation",19.88,0.31,1.58,"9/1 12:00am"],
["International Business Machines",81.41,0.44,0.54,"9/1 12:00am"],
["Johnson & Johnson",64.72,0.06,0.09,"9/1 12:00am"],
["JP Morgan & Chase & Co",45.73,0.07,0.15,"9/1 12:00am"],
["McDonald\"s Corporation",36.76,0.86,2.40,"9/1 12:00am"],
["Merck & Co., Inc.",40.96,0.41,1.01,"9/1 12:00am"],
["Microsoft Corporation",25.84,0.14,0.54,"9/1 12:00am"],
["Pfizer Inc",27.96,0.4,1.45,"9/1 12:00am"],
["The Coca-Cola Company",45.07,0.26,0.58,"9/1 12:00am"],
["The Home Depot, Inc.",34.64,0.35,1.02,"9/1 12:00am"],
["The Procter & Gamble Company",61.91,0.01,0.02,"9/1 12:00am"],
["United Technologies Corporation",63.26,0.55,0.88,"9/1 12:00am"],
["Verizon Communications",35.57,0.39,1.11,"9/1 12:00am"],
["Wal-Mart Stores, Inc.",45.45,0.73,1.63,"9/1 12:00am"]
];
// example of custom renderer function
function change(val){
if(val > 0){
return "" + val + "";
}else if(val < 0){
return "" + val + "";
}
return val;
}
// example of custom renderer function
function pctChange(val){
if(val > 0){
return "" + val + "%";
}else if(val < 0){
return "" + val + "%";
}
return val;
}
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: "company"},
{name: "price", type: "float"},
{name: "change", type: "float"},
{name: "pctChange", type: "float"},
{name: "lastChange", type: "date", dateFormat: "n/j h:ia"}
]
});
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:"company",header: "Company", width: 160, sortable: true, dataIndex: "company"},
{header: "Price", width: 75, sortable: true, renderer: "usMoney", dataIndex: "price"},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: "change"},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: "pctChange"},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer("m/d/Y"), dataIndex: "lastChange"}
],
stripeRows: true,
autoExpandColumn: "company",
height:350,
width:600,
title:"Array Grid"
});
grid.render("grid-example");
}); </script>
</body> </html>
</source>
Use ArrayStore to create a combobox 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> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
Ext.QuickTips.init();
var names = [
["A"],
["B"],
["C"],
["D"]
];
var mySimpleStore = new Ext.data.ArrayStore({
data : names,
fields : ["name"]
});
var combo = {
xtype : "combo",
fieldLabel : "Letter",
store : mySimpleStore,
displayField : "name",
typeAhead : true,
mode : "local"
}
new Ext.Window({
title : "Title here",
height : 100,
layout : "form",
labelWidth : 80,
bodyStyle : "padding: 5px",
items : combo
}).show()
}); </script>
asdf
</body> </html>
</source>
Use Ext.data.ArrayStore with Ext.form.ComboBox
<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>
