<!DOCTYPE html>
<!-- grid-celledit.html -->
<html>
<head>
<title>Example by Saki</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="ext-4.0.6/resources/css/ext-all.css" type="text/css">
<link rel="shortcut icon" type="image/png" href="../Icon.png">
<script type="text/javascript" src="ext-4.0.6/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.define('My.Model', {
extend:'Ext.data.Model'
,fields:[
{name:'id', type:'int'}
,'text'
,'type'
]
,proxy:{
type:'ajax'
,api:{
read:'grid-data.json'
,create:'success.json'
,update:'get-first.json'
,remove:'success.json'
}
,reader:{
type:'json'
,root:'rows'
}
,writer:{
type:'json'
,root:'rows'
,allowSingle:false
}
}
});
// entry point
Ext.onReady(function() {
var g = Ext.create('Ext.grid.Panel', {
renderTo:Ext.getBody()
,title:'Editable grid'
,width:400
,height:300
,store:{
xtype:'store'
,model:'My.Model'
,autoLoad:true
}
,columns:[
{header:'Text', dataIndex:'text', editor:{xtype:'textfield'}}
,{header:'Type', dataIndex:'type', editor:{xtype:'textfield'}}
]
,plugins:{
ptype:'cellediting'
}
,bbar:[{
text:'Save'
,handler:function() {
this.up('gridpanel').getStore().sync();
}
},{
text:'Menu'
,menu:[{
text:'Item 1'
},{
text:'Item 2'
}]
}]
});
g.getStore().on('load', function() {
this.getAt(0).set('text', 'New text');
});
}); // eo onReady
</script>
</head>
<body>
</body>
</html>
<!-- eof -->
// ------ grid-data.json Code:
{
"success":true
,"rows":[
{id:1, text:'Item 1', type:'a'}
,{id:2, text:'Item 2', type:'c'}
,{id:3, text:'Item 3', type:'b'}
,{id:4, text:'Item 4', type:'b'}
,{id:5, text:'Item 5', type:'a'}
,{id:6, text:'Item 6', type:'b'}
,{id:7, text:'Item 7', type:'c'}
,{id:8, text:'Item 8', type:'a'}
,{id:9, text:'Item 9', type:'c'}
,{id:10, text:'Item 10', type:'b'}
]
}
// ------ and get-first.json Code:
{
"success":true
,"rows":[{
"id":1
,"text":"Edited"
,"type":"New Type"
}]
}