app.js 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. /**
  2. * @example Simple Grid
  3. *
  4. * A basic grid that renders itself to the document body.
  5. */
  6. Ext.require('Ext.data.Store');
  7. Ext.require('Ext.grid.Panel');
  8. Ext.define('User', {
  9. extend: 'Ext.data.Model',
  10. fields: [ 'name', 'email', 'phone' ]
  11. });
  12. Ext.onReady(function() {
  13. var userStore = Ext.create('Ext.data.Store', {
  14. model: 'User',
  15. data: [
  16. { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
  17. { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
  18. { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
  19. { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
  20. ]
  21. });
  22. Ext.create('Ext.grid.Panel', {
  23. renderTo: Ext.getBody(),
  24. store: userStore,
  25. width: 400,
  26. height: 200,
  27. title: 'Application Users',
  28. columns: [
  29. {
  30. text: 'Name',
  31. width: 100,
  32. sortable: false,
  33. hideable: false,
  34. dataIndex: 'name'
  35. },
  36. {
  37. text: 'Email Address',
  38. width: 150,
  39. dataIndex: 'email',
  40. hidden: true
  41. },
  42. {
  43. text: 'Phone Number',
  44. flex: 1,
  45. dataIndex: 'phone'
  46. }
  47. ]
  48. });
  49. });