Results 1 to 10 of 10

Thread: Money! Working example of extjs row-editor grid wanted

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    38

    Default Money! Working example of extjs row-editor grid wanted

    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

  2. #2
    Sencha User bozzoz's Avatar
    Join Date
    Apr 2010
    Location
    Tortoreto Lido (TE) Italy
    Posts
    58

    Default

    This is my working editorGridPanel

    the ui was developed with ext desginer

    file winTabIva.ui.js
    Code:
    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
    Code:
    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
    PHP Code:
    //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

  3. #3
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277

    Default

    Ext.ux.grid.RowEditor does a fine job for me.

  4. #4
    Sencha User
    Join Date
    Sep 2010
    Posts
    38

    Default

    Thanks Bozzo,
    Is there an html file to go with it? Is there a URL where I can see it?
    Cheers,
    Rob

  5. #5
    Sencha User
    Join Date
    Sep 2010
    Posts
    38

    Default

    Thanks troseberry,
    I haven't managed to get RowEditor working with a data base. Have you? That's what I am looking for.

  6. #6
    Sencha User bozzoz's Avatar
    Join Date
    Apr 2010
    Location
    Tortoreto Lido (TE) Italy
    Posts
    58

    Default

    No, at the moment the application in under developing only on mine mac.

    for precision

    this is my class db.class.php

    PHP Code:
    <?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 Code:
    <?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($valueENT_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!

  7. #7
    Ext JS Premium Member troseberry's Avatar
    Join Date
    Feb 2010
    Location
    Dayton, OH
    Posts
    277

    Default

    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.

  8. #8
    Sencha User
    Join Date
    Sep 2010
    Posts
    38

    Default

    I'm using MySQL. I need an example of this - the PHP, HTML, JS and SQL.
    Thanks,
    Rob

  9. #9
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  10. #10
    Sencha User
    Join Date
    Sep 2010
    Posts
    38

    Default Re working example of extjs row-editor grid wanted

    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

Similar Threads

  1. Row Editor Working Example with Add,Delete,update row
    By mayurid in forum Community Discussion
    Replies: 22
    Last Post: 4 Oct 2010, 10:54 PM
  2. Row Editor Grid Example from EXTJS
    By sajan in forum Ext Designer: Help & Discussion
    Replies: 2
    Last Post: 7 Jul 2010, 2:20 AM
  3. How to create a row of grid for a total money in the column
    By Rafael in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 19 Mar 2009, 10:34 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •