source upload

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/Project18Server.dpr

@@ -0,0 +1,27 @@
+{
+   Synopse mORMot framework
+
+   Sample 18 - HTTP Server for ExtJS queries
+
+}
+
+program Project18Server;
+
+//   first line of uses clause must be   {$I SynDprUses.inc}
+uses
+  {$I SynDprUses.inc}
+  Forms,
+  {$ifdef FPC}
+  Interfaces,
+  {$endif}
+  Unit2 in 'Unit2.pas' {Form1};
+
+{$ifndef FPC}
+{$R *.res}
+{$endif}
+
+begin
+  Application.Initialize;
+  Application.CreateForm(TForm1, Form1);
+  Application.Run;
+end.

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/SampleRecordInit.json

@@ -0,0 +1 @@
+{"fieldCount":3,"rowCount":62,"values":["TimeD","Name","Question","2013-01-01","Triggerfishy","Ballistoides conspicillum","2013-01-11","Snapper","Lutjanus sebae","2013-01-21","Wrasse","Cheilinus undulatus","2013-01-31","Angelfish","Pomacanthus nauarchus","2013-02-10","Cod","Variola louti","2013-02-20","Scorpionfish","Pterois volitans","2013-03-02","Butterflyfish","Chaetodon Ornatissimus","2013-03-13","Shark","Cephaloscyllium ventriosum","2013-03-22","Ray","Myliobatis californica","2013-04-01","Eel","Gymnothorax mordax","2013-04-11","Cod","Ophiodon elongatus","2013-04-21","Sculpin","Scorpaenichthys marmoratus","2013-05-01","Spadefish","Chaetodiperus faber","2013-05-11","Shark","Ginglymostoma cirratum","2013-05-21","Ray","Aetobatus narinari","2013-05-31","Snapper","Ocyurus chrysurus","2013-06-10","Parrotfish","Sparisoma Aurofrenatum","2013-06-20","Barracuda","Sphyraena barracuda","2013-06-30","Grunt","Haemulon flavolineatum","2013-07-10","Snapper","Lutjanus jocu","2013-07-20","Grouper","Epinephelus striatus","2013-07-30","Wrasse","Thalassoma bifasciatum","2013-08-09","Jack","Gnathanodon speciousus","2013-08-19","Surfperch","Amphistichus rhodoterus","2013-08-29","Croaker","Atractoscion nobilis","2013-09-08","Greenling","Hexagrammos lagocephalus","2013-09-18","Wrasse","Oxyjulis californica","2013-09-28","Smelt","Hypomesus pretiosus","2013-10-08","Clown Triggerfish","Ballistoides conspicillum","2013-10-18","Red Emperor","Lutjanus sebae","2013-10-28","Giant Maori Wrasse","Cheilinus undulatus","2013-11-07","Blue Angelfish","Pomacanthus nauarchus","2013-11-17","Lunartail Rockcod","Variola louti","2013-11-27","Firefish","Pterois volitans","2013-12-07","Ornate Butterflyfish","Chaetodon Ornatissimus","2013-12-17","Swell Shark","Cephaloscyllium ventriosum","2013-12-27","Bat Ray","Myliobatis californica","2014-01-06","California Moray","Gymnothorax mordax","2014-01-16","Lingcod","Ophiodon elongatus","2014-01-26","Cabezon","Scorpaenichthys marmoratus","2014-02-05","Atlantic Spadefish","Chaetodiperus faber","2014-02-15","Nurse Shark","Ginglymostoma cirratum","2014-02-25","Spotted Eagle Ray","Aetobatus narinari","2014-03-07","Yellowtail Snapper","Ocyurus chrysurus","2014-03-17","Redband Parrotfish","Sparisoma Aurofrenatum","2014-03-27","Great Barracuda","Sphyraena barracuda","2014-04-06","French Grunt","Haemulon flavolineatum","2014-04-16","Dog Snapper","Lutjanus jocu","2014-04-26","Nassau Grouper","Epinephelus striatus","2014-05-06","Bluehead Wrasse","Thalassoma bifasciatum","2014-05-16","Yellow Jack","Gnathanodon speciousus","2014-05-26","Redtail Surfperch","Amphistichus rhodoterus","2014-06-05","White Sea Bass","Atractoscion nobilis","2014-06-15","Rock Greenling","Hexagrammos lagocephalus","2014-06-25","Senorita","Oxyjulis californica","2014-07-05","Warley Alex","Hypomesus pretiosus","2014-07-15","Arnauld AB","Hexagrammos lagocephalus","2014-07-25","Mormot da Silva","Variola louti","2014-08-04","Mormot Oliveira","Pterois volitans","2014-08-14","Mormot Canalha","Chaetodon Ornatissimus","2014-08-24","Mormot Synopse","Cephaloscyllium ventriosum","2014-09-03","Synopse Mormot","Myliobatis californica"]}

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/Unit2.dfm

