Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
/*
* The majority of this code is my own, but a few parts were copied from
* ExtJS grid examples. That code's license appears below. My code is
* likewise GNU GPL license v3 Licensed (http://www.gnu.org/copyleft/gpl.html)
*/
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.ns('Testr.ui');
Testr.ui.CompanyGrid = Ext.extend(Ext.grid.EditorGridPanel, {
stripeRows: true,
clicksToEdit: 1,
autoExpandColumn: 'company',
columnLines: true,
height: 300,
width: 600,
stateful: false,
viewConfig: {
forceFit: true,
deferEmptyText: false,
emptyText: 'No companies found.'
},
frame: true,
loadMask: {msg: 'Loading Companies...'},
title: 'Ext.Direct Grid w/ NodeJS, Connect, Mongoose & MongoDB',
iconCls: 'icon-grid',
initComponent: function() {
this.pageSize = 10;
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;
}
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;
}
Ext.app.REMOTING_API = {
type: 'remoting',
url: '/direct',
actions: {
Company: [
{name: 'create', len: 1},
{name: 'getAll', len: 1},
{name: 'update', len: 1},
{name: 'destroy', len: 1}
]
}
};
Ext.Direct.addProvider(Ext.app.REMOTING_API);
this.companyStore = new Ext.data.DirectStore({
storeId: 'companies',
autoLoad: false,
autoSave: false,
remoteSort: true,
autoDestroy: false,
baseParams: {
sort: 'name',
dir: 'ASC'
},
api: {
read: Company.getAll,
create: Company.create,
update: Company.update,
destroy: Company.destroy
},
root: 'rows',
totalProperty: 'total',
idProperty: '_id',
fields: [
{name: 'id', mapping: '_id'},
{name: 'name'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'changedAt', type: 'date', dateFormat: 'time'}
],
writer: new Ext.data.JsonWriter({
encode: false,
writeAllFields : false,
listful : true
}),
sortInfo: {
field: 'name',
direction: 'ASC'
}
});
this.checkSelectModel = new Ext.grid.CheckboxSelectionModel();
// create the Grid
var config = {
store: this.companyStore,
cm: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
this.checkSelectModel,
{
header: 'Company',
width: 40,
dataIndex: 'name',
editor: {
xtype: 'textfield',
maxLength: 255,
allowBlank: true
}
}, {
header: 'Price',
width: 20,
dataIndex: 'price',
renderer: Ext.util.Format.usMoney,
editor: {
xtype: 'numberfield',
selectOnFocus: true,
allowNegative: false,
allowDecimals: true,
decimalPrecision: 2,
minValue: 0,
value: 0
}
}, {
header: 'Change',
width: 20,
dataIndex: 'change',
renderer: Ext.util.Format.numberRenderer('0.00'),
editor: {
xtype: 'numberfield',
selectOnFocus: true,
allowNegative: true,
allowDecimals: true,
decimalPrecision: 2,
value: 0
}
}, {
header: '% Change',
width: 20,
dataIndex: 'pctChange',
renderer: function (value){
return Ext.util.Format.number(value || 0, '0.00')+'%';
},
editor: {
xtype: 'numberfield',
selectOnFocus: true,
allowNegative: true,
allowDecimals: true,
decimalPrecision: 2,
value: 0
}
}, {
header: 'Last Updated',
width: 25,
renderer: Ext.util.Format.dateRenderer('m/d/y g:i a'),
dataIndex: 'changedAt'
}
]
}),
sm: this.checkSelectModel,
// inline buttons
buttons: [
{
text: 'Save',
ref: '../saveButton'
},
{
text: 'Cancel',
ref: '../cancelButton'
}
],
buttonAlign:'center',
// inline toolbars
tbar:[{
text: 'Add Company',
tooltip: 'Add a new row',
iconCls: 'add',
// Place a reference in the GridPanel
ref: '../addButton'
}, '-', {
text: 'Remove Company',
tooltip: 'Remove selected item(s)',
iconCls: 'remove',
// Place a reference in the GridPanel
ref: '../removeButton',
disabled: true
}],
bbar: new Ext.PagingToolbar({
pageSize: this.pageSize,
store: this.companyStore,
displayInfo: true,
displayMsg: 'Displaying companies {0} - {1} of {2}',
emptyMsg: 'No companies displayed'
})
};
Ext.apply(this, config);
Ext.apply(this.initialConfig, config);
Testr.ui.CompanyGrid.superclass.initComponent.call(this);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment