PDA

View Full Version : Money! Working example of extjs row-editor grid wanted



robshim
24 Sep 2010, 7:47 AM
Hi,
There have been a few posts asking for a working example of row editor, that writes to and recieves data from a data base. I haven't found one that I can make work yet! I'm looking for a row editor grid html, js, php and SQL. I am prepared to pay for it! Can anyone help?
Many thanks,
Rob

bozzoz
24 Sep 2010, 9:16 AM
This is my working editorGridPanel

the ui was developed with ext desginer

file winTabIva.ui.js


winTabIvaUi = Ext.extend(Ext.Window, {
title: 'Aliquote IVA',
width: 500,
height: 350,
layout: 'fit',
hideBorders: true,
itemId: 'winTabIva',
constrainHeader: true,
initComponent: function() {
this.items = [
{
xtype: 'editorgrid',
store: 'storeIva',
stripeRows: true,
columnLines: true,
itemId: 'gridIva',
loadMask: true,
ref: 'gridIva',
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
icon: 'media/icon16/add.png',
itemId: 'btAdd',
ref: '../../btAdd'
},
{
xtype: 'button',
icon: 'media/icon16/del.png',
itemId: 'btDel',
ref: '../../btDel'
},
{
xtype: 'tbseparator'
},
{
xtype: 'tbfill'
},
{
xtype: 'tbtext',
text: 'Desc. ',
height: 22,
style: 'margin-right:5px;'
},
{
xtype: 'textfield',
width: 120,
itemId: 'searchDesc',
name: 'searchDesc',
maxLength: 100,
ref: '../../searchDesc'
},
{
xtype: 'button',
icon: 'media/icon16/search.png',
itemId: 'btSearch',
ref: '../../btSearch'
}
]
},
bbar: {
xtype: 'paging',
store: 'storeIva',
displayInfo: true
},
columns: [
{
xtype: 'gridcolumn',
header: 'Codice IVA',
dataIndex: 'codice_iva',
sortable: true,
width: 100,
editable: false,
editor: {
xtype: 'textfield',
itemId: 'codice_iva',
name: 'codice_iva',
readOnly: true
}
},
{
xtype: 'gridcolumn',
header: 'Descrizione',
dataIndex: 'descrizione',
sortable: true,
width: 250,
editor: {
xtype: 'textfield',
itemId: 'descrizione',
name: 'descrizione',
maxLength: 100
}
},
{
xtype: 'gridcolumn',
header: 'Valore',
dataIndex: 'valore',
sortable: true,
width: 100,
editor: {
xtype: 'numberfield',
itemId: 'valore',
name: 'valore',
maxLength: 100
}
}
]
}
];
this.fbar = {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Chiudi',
itemId: 'btChiudi',
ref: '../btChiudi'
}
]
};
winTabIvaUi.superclass.initComponent.call(this);
}
});


file winTabIva.js


winTabIva = Ext.extend(winTabIvaUi, {
initComponent: function() {
winTabIva.superclass.initComponent.call(this);
var grid = this.gridIva;
//imposto il rowSelectionModel, di default l'editorGridPanel ha il celSelectionModel
grid.selModel = new Ext.grid.RowSelectionModel();
this.on('activate', function(){grid.store.load();}, this);

//event handler
this.btAdd.on('click', this.addRiga, this);
this.btDel.on('click', this.delRiga, this);
this.btSearch.on('click', this.doSearch, this);
grid.on('afteredit', this.doUpdate, this);
this.btChiudi.on('click', function(){this.close();}, this);


},
doUpdate: function(e){
//effettua il save della tabella
var conn = new Ext.data.Connection();
var grid = this.gridIva;
conn.request({
url: 'ajax/editTabIva.php',
params: {
action: 'update',
id: e.record.id,
campo: e.field,
valore: e.value
},
success: function(response, opt){
if (response.responseText == 'success')
{
grid.store.reload();
}
else
{
console.log(response.responseText);
}
},
failure: function(resp, opt){
console.log(response.responseText);
}
});
},
addRiga: function(){
//aggiunge una riga alla tabella
var conn = new Ext.data.Connection();
var grid = this.gridIva;
conn.request({
url: 'ajax/editTabIva.php',
params: {
action: 'add'
},
success: function(response, opt){
if (response.responseText == 'success')
{
grid.store.reload();
}
else
{
console.log(response.responseText);
}
},
failure: function(resp, opt){
console.log(response.responseText);
}
});
},
delRiga: function(){
//elimina una riga dalla tabella
var grid = this.gridIva;
var sm = grid.getSelectionModel();
var sel = sm.getSelected();

if (sm.hasSelection())
{
Ext.Msg.show({
title: "Rimuovi aliquota iva!",
buttons: Ext.MessageBox.YESNOCANCEL,
msg: "Vuoi rimuovere l'aliquota selezionata?",
fn: function(btn){
if(btn == 'yes')
{
var conn = new Ext.data.Connection();
conn.request({
url: 'ajax/editTabIva.php',
params: {
action: 'delete',
id: sel.data.codice_iva
},
success: function(response, opt){
if (response.responseText == 'success')
{
grid.store.reload();
}
else
{
console.log(response.responseText);
}
},
failure: function(resp, opt)
{
console.log(response.responseText);
}
});
}
}
});
}
else
{
//non Ŕ stata selezionata un'aliquota
Ext.Msg.show({
title: "Attenzione!",
buttons: Ext.Msg.OK,
msg: "Devi selezionare prima un'aliquota!"
});
}
},
doSearch: function(){
//effettua una ricerca
var grid = this.gridIva;
var ss = this.searchDesc.getValue();
grid.store.setBaseParam('search', true);
grid.store.setBaseParam('searchDesc', ss);
grid.store.reload();
}

});
Ext.reg('winTabIva', winTabIva);