@@ -0,0 +1,58 @@
+object Form1: TForm1
+  Left = 198
+  Top = 124
+  Width = 289
+  Height = 201
+  Caption = 'mORMot ExtJS HTTP Server'
+  Color = clBtnFace
+  Font.Charset = DEFAULT_CHARSET
+  Font.Color = clWindowText
+  Font.Height = -13
+  Font.Name = 'Tahoma'
+  Font.Style = []
+  OldCreateOrder = False
+  OnCreate = FormCreate
+  OnDestroy = FormDestroy
+  OnShow = FormShow
+  PixelsPerInch = 96
+  TextHeight = 16
+  object Label1: TLabel
+    Left = 16
+    Top = 16
+    Width = 241
+    Height = 33
+    Alignment = taCenter
+    AutoSize = False
+    Font.Charset = DEFAULT_CHARSET
+    Font.Color = clTeal
+    Font.Height = -16
+    Font.Name = 'Tahoma'
+    Font.Style = [fsBold]
+    ParentFont = False
+  end
+  object Label2: TLabel
+    Left = 56
+    Top = 72
+    Width = 145
+    Height = 16
+    Caption = 'HTTP Server is running...'
+  end
+  object btnQuit: TButton
+    Left = 88
+    Top = 120
+    Width = 75
+    Height = 25
+    Caption = 'Quit'
+    TabOrder = 0
+    OnClick = btnQuitClick
+  end
+  object btnShowLogs: TButton
+    Left = 192
+    Top = 120
+    Width = 75
+    Height = 25
+    Caption = 'Show Logs'
+    TabOrder = 1
+    OnClick = btnShowLogsClick
+  end
+end

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/Unit2.pas

@@ -0,0 +1,117 @@
+unit Unit2;
+
+interface
+
+uses
+  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
+  Dialogs, StdCtrls,
+  SynCommons, SynTable, SynLog,
+  mORMot, mORMotSQLite3, SynSQLite3Static, mORMotHttpServer; 
+
+type
+  TSQLSampleRecord = class(TSQLRecord)
+  private
+    fName: RawUTF8;
+    fQuestion: RawUTF8;
+    fTimeD: TDateTime;
+  public
+    /// overridden to populate a blank database with some data
+    class procedure InitializeTable(Server: TSQLRestServer;
+      const FieldName: RawUTF8; Options: TSQLInitializeTableOptions); override;
+  published
+    /// underscored names, as defined in our ExtJS scripts
+    property TimeD: TDateTime read fTimeD write fTimeD;
+    property Name: RawUTF8 read fName write fName;
+    property Question: RawUTF8 read fQuestion write fQuestion;
+  end;
+
+  TForm1 = class(TForm)
+    Label1: TLabel;
+    btnQuit: TButton;
+    Label2: TLabel;
+    btnShowLogs: TButton;
+    procedure btnQuitClick(Sender: TObject);
+    procedure FormCreate(Sender: TObject);
+    procedure FormDestroy(Sender: TObject);
+    procedure FormShow(Sender: TObject);
+    procedure btnShowLogsClick(Sender: TObject);
+  private
+  public
+    Model: TSQLModel;
+    DB: TSQLRestServerDB;
+    Server: TSQLHttpServer;
+  end;
+
+var
+  Form1: TForm1;
+
+implementation
+
+{$R *.dfm}
+
+
+{ TForm1 }
+
+procedure TForm1.btnQuitClick(Sender: TObject);
+begin
+  Close;
+end;
+
+procedure TForm1.FormCreate(Sender: TObject);
+begin
+  Model := TSQLModel.Create([TSQLSampleRecord]);
+  DB := TSQLRestServerDB.Create(Model,ChangeFileExt(paramstr(0),'.db3'));
+  // customize RESTful URI parameters as expected by our ExtJS client 
+  DB.URIPagingParameters.StartIndex := 'START=';
+  DB.URIPagingParameters.Results := 'LIMIT=';
+  DB.URIPagingParameters.SendTotalRowsCountFmt := ',"total":%';
+  // initialize and launch the server
+  DB.CreateMissingTables;
+  Server := TSQLHttpServer.Create('8080',[DB],'+',useHttpApiRegisteringURI);
+  Server.AccessControlAllowOrigin := '*'; // allow cross-site AJAX queries
+end;
+
+procedure TForm1.FormDestroy(Sender: TObject);
+begin
+  Server.Free;
+  DB.Free;
+  Model.Free;
+end;
+
+procedure TForm1.FormShow(Sender: TObject);
+begin
+  Label1.Caption := Caption;
+end;
+
+
+{ TSQLSampleRecord }
+
+class procedure TSQLSampleRecord.InitializeTable(Server: TSQLRestServer;
+  const FieldName: RawUTF8; Options: TSQLInitializeTableOptions);
+var Rec: TSQLSampleRecord;
+begin
+  inherited;
+  if FieldName<>'' then
+    exit; // create database only if void
+  Rec := TSQLSampleRecord.CreateAndFillPrepare(
+    StringFromFile(ExtractFilePath(paramstr(0))+'SampleRecordInit.json'));
+  try
+    while Rec.FillOne do
+      Server.Add(Rec,true);
+  finally
+    Rec.Free;
+  end;
+end;
+
+procedure TForm1.btnShowLogsClick(Sender: TObject);
+begin
+  AllocConsole;
+  TextColor(ccLightGray); // to force the console to be recognized
+  with TSQLLog.Family do begin
+    Level := LOG_VERBOSE;
+    EchoToConsole := LOG_VERBOSE; // log all events to the console
+  end;
+  btnShowLogs.Hide;
+end;
+
+end.

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/html5/MyApp.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Using mORMot with ExtJS >> by warleyalex</title>
+    <script src="http://extjs.cachefly.net/ext-4.0.7-gpl/ext-all.js"></script>
+    <link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.7-gpl/resources/css/ext-all.css">
+    <link rel="stylesheet" href="resources/css/app.css">
+    <script type="text/javascript" src="app.js?_dc=1347109314941"></script>
+</head>
+<body>
+<div id="warleyalex"></div>
+<div id="dr"><br></div>
+</body>
+</html>

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/html5/app.js

@@ -0,0 +1,14 @@
+ Ext.Ajax.useDefaultXhrHeader = false;
+ Ext.Ajax.cors = true;
+
+ Ext.Loader.setConfig({
+ 	enabled : true
+ });
+
+ Ext.application({
+ 	autoCreateViewport : true,
+ 	name : 'ExtMVC',
+ 	controllers : [
+ 		'Contacts'
+ 	]
+ });

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/html5/app/controller/Contacts.js

