API tools faq
paste
Advertisement
Guest User

Grid with Writer

a guest
Dec 16th, 2011
727
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 2.84 KB | None | 0 0
raw download clone embed print report
  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. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!