file editTabIva.php


//questa funzione carica automaticamente tutte le classi che servono
function __autoload($class_name)
{
require_once '../classes/' . $class_name . '.class.php';
}

$t = new gt_iva();
switch ($_POST['action'])
{
case 'update':

if ($t->updateCampo($_POST['id'], $_POST['campo'], $_POST['valore']))
{
echo "success";
}
else
{
echo "fails";
}
break;
case 'add':
$dati['descrizione'] = 'Nuova imposta';
$dati['valore'] = '';

if($t->addImposta($dati))
{
echo "success";
}
else
{
echo "fails";
$err = $t->getError();
foreach ($err as $error)
{
echo $error;
}
}
break;
case 'delete':
if ($t->deleteImposta($_POST['id']))
{
echo "success";
}
else
{
echo "fails";
$err = $t->getError();
foreach ($err as $error)
{
echo $error;
}
}
break;
default :
echo "uh uh! imbarazzante ... non so cosa fare!";
}

Bye

troseberry
24 Sep 2010, 9:36 AM
Ext.ux.grid.RowEditor does a fine job for me.

robshim
27 Sep 2010, 2:24 AM
Thanks Bozzo,
Is there an html file to go with it? Is there a URL where I can see it?
Cheers,
Rob

robshim
27 Sep 2010, 2:26 AM
Thanks troseberry,
I haven't managed to get RowEditor working with a data base. Have you? That's what I am looking for.

bozzoz
27 Sep 2010, 3:06 AM
No, at the moment the application in under developing only on mine mac.

for precision

this is my class db.class.php



<?php
/**************************************************
* db.class.php
* Classe che estende la classe di php mysqli
* per connettersi direttamente al database
*
*
* Sviluppato da: Stefano Perinetti
* Ultima modifica: 13/10/2009
***************************************************/

class db extends mysqli
{

//definizioni delle variabili
private $host = 'localhost';
private $port = '3306';
private $db_name = '...'; //dbname
private $user = '...'; //dbuser
private $pass = '...'; //dbpass

/*
costruttore della nuova classe figlia di mysqli non fa altro che creare la connesisone impostando
alcune opzioni per la connessione come il il char set utf8
*/
public function __construct()
{
//inizializzo l'oggetto mysqli
parent::init();
//mysqli_init_commad esegue una queri sql ogni volta che si collega
if (!parent::options(MYSQLI_INIT_COMMAND, 'SET NAMES utf8'))
{
die('Settaggio names utf8 non riuscito');
}
if (!parent::options(MYSQLI_INIT_COMMAND, 'SET CHARACTER SET utf8'))
{
die('Settaggio character set utf8 non riuscito');
}
//eseguo la connessione al db
if (!parent::real_connect($this->host, $this->user, $this->pass, $this->db_name))
{
die('Errore di connessione (' . mysqli_connect_errno() . ') ' . mysqli_connect_error());
}

}
}
?>


and this is the class gt_iva



<?php
/**************************************************
* gt_iva.class.php
* classe per l'accesso in lettura e scrittura
* sulla tabella gt_iva
*
*
* Sviluppato da: Stefano Perinetti
* Ultima modifica: 14/08/2010
***************************************************/
class gt_iva
{
private $dati = array();
private $db = '';
private $error = array();
private $tab = 'gt_iva';

//proprietÓ pubbliche
public $limit = '';
public $orderBy = '';
public $orderDir = 'ASC';
public $searchString = '';
public $lastInsertId = '';


public function __construct ()
{
//inizializza la connessione con il db
$this->db = new db();
}

public function __destruct ()
{
$this->db->close();
unset ($this->dati, $this->error);
}

public function getImposta($id)
{

//scarto le stringhe di escape
$id = (int)$id;
$id = $this->db->real_escape_string($id);

//recupera e ritorna i dati del parametro
$sql = "SELECT * FROM ".$this->tab." WHERE codice_iva = '{$id}'";
if (!$resultSet = $this->db->query($sql))
{
$this->error[] = "Errore db: " . $this->db->error;
}
elseif( $resultSet->num_rows != 1)
{
$this->error[] = "Errore, non esiste un parametro con questo codice: {$id}";
}
else
{

foreach ($resultSet->fetch_assoc() as $key => $value)
{
$this->dati[$key] = htmlentities($value, ENT_COMPAT, 'UTF-8');
}

return $this->dati;
}
}

public function getNumeroImposte ()
{
if ($this->searchString != '')
{
$queryWhere = "WHERE {$this->searchString}";
}
else
{
$queryWhere = '';
}

$sql = "SELECT COUNT(*) FROM ".$this->tab." {$queryWhere}";
if ($resultSet = $this->db->query($sql))
{
$count = $resultSet->fetch_row();
return $count[0];
}
else
{
$this->error[] = "Errore nella query sul db: " . $this->db->error;
return false;
}
}

public function getListaImposte ()
{
//torna il resultSet con la lista degli utenti

if ($this->limit != '')
{
$queryLimit = "LIMIT {$this->limit}";
}
else
{
$queryLimit = '';
}
if ($this->orderBy != '')
{
$queryOrderBy = "ORDER BY {$this->orderBy} {$this->orderDir}";
}
else
{
$queryOrderBy = '';
}
if ($this->searchString != '')
{
$queryWhere = "WHERE {$this->searchString}";
}
else
{
$queryWhere = '';
}

$sql = "SELECT * FROM ".$this->tab." {$queryWhere} {$queryOrderBy} {$queryLimit}";
if ($resultSet = $this->db->query($sql))
{
return $resultSet;
}
else
{
$this->error[] = "Errore nella query sul db: " . $this->db->error;
$this->error[] = "query sql: $sql";
return false;
}

}

public function addImposta($dati)
{
//serve per eliminare eventuali problemi con i caratteri di escape
foreach ($dati as $key => $value)
{
$dati[$key] = $this->db->real_escape_string($value);
}
//aggiunge un utente al db
$sql = "INSERT INTO " . $this->tab . "
VALUES(
'',
'{$dati['descrizione']}',
'{$dati['valore']}'
)";

if($this->db->query($sql))
{
$this->lastInsertId = $this->db->insert_id;
return true;
}
else
{
$this->error[] = "Errore durante l'inserimento nel db: " . $this->db->error;
}

}


public function updateImposta($dati)
{
foreach ($dati as $key => $value)
{
$dati[$key] = $this->db->real_escape_string($value);
}

//aggiorna
$sql = "UPDATE " . $this->tab . "
SET
`descrizione` ='{$dati['descrizione']}',
`valore` ='{$dati['valore']}'
WHERE codice_iva = {$dati['codice_iva']}";

if($this->db->query($sql))
{
return true;
}
else
{
$this->error[] = "Errore durante l'aggiornamento del db: " . $this->db->error;
return false;
}
}


public function updateCampo($codice_iva, $campo, $valore)
{
$codice_iva = $this->db->real_escape_string($codice_iva);
$campo = $this->db->real_escape_string($campo);
$valore = $this->db->real_escape_string($valore);

$sql = "UPDATE " .$this->tab. " SET {$campo} = '{$valore}' WHERE codice_iva = {$codice_iva}";
if($this->db->query($sql))
{
return true;
}
else
{
$this->error[] = "Errore durante l'aggiornamento del campo: " . $this->db->error;
return false;
}
}

public function deleteImposta($id)
{
//scarto le stringhe di escape
$id = $this->db->real_escape_string($id);

$sql = "DELETE FROM " . $this->tab . " WHERE codice_iva = {$id}";

if ($this->db->query($sql))
{
return true;
}
else
{
$this->error[] = "Errore durante l'eliminazione di un record nel db: " . $this->db->error;
return false;
}
}

public function getError ()
{
return $this->error;
}

}

?>


this is all!

troseberry
27 Sep 2010, 4:33 AM
what kind of backend database are you using? You typically would expose methods on the server side that would talk to the database and just configure your grid's store to talk to those server side methods.

robshim
27 Sep 2010, 5:50 AM
I'm using MySQL. I need an example of this - the PHP, HTML, JS and SQL.
Thanks,
Rob

evant
27 Sep 2010, 5:52 AM
http://www.sencha.com/forum/showthread.php?18435-EditorGrid-working-example-(php-mysql-backend)

robshim
27 Sep 2010, 8:21 AM
http://www.sencha.com/forum/showthread.php?18435-EditorGrid-working-example-(php-mysql-backend)

Thanks for this. This is one I have already tried, I just get some text (Grid example using . . . etc) then a blank page. :-/ Which is why i posted my thread.

Rob