Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Demo for http://stackoverflow.com/questions/7441109/extjs-4-how-to-conditionally-edit-a-cell-in-a-grid">
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
</style>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all.min.js"></script>
  <script>
    Ext.onReady(function(){
        Ext.create('Ext.data.Store', {
          storeId:'simpsonsStore',
          fields:['name', 'email', 'phone'],
          data:{'items':[
              {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
              {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
              {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
              {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
          ]},
          proxy: {
              type: 'memory',
              reader: {
                  type: 'json',
                  root: 'items'
              }
          }
      });
      
      Ext.create('Ext.grid.Panel', {
          title: 'Simpsons',
          store: Ext.data.StoreManager.lookup('simpsonsStore'),
          columns: [
              {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
              {header: 'Email', dataIndex: 'email', flex:1,
                  editor: {
                      xtype: 'textfield',
                      allowBlank: false
                  }
              },
              {header: 'Phone', dataIndex: 'phone', editor: 'textfield'}
          ],
          selType: 'cellmodel',
          plugins: [
              Ext.create('Ext.grid.plugin.CellEditing', {
                  clicksToEdit: 1,
                listeners: {
                  'beforeedit': function(e) {
                    var me = this;
                    var allowed = !!me.isEditAllowed;
                    if (!me.isEditAllowed)
                      Ext.Msg.confirm('confirm', 'Are you sure you want edit?', function(btn){
                        if (btn !== 'yes')
                          return;
                        me.isEditAllowed = true;
                        me.startEditByPosition({row: e.rowIdx, column: e.colIdx});
                      });
                    return allowed;
                  },
                  'edit': function(e) {
                    this.isEditAllowed = false;
                  }
                }
              })
          ],
          height: 200,
          width: 400,
          renderTo: Ext.getBody()
      });
    });
  </script>
​
</head>
<body>
  
</body>
</html>
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
molecule-manpro
0viewers