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 charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="http://docs.sencha.com/extjs/4.1.0/extjs-build/resources/css/ext-all.css">
  <script src="http://docs.sencha.com/extjs/4.1.0/extjs-build/ext-all.js"></script>
</head>
<body>
  <div id="my-grid"></div>
</body>
</html>
 
Ext.onReady(function() {
  Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [
      'firstField', 
      'secondField'
    ]
  });
​
  Ext.create('Ext.grid.Panel', {
    columns: [
      { header: '1st column', dataIndex: 'firstField', flex: 1 },
      { header: '2nd column', dataIndex: 'secondField', flex: 1 }
    ],
    store: Ext.create('Ext.data.Store', {
      model: 'MyModel',
      data: [
        { firstField: 'Foo', secondField: 'Bar' },
        { firstField: 'Blah', secondField: 'Blup' },
        { firstField: 'Lorem', secondField: 'Ipsum' },
      ]
    }),
    selModel: Ext.create('Ext.selection.CheckboxModel'),
    renderTo: 'my-grid',
    width: 200,
    
    // Add click listener
    listeners: {
      viewready: {
        fn: function() {
          var headerCheckbox = this.columns[0];
          
          console.log(this.columns.length);
          
          headerCheckbox.el.on('click', function() {
            console.log('clicked'); // Does work :)
          });
        }
      }
    }
  });
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers