See Extension only
Source Code

Excel Editor Grid Example (Direct)

This example shows how to create a Excel grid with inline editing.

Selecting Cell range (1st method): shift + UP/DOWN/RIGHT/LEFT key

Selecting Cell range (2nd method): shift + mouse down

Selecting Cell range (3rd method): Mouse down + Mouse drag

Copy selected cell to clip board: ctrl+c

Paste selected cell to grid/excell sheet: ctrl+v


<script type="text/javascript" 	src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/excel-grid/example/api.php"></script>

<!---------------------------- Excel Grid ux Start ------------------------------>
<link rel="stylesheet" type="text/css" href="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/excel-grid/EditorPasteCopyGrid.css" />
<script type="text/javascript" 	src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/excel-grid/ExcelCellSelectionModel.js"></script>
<script type="text/javascript" 	src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/excel-grid/EditorPasteCopyGrid.js"></script> 
<!---------------------------- Excel Grid ux End -------------------------------->

<script type="text/javascript"	src="http://developerextensions.com/components/com_extensiondemo/views/extensiondemo/tmpl/ext3/ux/excel-grid/example/demo.js"></script>

<h1 class="extensionHeading">Excel Editor Grid Example (Direct)</h1>
<p>This example shows how to create a Excel grid with inline editing.</p>
<p><b>Selecting Cell range (1st method)</b>:  shift +  UP/DOWN/RIGHT/LEFT key</p>
<p><b>Selecting Cell range (2nd method)</b>:  shift +  mouse down </p>
<p><b>Selecting Cell range (3rd method)</b>:  Mouse down + Mouse drag</p>
<p><b>Copy selected cell to clip board</b>:  ctrl+c </p>
<p><b>Paste selected cell to grid/excell sheet</b>:  ctrl+v </p>
<p><br /></p>
<div id="editor-grid"></div>
 
 				//We are using session for data storage.
			 
Ext.onReady(function(){
	Ext.Direct.addProvider(Remote.API);
	Ext.QuickTips.init();
	var fm = Ext.form;
	var cm = new Ext.grid.ColumnModel([{
		id:'first_name',
		header: "First Name",
		dataIndex: 'first_name',
		width: 220,
		editor: new fm.TextField({
		   allowBlank: false
		})
	},{
		header: "Last Name",
		dataIndex: 'last_name',
		width: 130,
		editor: new fm.TextField({
		   allowBlank: false
		})
	},{
		header: "Age",
		dataIndex: 'age',
		width: 70,
		align: 'center',
		editor:  new fm.NumberField({
		   allowBlank: false
		})
	}]);

    //by default columns are sortable
    cm.defaultSortable = true;
	
    var Plant = Ext.data.Record.create([
		{name: 'first_name', type: 'string'}, 
		{name: 'last_name', type: 'string'},
		{name: 'age', type: 'int'}
      ]);
	var proxy = new Ext.data.DirectProxy({
		api: {
			read:Remote.Members.getRecords,
			create:Remote.Members.createRecords,			
			update:Remote.Members.updateRecords,
			destroy:Remote.Members.destroyRecord
		}
	});
	var reader = new Ext.data.JsonReader({
		totalProperty:'total',
		successProperty: 'success',
		idProperty:'id',
		root:'members',
		messageProperty:'msg'
	}, ['id', 'first_name','last_name','age']);
	
	var writer = new Ext.data.JsonWriter({
		encode: false,
		writeAllFields: true
	});
   //create the Data Store
   var store	= new Ext.data.Store({
		autoLoad:true,
		autoSave:false,
		remoteSort:false,
		writer:writer,
		proxy: proxy,
		reader:reader
	});

   //create the editor grid
   var grid = new Ext.grid.EditorPasteCopyGridPanel({
        store: store,
        cm: cm,
        renderTo: 'editor-grid',       
        height:300,
        autoExpandColumn:'first_name',
        title:'Members',
        frame:true,
		tbar: [{
			text: 'Add Record',
			handler : function(){
				var p = new Plant({});
				grid.stopEditing();
				var count = store.getCount();
				store.insert(count, p);
				grid.startEditing(count, 0);
				grid.stopEditing();
				
				//grid.getSelectionModel().clearSelections();
				grid.getSelectionModel().selectSingleCell(count, 0);
			}
		},{
			text:'Save',
			handler:function(){
				store.save( );
			}			
		}]
    });   
});
<?php
if(!isset($_SESSION['members'])){
    
$_SESSION['members'] = array(
        array(
'first_name'=>'Surinder''last_name'=>'Singh''age'=>30'id'=>1),
        array(
'first_name'=>'Jeet''last_name'=>'kaur''age'=>23'id'=>2),
        array(
'first_name'=>'Manpreet''last_name'=>'Singh''age'=>31'id'=>3),
        array(
'first_name'=>'JivanJot''last_name'=>'Singh''age'=>1'id'=>4),
        array(
'first_name'=>'Sunil''last_name'=>'Kumar''age'=>27'id'=>5)
    );
    
$_SESSION['members_id'] = count($_SESSION['members']);
}

class 
Members{
    
/** @remotable */
    
function getRecords() {
        
$result          = new stdClass();
        
$result->members $_SESSION['members'];
        
$result->total     count($_SESSION['members']);
        return 
$result;
    }
    
/** @remotable */
    
function createRecords($records){
        if(
is_array($records->members)){
            
$members array_reverse($records->members);
            foreach(
$members as $record){
                
$record->id $this->insert($record);
            }
        }else{
            
$record->id $this->insert($records->members);
        }
        return 
$records;
    }
    
/** @remotable */
    
function updateRecords($records){
        global 
$database;
        
        if(
is_array($records->members)){
            foreach(
$records->members as $record){
                
$this->update($record);
            }
        }else{
            
$this->update($records->members);
        }
        return 
$records;
    }
    
    function 
insert($record){
        
$_SESSION['members_id']++;
        
$_SESSION['members'][] = array('first_name'=>$record->first_name'last_name'=>$record->last_name'age'=>$record->age'id'=>$_SESSION['members_id']);
        return 
$_SESSION['members_id'];
    }
    
    function 
update($record){
        foreach(
$_SESSION['members'] as $key=>$r){
            if(
$r['id']==$record->id){
                
$_SESSION['members'][$key] = (array)$record;
                break;
            }
        }
    }
}
?>