RowNumberer.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-grid-RowNumberer'>/**
  19. </span> * This is a utility class that can be passed into a {@link Ext.grid.column.Column} as a column config that provides
  20. * an automatic row numbering column.
  21. *
  22. * Usage:
  23. *
  24. * columns: [
  25. * {xtype: 'rownumberer'},
  26. * {text: &quot;Company&quot;, flex: 1, sortable: true, dataIndex: 'company'},
  27. * {text: &quot;Price&quot;, width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
  28. * {text: &quot;Change&quot;, width: 120, sortable: true, dataIndex: 'change'},
  29. * {text: &quot;% Change&quot;, width: 120, sortable: true, dataIndex: 'pctChange'},
  30. * {text: &quot;Last Updated&quot;, width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
  31. * ]
  32. *
  33. */
  34. Ext.define('Ext.grid.RowNumberer', {
  35. extend: 'Ext.grid.column.Column',
  36. alias: 'widget.rownumberer',
  37. <span id='Ext-grid-RowNumberer-cfg-text'> /**
  38. </span> * @cfg {String} text
  39. * Any valid text or HTML fragment to display in the header cell for the row number column.
  40. */
  41. text: &quot;&amp;#160&quot;,
  42. <span id='Ext-grid-RowNumberer-cfg-width'> /**
  43. </span> * @cfg {Number} width
  44. * The default width in pixels of the row number column.
  45. */
  46. width: 23,
  47. <span id='Ext-grid-RowNumberer-cfg-sortable'> /**
  48. </span> * @cfg {Boolean} sortable
  49. * @hide
  50. */
  51. sortable: false,
  52. <span id='Ext-grid-RowNumberer-cfg-draggable'> /**
  53. </span> * @cfg {Boolean} [draggable=false]
  54. * False to disable drag-drop reordering of this column.
  55. */
  56. draggable: false,
  57. align: 'right',
  58. constructor : function(config){
  59. // Copy the prototype's default width setting into an instance property to provide
  60. // a default width which will not be overridden by AbstractContainer.applyDefaults use of Ext.applyIf
  61. this.width = this.width;
  62. this.callParent(arguments);
  63. if (this.rowspan) {
  64. this.renderer = Ext.Function.bind(this.renderer, this);
  65. }
  66. },
  67. // private
  68. resizable: false,
  69. hideable: false,
  70. menuDisabled: true,
  71. dataIndex: '',
  72. cls: Ext.baseCSSPrefix + 'row-numberer',
  73. rowspan: undefined,
  74. // private
  75. renderer: function(value, metaData, record, rowIdx, colIdx, store) {
  76. if (this.rowspan){
  77. metaData.cellAttr = 'rowspan=&quot;'+this.rowspan+'&quot;';
  78. }
  79. metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
  80. return store.indexOfTotal(record) + 1;
  81. }
  82. });
  83. </pre>
  84. </body>
  85. </html>