@@ -0,0 +1,283 @@
+Ext.define('ExtMVC.controller.Contacts', {
+	extend : 'Ext.app.Controller',
+
+	models : [
+		'Contact'
+	],
+	stores : [
+		'Contacts'
+	],
+	views : [
+		'contact.Grid',
+		'contact.Edit',
+		'contact.Filtro'
+	],
+
+	refs : [{
+			ref : 'contactGrid',
+			selector : 'contactgrid',
+			xtype : 'gridpanel'
+		}, {
+			ref : 'contatoFiltro',
+			xtype : 'contatofiltro',
+			selector : 'contatofiltro'
+		}, {
+			ref : 'contatoFiltrod',
+			xtype : 'contatofiltrod',
+			selector : 'contatofiltrod'
+		}
+	],
+
+	dblClickEdit : function (dataview, record, item, index, e, options) {
+		var edit = Ext.create('ExtMVC.view.contact.Edit'); 
+		if (record) {
+			edit.down('form').loadRecord(record);
+		}
+
+		var grid = this.getContactGrid();
+		var rec = grid.getSelectionModel().getSelection();
+		
+	},
+
+	onButtonClickAdd : function (button, e, options) {
+		this.dblClickEdit();
+	},
+
+	onButtonClickDelete : function (button, e, options) {
+		var grid = this.getContactGrid(),
+		record = grid.getSelectionModel().getSelection();
+		cont = grid.getSelectionModel().getSelection()[0].data.Name;
+		store = this.getContactsStore();
+
+		Ext.MessageBox.show({
+			title : 'Delete Record',
+			buttons : Ext.MessageBox.YESNO,
+			msg : 'Delete this record ' + cont + '?',
+			icon : Ext.Msg.WARNING,
+			fn : function (btn) {
+				if (btn == 'yes') {
+					store.remove(record);
+					store.sync({
+						success : function () {
+							store.load();
+						}
+					});
+				}
+
+			}
+		});
+
+	},
+
+	onButtonClickSave : function (button, e, options) {
+		var win = button.up('window'),
+		form = win.down('form'),
+		record = form.getRecord();
+		values = form.getValues();
+		store = this.getContactsStore();
+		var isNew = false;
+		if (values.ID > 0) {
+			record.set(values);
+		} else {
+			Ext.Ajax.on("beforerequest", function( conn, options, eOpts){
+			  if (options.action=='create')
+			  {
+				var newData = values; 
+				delete newData.ID;
+				options.jsonData = newData;
+			  }
+			});			
+			record = Ext.create('ExtMVC.model.Contact');
+			record.set(values);
+			store.add(record);
+			isNew = true;
+		}
+		win.close();
+
+		Ext.MessageBox.show({
+			title : 'Save Record',
+			buttons : Ext.MessageBox.YESNO,
+			msg : 'Save this record?',
+			icon : Ext.Msg.WARNING,
+			fn : function (btn) {
+				if (btn == 'yes') {
+					store.sync({
+						success : function () {
+							if (isNew) {
+								store.load();
+							}
+						}
+					});
+				}
+
+			}
+		});
+	},
+
+	onButtonClickCancel : function (button, e, options) {
+	var win = button.up('window'),
+		form = win.down('form');
+		form.getForm().reset();
+		win.close();
+	},
+
+	loadFilter : function (button) {
+		var win = Ext.widget('contatofiltro');
+		win.show();
+	},
+
+	setFilter : function (btn) {
+		var me = this;
+		var win = btn.up('contatofiltro');
+		var item = win.down('form').getValues();
+		var store = me.getContactsStore();
+		store.remoteFilter = false;
+		store.clearFilter(); 
+		store.remoteFilter = true;
+		store.getProxy().extraParams = {
+			where : 'Name LIKE :("' + Ext.getCmp("Fname").value + '%"): AND TimeD=:("' + Ext.Date.format(Ext.getCmp("Ftime").value, "Y-m-d") + '"):'
+		};
+
+		var obj = item
+			for (var prop in obj) {
+				var xname = obj.name;
+				var xphone = obj.timed;
+				var xemail = obj.question;
+			}
+			store.filter([
+					Ext.create('Ext.util.Filter', {property : "Name", value : xname,root : 'values'}),
+					Ext.create('Ext.util.Filter', {property : "TimeD", value : xphone,root : 'values'}),
+					Ext.create('Ext.util.Filter', {property : "Question", value : xemail,root : 'values'})
+				]);
+	},
+
+	reset : function (btn) {
+		var win = btn.up('contatofiltro');
+		win.down('form').getForm().reset();
+		Ext.getCmp('mygrid').getStore().getProxy().extraParams = '';
+		Ext.getCmp('mygrid').getStore().load();
+	},
+
+	loadFilterData : function (button) {
+		var win = Ext.widget('contatofiltrod');
+		win.show();
+	},
+
+	setFilterData : function (btn) {
+		var me = this;
+		var win = btn.up('contatofiltrod');
+		var item = win.down('form').getValues();
+		var store = me.getContactsStore();
+		store.remoteFilter = false;
+		store.clearFilter();
+		store.remoteFilter = true;
+		store.getProxy().extraParams = {
+			where : 'TimeD BETWEEN :("' + Ext.Date.format(Ext.getCmp("startdt").value, "Y-m-d") + '"): AND :("' + Ext.Date.format(Ext.getCmp("enddt").value, "Y-m-d") + '"):'
+		};
+		var obj = item
+			for (var prop in obj) {
+				var xphone = obj.timed;
+			}
+			store.filter([
+					Ext.create('Ext.util.Filter', {
+						property : "TimeD",
+						value : xphone,
+						root : 'values'
+					})
+				]);
+	},
+
+	deleteRange : function (btn) {
+		var me = this;
+		var win = btn.up('contatofiltrod');
+		var item = win.down('form').getValues();
+		var store = me.getContactsStore();
+		store.remoteFilter = false;
+		store.clearFilter();
+		store.remoteFilter = true;
+		store.getProxy().extraParams = {
+			where : 'TimeD BETWEEN :("' + Ext.Date.format(Ext.getCmp("startdt").value, "Y-m-d") + '"): AND :("' + Ext.Date.format(Ext.getCmp("enddt").value, "Y-m-d") + '"):'
+		};
+		var obj = item
+			for (var prop in obj) {
+				var xphone = obj.timed;
+			}
+			store.filter([
+					Ext.create('Ext.util.Filter', {
+						property : "TimeD",
+						value : xphone,
+						root : 'values'
+					})
+				]);
+
+		Ext.MessageBox.show({
+			title : 'Delete Record',
+			buttons : Ext.MessageBox.YESNO,
+			msg : 'Delete Selection Records',
+			icon : Ext.Msg.WARNING,
+			fn : function (btn) {
+				if (btn == 'yes') {
+					Ext.Ajax.request({
+						url : ((store.getProxy().api.read + '&where=' + store.getProxy().extraParams.where)),
+						method : 'DELETE',
+						scope : this
+					});
+					store.sync({
+						success : function () {
+							store.load();
+						}
+					});
+				}
+			}
+		});
+
+	},
+	resetData : function (btn) {
+		var win = btn.up('contatofiltrod');
+		win.down('form').getForm().reset();
+		Ext.getCmp('mygrid').getStore().getProxy().extraParams = '';
+		Ext.getCmp('mygrid').getStore().load();
+		win.close();
+	},
+
+	init : function (application) {
+		this.control({
+			"contactgrid dataview" : {
+				itemdblclick : this.dblClickEdit
+			},
+			 "contactgrid button[action=add]": {
+				click: this.onButtonClickAdd
+            },
+			"contactgrid button[action=delete]" : {
+				click : this.onButtonClickDelete
+			},
+			"contactform button[action=save]" : {
+				click : this.onButtonClickSave
+			},
+			"contactform button[action=cancel]" : {
+				click : this.onButtonClickCancel
+			},
+			"contactgrid button[action=filtrar]" : {
+				click : this.loadFilter
+			},
+			"contatofiltro button[action=filtrar_busca]" : {
+				click : this.setFilter
+			},
+			"contatofiltro button[action=reset]" : {
+				click : this.reset
+			},
+			"contactgrid button[action=filtrar_name]" : {
+				click : this.loadFilterData
+			},
+			"contatofiltrod button[action=filtrar_buscad]" : {
+				click : this.setFilterData
+			},
+			"contatofiltrod button[action=deleterange]" : {
+				click : this.deleteRange
+			},
+			"contatofiltrod button[action=resetd]" : {
+				click : this.resetData
+			}
+		});
+	}
+});

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/html5/app/model/Contact.js

