easydownload193: Extjs: Delete function in Grid Panel

In this Tutorial will dicuss how to use the Grid panel properties store the data using Json Store.

Step 1: Create a database for our tutorial name it fish. then, create now the table and name it tuna.

CREATE TABLE IF NOT EXISTS `tuna` (
  `id` tinyint(4) NOT NULL auto_increment,
  `name` varchar(25) NOT NULL,
  `position` varchar(25) NOT NULL,
  `ambition` text NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;


INSERT INTO `tuna` (`id`, `name`, `position`, `ambition`) VALUES
(1, 'Monkey D Luffy', 'Captain', 'I Will become the pirate king'),
(2, 'Roronoa zoro', 'Swordman', 'Become greatet swordman'),
(3, 'Sanji', 'Cook', 'Find all blue'),
(4, 'Nami', 'Navigator', 'Draw map of the world'),
(5, 'Usopp', 'Sniper', 'Become greatest warrior');

Step 2: Create the index.php this will display the form panel. dont forget to download the javascript famework.
extjs > http://www.sencha.com/products/js/download.php

<html>
    <head>
        <title>DB GRID SAMPLE</title>
        <!-- include ext-all.css -->
        <link rel="stylesheet" href="ext-3.3/resources/css/ext-all.css" />
        
        <!-- include ext-base.js -->
        <script type="text/javascript" src="ext-3.3/adapter/ext/ext-base.js"></script>
        
        <!-- include ext-all.js -->
        <script type="text/javascript" src="ext-3.3/ext-all.js"></script>    
        
        <!-- include db-grid.js -->
        <script type="text/javascript" src="db-grid.js"></script>
    </head>    
    <body>
    
        <!-- grid will render to this element -->
        <div id="db-grid"></div>
    
    </body>
</html>

Step 3: Now we will build the db-grid.js this will generate the grid panel.

Ext.onReady(function(){

    // create the data store
    var store = new Ext.data.JsonStore({        
        url: 'data.php',             
        fields: [
           {name: 'id', type: 'int'},
           'name', 'position', 'ambition'
        ]
    });        

    // load data
    store.load();
    
    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'id',header: "ID", width: 30, sortable: true, dataIndex: 'id'},
            {header: 'Name', width: 100, sortable: true, dataIndex: 'name'},
            {header: 'Position', width: 100, sortable: true, dataIndex: 'position'},
            {header: 'Ambition', width: 250, sortable: true, dataIndex: 'ambition'}            
        ],
        stripeRows: true,
        height:250,
        width:500,
        title:'DB Grid',
        
        // add a delete button on a grid toolbar
        
        tbar : ['->', {
            text: 'Delete',
            icon: 'b_drop.png',
            handler: function() {
                var selected_rows = grid.getSelectionModel().getSelections();
                if(selected_rows.length > 0) {                                        

                    // make all id from data selected become 1,2,3,4,5,.....
                                    
                    var id = '';
                    
                    var i = 0;
                    for(i=0; i<selected_rows.length; i++) {
                        id += selected_rows[i].get('id');
                        if(i < (selected_rows.length - 1)) {
                            id += ',';    
                        }
                    }
                        
                    Ext.MessageBox.confirm('Confirm', 'Are you sure you want to delete the data?', function (btn, text) {
                        if (btn=='yes') {
                            Ext.MessageBox.show({
                               msg: 'Info..',
                               progressText: 'Deleting...',
                               width:300,
                               wait:true,
                               waitConfig: {interval:200}
                            });                                                    
                            Ext.Ajax.request({                            
                                url : 'delete.php' , 
                                params : {
                                    id: id
                                },
                                method: 'POST',
                                success: function ( result, request ) {                                                    
                                    // hide the progress window
                                    Ext.MessageBox.hide();    
                                    
                                    // reload grid
                                    grid.getStore().reload();    
                                } 
                            });
                        }
                    });
                    
                } else {
                    Ext.MessageBox.alert('Info', 'No row(s) selected. Select row(s) you want to delete first.');
                }
            }
        }]
        
    });

    grid.render('db-grid');
    
});

Step 4: The Json data store. the Json store will responsible for communicating to the database because were using javascript. this is one of many data store in the extjs framework.

var store = new Ext.data.JsonStore({        
        url: 'data.php',             
        fields: [
           {name: 'id', type: 'int'},
           'name', 'position', 'ambition'
        ]
    });

build now data.php where the sql query takes place.

<?php
    $conn = mysql_connect("localhost", "root", "root") or die (mysql_error ());
    $db = mysql_select_db ("fish") or die (mysql_error ());
    
    $result=mysql_query ("SELECT * FROM tuna") or die (mysql_error ());
    
    $data = array();
    
    while ($row=mysql_fetch_object($result))
    {
        $data [] = $row;
    }
    
    echo json_encode($data);
?>

Step 5: Delete selected data. when doing a process it is good to use Ajax Request.

Ext.Ajax.request({                            
                                url : 'delete.php' , 
                                params : {
                                    id: id
                                },
                                method: 'POST',
                                success: function ( result, request ) {                                                    
                                    // hide the progress window
                                    Ext.MessageBox.hide();    
                                    
                                    // reload grid
                                    grid.getStore().reload();    
                                } 
                            });
                        }

delete.php

<?php

    mysql_connect("localhost", "root", "root");
    mysql_select_db("fish");
    
    $sql = "
        DELETE FROM tuna WHERE id in (". $_POST['id'] .")
    ";
    
    mysql_query($sql);

?>

Download Source: SOURCE

easydownload193

Sunday, October 17, 2010

Extjs: Delete function in Grid Panel

No comments: