Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Grid with Writer

By: a guest on Dec 16th, 2011  |  syntax: JavaScript  |  size: 2.84 KB  |  views: 503  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <!-- grid-celledit.html -->
  3. <html>
  4. <head>
  5.     <title>Example by Saki</title>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7.     <link rel="stylesheet" href="ext-4.0.6/resources/css/ext-all.css" type="text/css">
  8.     <link rel="shortcut icon" type="image/png" href="../Icon.png">
  9.     <script type="text/javascript" src="ext-4.0.6/ext-all-debug.js"></script>
  10.     <script type="text/javascript">
  11.  
  12.     Ext.define('My.Model', {
  13.          extend:'Ext.data.Model'
  14.         ,fields:[
  15.              {name:'id', type:'int'}
  16.             ,'text'
  17.             ,'type'
  18.         ]
  19.         ,proxy:{
  20.              type:'ajax'
  21.             ,api:{
  22.                  read:'grid-data.json'
  23.                 ,create:'success.json'
  24.                 ,update:'get-first.json'
  25.                 ,remove:'success.json'
  26.             }
  27.             ,reader:{
  28.                  type:'json'
  29.                 ,root:'rows'
  30.             }
  31.             ,writer:{
  32.                  type:'json'
  33.                 ,root:'rows'
  34.                 ,allowSingle:false
  35.             }
  36.         }
  37.     });
  38.     // entry point
  39.     Ext.onReady(function() {
  40.         var g = Ext.create('Ext.grid.Panel', {
  41.              renderTo:Ext.getBody()
  42.             ,title:'Editable grid'
  43.             ,width:400
  44.             ,height:300
  45.             ,store:{
  46.                  xtype:'store'
  47.                 ,model:'My.Model'
  48.                 ,autoLoad:true
  49.             }
  50.             ,columns:[
  51.                  {header:'Text', dataIndex:'text', editor:{xtype:'textfield'}}
  52.                 ,{header:'Type', dataIndex:'type', editor:{xtype:'textfield'}}
  53.             ]
  54.             ,plugins:{
  55.                  ptype:'cellediting'
  56.             }
  57.             ,bbar:[{
  58.                  text:'Save'
  59.                 ,handler:function() {
  60.                     this.up('gridpanel').getStore().sync();
  61.                 }
  62.             },{
  63.      text:'Menu'
  64.     ,menu:[{
  65.      text:'Item 1'
  66.     },{
  67.      text:'Item 2'
  68.     }]
  69.    }]
  70.         });
  71.  
  72.         g.getStore().on('load', function() {
  73.             this.getAt(0).set('text', 'New text');
  74.         });
  75.     }); // eo onReady
  76.    
  77.     </script>
  78. </head>
  79. <body>
  80. </body>
  81. </html>
  82. <!-- eof -->
  83.  
  84. // ------ grid-data.json Code:
  85.  
  86. {
  87.      "success":true
  88.     ,"rows":[
  89.          {id:1,   text:'Item 1', type:'a'}
  90.         ,{id:2,   text:'Item 2', type:'c'}
  91.         ,{id:3,   text:'Item 3', type:'b'}
  92.         ,{id:4,   text:'Item 4', type:'b'}
  93.         ,{id:5,   text:'Item 5', type:'a'}
  94.         ,{id:6,   text:'Item 6', type:'b'}
  95.         ,{id:7,   text:'Item 7', type:'c'}
  96.         ,{id:8,   text:'Item 8', type:'a'}
  97.         ,{id:9,   text:'Item 9', type:'c'}
  98.         ,{id:10, text:'Item 10', type:'b'}
  99.     ]
  100. }
  101.  
  102. // ------ and get-first.json Code:
  103.  
  104. {
  105.         "success":true
  106.         ,"rows":[{
  107.   "id":1
  108.   ,"text":"Edited"
  109.   ,"type":"New Type"
  110.         }]
  111. }