@@ -0,0 +1,19 @@
+Ext.define('ExtMVC.model.Contact', {
+	extend : 'Ext.data.Model',
+	idProperty : 'ID',
+	totalproperty : 'total',
+	fields : [{
+			name : 'ID',
+			type : 'int'
+		}, {
+			name : 'TimeD',
+			type : 'datetime'
+		}, {
+			name : 'Name',
+			type : 'string'
+		}, {
+			name : 'Question',
+			type : 'string'
+		}
+	]
+});

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/html5/app/store/Contacts.js

@@ -0,0 +1,44 @@
+Ext.define('ExtMVC.store.Contacts', {
+	extend : 'Ext.data.Store',
+	requires : ['ExtMVC.model.Contact'],
+	constructor : function (cfg) {
+		var me = this;
+		cfg = cfg || {};
+		me.callParent([Ext.apply({
+					autoLoad : true,
+					storeId : 'contactsStore',
+					model : 'ExtMVC.model.Contact',
+					pageSize : 10,
+					totalproperty : 'records',
+					remoteSort : true,
+					remoteFilter : false,
+					proxy : {
+						type : 'rest',
+						simpleSortMode : true,
+						directionParam : "dir",
+						sortParam : "sort",
+						noCache : false,
+						actionMethods : {
+							create : 'POST',
+							read : 'GET',
+							update : 'PUT',
+							destroy : 'DELETE'
+						},
+						api : {
+							create : 'http://localhost:8080/root/SampleRecord',
+							read : 'http://localhost:8080/root/SampleRecord/?SELECT=*',
+							update : 'http://localhost:8080/root/SampleRecord/',
+							destroy : 'http://localhost:8080/root/SampleRecord/'
+						},
+						reader : {
+							type : 'json',
+							root : 'values'
+						},
+						writer : {
+							type : 'json',
+							encode : false
+						},
+					}
+				}, cfg)]);
+	}
+});

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/html5/app/view/Viewport.js

@@ -0,0 +1,10 @@
+Ext.define('ExtMVC.view.Viewport', {
+	extend : 'ExtMVC.view.contact.Grid',
+	renderTo : Ext.getBody(),
+	requires : [
+		'ExtMVC.view.contact.Grid',
+		'ExtMVC.view.contact.Edit',
+		'ExtMVC.view.contact.Filtro',
+		'ExtMVC.view.contact.Filtrod'
+	]
+});

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/html5/app/view/contact/Edit.js

@@ -0,0 +1,86 @@
+Ext.require([
+    'Ext.util.*'
+]);
+
+Ext.define('ExtMVC.view.contact.Edit', {
+	extend : 'Ext.window.Window',
+	alias : 'widget.contactform',
+	id: 'contactform',
+	autoShow : true,
+	height : 168,
+	width : 398,
+	layout : {
+		type : 'fit'
+	},
+	iconCls : 'icon-user',
+	title : 'Create/Edit SampleRecord',
+	initComponent : function () {
+		var me = this;
+
+		Ext.applyIf(me, {
+			items : [{
+					xtype : 'form',
+					style : 'background-color: #fff;',
+					bodyPadding : 10,
+					items : [{
+							xtype : 'hiddenfield',
+							anchor : '100%',
+							name : 'ID',
+							fieldLabel : 'Label'
+						}, {
+							xtype : 'textfield',
+							anchor : '100%',
+							id : 'FnameE',
+							name : 'Name',
+							fieldLabel : 'Name',
+							msgTarget : 'side',
+							allowBlank : false,
+							maxLength : 255
+						}, {
+							xtype : 'datefield',
+							anchor : '100%',
+							id : 'FtimeE',
+							name : 'TimeD',
+							fieldLabel : 'Date',
+							msgTarget : 'side',
+							allowBlank : false,
+							format : 'Y-m-d',
+							altformat: 'Y-m-d H:i',
+							maxLength : 255
+						}, {
+							xtype : 'textfield',
+							anchor : '100%',
+							id : 'FquestionE',
+							name : 'Question',
+							fieldLabel : 'Question',
+							msgTarget : 'side',
+							allowBlank : false,
+							maxLength : 255
+						}
+					],
+					dockedItems : [{
+							xtype : 'toolbar',
+							dock : 'bottom',
+							items : [{
+									xtype : 'tbfill'
+								}, {
+								  xtype : 'button',
+								  action : 'cancel',
+								  iconCls : 'icon-reset',
+								  text : 'Cancel'
+								}, {
+									xtype : 'button',
+									action : 'save',
+									formBind : true,
+									iconCls : 'icon-save',
+									text : 'Update'
+								}
+							]
+						}
+					]
+				}
+			]
+		});
+		me.callParent(arguments);
+	}
+});

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/html5/app/view/contact/Filtro.js

@@ -0,0 +1,69 @@
+Ext.define('ExtMVC.view.contact.Filtro', {
+	extend : 'Ext.window.Window',
+	alias : 'widget.contatofiltro',
+	autoShow : true,
+	height : 168,
+	width : 398,
+	layout : {
+		type : 'fit'
+	},
+	iconCls : 'icon-user',
+	title : 'Filtrar/Buscar Contatos',
+	initComponent : function () {
+		var me = this;
+
+		Ext.applyIf(me, {
+			items : [{
+					xtype : 'form',
+					style : 'background-color: #fff;',
+					bodyPadding : 10,
+					items : [{
+							xtype : 'hiddenfield',
+							anchor : '100%',
+							name : 'ID',
+							fieldLabel : 'Label'
+						}, {
+							xtype : 'textfield',
+							anchor : '100%',
+							id : 'Fname',
+							name : 'Name',
+							fieldLabel : 'Name',
+							msgTarget : 'side',
+							allowBlank : false,
+							maxLength : 255
+						}, {
+							xtype : 'datefield',
+							anchor : '100%',
+							id : 'Ftime',
+							name : 'TimeD',
+							fieldLabel : 'Time',
+							msgTarget : 'side',
+							allowBlank : false,
+							format : 'd-m-Y',
+							maxLength : 255
+						}
+					],
+					dockedItems : [{
+							xtype : 'toolbar',
+							dock : 'bottom',
+							items : [{
+									xtype : 'tbfill'
+								}, {
+									xtype : 'button',
+									action : 'reset',
+									text : 'Reset Filter'
+								}, {
+									xtype : 'button',
+									action : 'filtrar_busca',
+									formBind : true,
+									text : 'Filter'
+								}
+							]
+						}
+					]
+				}
+			]
+		});
+		me.callParent(arguments);
+	}
+});

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/html5/app/view/contact/Filtrod.js

