Code:
Ext.define('dwila.view.Viewport', {
extend: 'Ext.tab.Panel',
config: {
fullscreen: true,
tabBar: {
docked: 'bottom',
layout: {
pack: 'center'
}
},
defaults: {
scrollable: true
},
items: [
{
title: 'Customers',
iconCls: 'team',
xtype: 'grid',
features: [
{
ftype : 'Ext.ux.touch.grid.feature.HeaderMenu',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}/*,
{
ftype : 'Ext.ux.touch.grid.feature.FilterRow',
launchFn : 'initialize'
//filtersDisabled : false
}*/
]
},
{
title: 'Test',
iconCls: 'team',
xtype:'gridfr',
scope:this,
showFilterRow:true,
disableFilterRowActions:false,
store : 'Guests',
features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}
],
items: [
{
xtype : 'toolbar',
docked: 'top',
//title: 'Customers',
items: [
{
//text: 'Add',
ui: 'confirm',
id: 'guestAdd',
iconCls: 'add',
iconMask: true
},
{
//text: 'Delete',
ui: 'decline',
id: 'guestDelete',
iconCls: 'trash',
iconMask: true
},
{
text: 'Show Hidden',
ui: 'action',
//badgeText: 'Hidden',
//iconCls: 'search',
//iconMask: true,
id: 'showHidden'
},
{
text: 'Show All',
ui: 'action',
//badgeText: 'All',
//iconCls: 'search',
//iconMask: true,
id: 'showAll'
},
{xtype: 'spacer'},
{
text: 'Phone```',
badgeText: '#',
ui: 'action',
//iconCls: 'add',
//iconMask: true,
//right: 1,
//margin : '6 64 0 0',
id: 'phoneAdd'
},
{
text: 'Notify',
ui: 'confirm',
//iconCls: 'action',
//iconMask: true,
id: 'guestNotify'
}
]
}
],
columns : [
/* {
header : 'ID',
dataIndex : 'id',
sortable : false,
style : 'text-align: right; padding-right: 1em;',
width : '10%'
},
{
header : 'Phone',
dataIndex : 'Phone',
style : 'text-align: center;',
width : '10%',
sortable : false,
filter : { type : 'string' }
},
{
header : 'Carrier',
dataIndex : 'Carrier',
style : 'text-align: center;',
sortable : false,
filter : { type : 'string' },
width : '10%'
},
{
header : 'Seated Time',
dataIndex : 'date_seated',
style : 'text-align: center;',
width : '20%',
filter : { type : 'string' }
},
{
header : 'Notified Time',
dataIndex : 'date_sent',
style : 'text-align: center;',
width : '20%',
filter : { type : 'string' }
},*/
{
header : 'Party',
dataIndex : 'Party',
style : 'text-align: center;',
width : '15%',
filter : { type : 'int' }
},
{
header : 'Name',
dataIndex : 'Name',
style : 'padding-left: 4px;',
width : '25%',
filter : { type : 'string' }
},
{
header : 'Time',
dataIndex : 'date_reserved',
style : 'text-align: center;',
width : '22%',
filter : { type : 'date' },
renderer : function(value, values) {
var showtime = Ext.Date.format(value, 'h:ia');
return '<span>' + showtime + '</span>';
}
},
{
header : 'Notified',
dataIndex : 'Sent',
style : 'text-align: center;',
width : '19%',
filter : { type : 'boolean' },
renderer : function(value, values) {
var color = (value === true) ? '009933' : 'FF0000',
text = (value === true) ? 'Yes' : 'No';
return '<span style="color: #' + color + ';">' + text + '</span>';
}
},
{
header : 'Seated',
dataIndex : 'Seated',
style : 'text-align: center;',
width : '19%',
filter : { type : 'boolean' },
renderer : function(value, values) {
var color = (value === true) ? '009933' : 'FF0000',
text = (value === true) ? 'Yes' : 'No';
return '<span style="color: #' + color + ';">' + text + '</span>';
}
}
]
},
{
title: 'Settings',
iconCls: 'settings',
xtype: 'settings'
},
{
title: 'Help',
iconCls: 'info',
xtype: 'welcomescreen'
},
{
title: 'Exit Dwila',
iconCls: 'reply',
xtype: 'button',
id: 'exitApp'
}
]
}
});
Store class defined in above view:
Code:
Ext.define('dwila.model.Guest', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'string' },
{ name: 'Party', type: 'int' },
{ name: 'Name', type: 'string' },
{ name: 'Phone', type: 'string' },
{ name: 'Carrier', type: 'string' },
{ name: 'Tags', type: 'string' },
{ name: 'Sent', type: 'boolean', defaultValue: false },
{ name: 'Seated', type: 'boolean', defaultValue: false },
{ name: 'Hide', type: 'boolean', defaultValue: false },
{ name: 'Table', type: 'int' },
{ name: 'date_reserved', type: 'date', defaultValue: new Date(), dateFormat: 'c' },
{ name: 'date_sent', type: 'date', dateFormat: 'c' },
{ name: 'date_seated', type: 'date', dateFormat: 'c' }
],
proxy: {
type: 'localstorage',
id: 'id',
reader: {
type: 'json',
root: 'guests',
idProperty : 'id'
},
writer: {
root: 'guests',
type: 'json',
writeAllFields: true
}
},
validations: [
{type: 'format', name: 'Party', matcher: /\d+/, message: 'must only include numeric characters'},
{type: 'presence', name: 'Name', message: 'field is required'},
{type: 'length', name: 'Phone', min: 10, max: 10, message: 'numbers must be exactly 10 digits'},
{type: 'format', name: 'Phone', matcher: /\d+/, message: 'must only include numeric characters'},
{type: 'format', name: 'Table', matcher: /\d+/, message: 'must only include numeric characters'}
]
});