[ExtJS 4.1.1a] can't create Ext.grid.Panel

[cs0ip]

I use this code

Ext.onReady(function() {
  Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'check', type: 'bool', convert: null, defaultValue: false},
      {name: 'id', type: 'int', convert: null, defaultValue: undefined},
      {name: 'title', type: 'string', convert: null, defaultValue: undefined},
      {name: 'link', type: 'string', convert: null, defaultValue: undefined},
      {name: 'index', type: 'int', convert: null, defaultValue: undefined}
    ]
  });
  
  Ext.define('MyStore', {
    extend: 'Ext.data.ArrayStore',
    model: 'MyModel',
    data: [
      [false, 1, 'Title', 'link', 5]
    ]
  });
  
  Ext.define('Bookmarks', {
    extend: 'Ext.grid.Panel',
    requires: ['Ext.ux.CheckColumn'],
    store: 'MyStore',
    title: 'Title',
    columns: [
      {text: 'text', dataIndex: 'check', xtype: 'checkcolumn'},
      {text: 'title', xtype: 'templatecolumn', tpl: '{title}<br>{link}'}
    ]  
  });

  Ext.create('Ext.container.Viewport', {
    layout: {
      type: 'vbox',
      align: 'stretch'
    },
    items: [Ext.create('Bookmarks')]
  });  
});

and get error:
in Chrome
1.png

in Firefox
2.png

What am I doing wrong?

[nferreira]

XHR requests work only over HTTP. Put this code in a HTTP server, like Apache.

[cs0ip]

I moved the files to the server and removed the 'checkcolumn', because it was absent for some reason.

Ext.onReady(function() {
  Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'check', type: 'bool', convert: null, defaultValue: false},
      {name: 'id', type: 'int', convert: null, defaultValue: undefined},
      {name: 'title', type: 'string', convert: null, defaultValue: undefined},
      {name: 'link', type: 'string', convert: null, defaultValue: undefined},
      {name: 'index', type: 'int', convert: null, defaultValue: undefined}
    ]
  });
  
  Ext.define('MyStore', {
    extend: 'Ext.data.ArrayStore',
    model: 'MyModel',
    data: [
      [false, 1, 'Title', 'link', 5]
    ]
  });
  
  Ext.define('Bookmarks', {
    extend: 'Ext.grid.Panel',
    store: 'MyStore',
    title: 'Title',
    columns: [
      {text: 'title', xtype: 'templatecolumn', tpl: '{title}<br>{link}'}
    ]  
  });

  Ext.create('Ext.container.Viewport', {
    layout: {
      type: 'vbox',
      align: 'stretch'
    },
    items: [Ext.create('Bookmarks')]
  });  
});

Now I get this error:

firefox
1.png

chrome
2.png

[chramer]

  Ext.define('Bookmarks', {
    extend: 'Ext.grid.Panel',
    store: Ext.create('MyStore'),
    title: 'Title',
    columns: [
      {text: 'title', xtype: 'templatecolumn', tpl: '{title}<br>{link}'}
    ]  
  });

[cs0ip]

chramer, many thanks, it worked.

[slemmon]

By and by, if in your store definition you give the store class an alias of 'store.mystore' then you can also instantiate that store type using:
store: { type: 'mystore' }