@@ -0,0 +1,95 @@
+    Ext.apply(Ext.form.field.VTypes, {
+    	daterange : function (val, field) {
+    		var date = field.parseDate(val);
+    		if (!date) {
+    			return false;
+    		}
+    		if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
+    			var start = field.up('form').down('#' + field.startDateField);
+    			start.setMaxValue(date);
+    			start.validate();
+    			this.dateRangeMax = date;
+    		} else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
+    			var end = field.up('form').down('#' + field.endDateField);
+    			end.setMinValue(date);
+    			end.validate();
+    			this.dateRangeMin = date;
+    		}
+    		return true;
+    	},
+    	daterangeText : 'Start date must be before end date'
+    });
+
+    Ext.tip.QuickTipManager.init();
+    Ext.define('ExtMVC.view.contact.Filtrod', {
+    	extend : 'Ext.form.Panel',
+    	alias : 'widget.contatofiltrod',
+    	autoShow : true,
+    	renderTo : 'dr',
+    	height : 160,
+    	width : 400,
+    	padding : 10,
+    	layout : {
+    		type : 'fit'
+    	},
+    	iconCls : 'icon-user',
+    	title : '<h1>Filtering Date Range</h1>',
+
+    	initComponent : function () {
+    		var me = this;
+    		Ext.applyIf(me, {
+    			items : [{
+    					xtype : 'form',
+    					style : 'background-color: #fff;',
+    					bodyPadding : 10,
+    					items : [{
+    							xtype : 'datefield',
+    							fieldLabel : 'Start Date',
+    							name : 'startdt',
+    							itemId : 'startdt',
+    							format : 'd-m-Y',
+    							id : 'startdt',
+    							vtype : 'daterange',
+    							endDateField : 'enddt' // id of the end date field
+    						}, {
+    							xtype : 'datefield',
+    							fieldLabel : 'End Date',
+    							name : 'enddt',
+    							itemId : 'enddt',
+    							format : 'd-m-Y',
+    							id : 'enddt',
+    							vtype : 'daterange',
+    							startDateField : 'startdt' // id of the start date field
+    						}
+    					],
+    					dockedItems : [{
+    							xtype : 'toolbar',
+    							dock : 'bottom',
+    							items : [{
+    									xtype : 'tbfill'
+    								}, {
+    									xtype : 'button',
+    									action : 'resetd',
+    									iconCls : 'icon-default',
+    									text : 'Reset Filter'
+    								}, {
+    									xtype : 'button',
+    									action : 'filtrar_buscad',
+    									formBind : true,
+    									iconCls : 'icon-filter',
+    									text : 'Filter'
+    								}, {
+    									xtype : 'button',
+    									action : 'deleterange',
+    									iconCls : 'icon-delete',
+    									text : 'Delete Date Range'
+    								},
+    							]
+    						}
+    					]
+    				}
+    			]
+    		});
+    		me.callParent(arguments);
+    	}
+    });

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/html5/app/view/contact/Grid.js

