181 lines
No EOL
7.3 KiB
JavaScript
181 lines
No EOL
7.3 KiB
JavaScript
/*
|
|
This file is part of Ext JS 3.4
|
|
|
|
Copyright (c) 2011-2013 Sencha Inc
|
|
|
|
Contact: http://www.sencha.com/contact
|
|
|
|
GNU General Public License Usage
|
|
This file may be used under the terms of the GNU General Public License version 3.0 as
|
|
published by the Free Software Foundation and appearing in the file LICENSE included in the
|
|
packaging of this file.
|
|
|
|
Please review the following information to ensure the GNU General Public License version 3.0
|
|
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
|
|
|
|
If you are unsure which license is appropriate for your use, please contact the sales department
|
|
at http://www.sencha.com/contact.
|
|
|
|
Build date: 2013-04-03 15:07:25
|
|
*/
|
|
Ext.onReady(function(){
|
|
Ext.QuickTips.init();
|
|
|
|
// 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());
|
|
|
|
// sample static data for the store
|
|
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']
|
|
];
|
|
|
|
/**
|
|
* Custom function used for column renderer
|
|
* @param {Object} val
|
|
*/
|
|
function change(val) {
|
|
if (val > 0) {
|
|
return '<span style="color:green;">' + val + '</span>';
|
|
} else if (val < 0) {
|
|
return '<span style="color:red;">' + val + '</span>';
|
|
}
|
|
return val;
|
|
}
|
|
|
|
/**
|
|
* Custom function used for column renderer
|
|
* @param {Object} val
|
|
*/
|
|
function pctChange(val) {
|
|
if (val > 0) {
|
|
return '<span style="color:green;">' + val + '%</span>';
|
|
} else if (val < 0) {
|
|
return '<span style="color:red;">' + val + '%</span>';
|
|
}
|
|
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'}
|
|
]
|
|
});
|
|
|
|
// manually load local data
|
|
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'
|
|
},
|
|
{
|
|
xtype: 'actioncolumn',
|
|
width: 50,
|
|
items: [{
|
|
icon : '../shared/icons/fam/delete.gif', // Use a URL in the icon config
|
|
tooltip: 'Sell stock',
|
|
handler: function(grid, rowIndex, colIndex) {
|
|
var rec = store.getAt(rowIndex);
|
|
alert("Sell " + rec.get('company'));
|
|
}
|
|
}, {
|
|
getClass: function(v, meta, rec) { // Or return a class from a function
|
|
if (rec.get('change') < 0) {
|
|
this.items[1].tooltip = 'Do not buy!';
|
|
return 'alert-col';
|
|
} else {
|
|
this.items[1].tooltip = 'Buy stock';
|
|
return 'buy-col';
|
|
}
|
|
},
|
|
handler: function(grid, rowIndex, colIndex) {
|
|
var rec = store.getAt(rowIndex);
|
|
alert("Buy " + rec.get('company'));
|
|
}
|
|
}]
|
|
}
|
|
],
|
|
stripeRows: true,
|
|
autoExpandColumn: 'company',
|
|
height: 350,
|
|
width: 600,
|
|
title: 'Array Grid',
|
|
// config options for stateful behavior
|
|
stateful: true,
|
|
stateId: 'grid'
|
|
});
|
|
|
|
// render the grid to the specified div in the page
|
|
grid.render('grid-example');
|
|
}); |