@@ -0,0 +1,117 @@
+Ext.define('RemoteCountrySearch', {
+	extend : 'Ext.form.ComboBox',
+	alias : 'widget.remoteCountrySearch',
+	queryMode : 'remote',
+	displayField : 'Name',
+	valueField : 'ID',
+	forceSelection : true,
+	id : 'countryBox',
+	style : 'font-size: medium; color: blue;',
+	fieldStyle : 'font-size: medium; color: red; heigth: 50px;',
+	labelWidth : 80,
+	fieldLabel : 'Select a Name',
+	size : 50,
+	maxLength : 50,
+	allowBlank : true,
+	name : 'remoteCountry',
+	store : 'Contacts',
+	minChars : 2,
+	hideTrigger : true,
+	triggerAction : 'All',
+	typeAhead : false,
+	listeners : {
+		'beforequery' : function (queryEvent, options) {
+			this.store.loadPage(1);
+			this.store.remoteFilter = false;
+			this.store.clearFilter(); 
+			this.store.remoteFilter = true;
+			this.store.getProxy().extraParams = {
+				where : 'Name like :("' + queryEvent.query + '%"):'
+			};
+			this.store.load();			
+		},'keyup': function() {/*TODO*/}
+	}
+});
+
+Ext.define('ExtMVC.view.contact.Grid', {
+	extend : 'Ext.grid.Panel',
+	alias : 'widget.contactgrid',
+	renderTo : 'warleyalex',
+	padding : 10,
+	id : 'mygrid',
+	iconCls : 'icon-grid',
+	title : 'Using mORMot with ExtJS >> by warleyalex',
+	store : 'Contacts',
+	initComponent : function () {
+		var me = this;
+
+		Ext.applyIf(me, {
+			columns : [{
+					xtype : 'gridcolumn',
+					text : "id",
+					width : 10,
+					dataIndex : 'ID',
+					sortable : true,
+					hidden : true
+				}, {
+					xtype : 'gridcolumn',
+					width : 50,
+					dataIndex : 'Name',
+					flex : 1,
+					text : 'Name'
+				}, {
+					xtype : 'gridcolumn',
+					width : 10,
+					dataIndex : 'TimeD',
+					flex : 1,
+					text : 'Date'
+				}, {
+					xtype : 'gridcolumn',
+					width : 50,
+					dataIndex : 'Question',
+					flex : 1,
+					text : 'Question'
+				}
+			],
+			viewConfig : {
+				emptyText : 'no records found'
+			},
+			dockedItems : [{
+					xtype : 'toolbar',
+					dock : 'top',
+					items : [{
+							xtype : 'button',
+							action : 'add',
+							iconCls : 'icon-save',
+							text : 'Add'
+						}, {
+							xtype : 'button',
+							action : 'delete',
+							iconCls : 'icon-delete',
+							text : 'Delete'
+						}, {
+							xtype : 'button',
+							action : 'filtrar',
+							iconCls : 'icon-search',
+							text : 'Full Search'
+						}, {
+							xtype : 'button',
+							action : 'filtrar_name',
+							text : 'Date Range'
+						}, {
+							xtype : 'remoteCountrySearch'
+						}
+					]
+				}, {
+					xtype : 'pagingtoolbar',
+					dock : 'bottom',
+					width : 1004,
+					displayInfo : true,
+					emptyMsg : 'No contact to display',
+					store : 'Contacts'
+				}
+			]
+		});
+		me.callParent(arguments);
+	}
+});

contrib/mORMot/SQLite3/Samples/18 - AJAX ExtJS Grid/html5/resources/css/app.css

@@ -0,0 +1,52 @@
+.x-fit-item {
+	margin: 0pt; font-size: 40px;
+	font-weight: bold;
+	background-image: url(../images/error.png) !important;
+}
+
+.icon-search {
+     background-image: url(../images/search.gif) !important;
+}
+
+.icon-default {
+     background-image: url(../images/default.gif) !important;
+}
+
+.icon-filter {
+     background-image: url(../images/filter.gif) !important;
+}
+						  
+.icon-user {
+    background-image: url(../images/user.png) !important;
+}
+
+.icon-user-add {
+    background-image: url(../images/user_add.gif) !important;
+}
+
+.icon-save {
+    background-image: url(../images/save.gif) !important;
+}
+
+.icon-reset {
+    background-image: url(../images/stop.png) !important;
+}
+
+.icon-grid {
+    background-image: url(../images/grid.png) !important;
+}
+
+.icon-add {
+    background-image: url(../images/add.png) !important;
+}
+
+.icon-delete {
+    background-image: url(../images/delete.png) !important;
+}
+.x-panel-header-default {
+    background-color: #FFFD3E1F1;
+}
+.x-panel-header-text-default {
+    color: FFFD3E1F1;
+    font-family: tahoma,arial,verdana,sans-serif;
+}