Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / RowNumberer.html
index 8e2ff23..dd156a9 100644 (file)
@@ -1,64 +1,86 @@
-<html>\r
-<head>\r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.grid.RowNumberer"></div>/**
- * @class Ext.grid.RowNumberer
- * This is a utility class that can be passed into a {@link Ext.grid.ColumnModel} as a column config that provides
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+  <style type="text/css">
+    .highlight { display: block; background-color: #ddd; }
+  </style>
+  <script type="text/javascript">
+    function highlight() {
+      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+    }
+  </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+  <pre class="prettyprint lang-js"><span id='Ext-grid-RowNumberer'>/**
+</span> * This is a utility class that can be passed into a {@link Ext.grid.column.Column} as a column config that provides
  * an automatic row numbering column.
- * <br>Usage:<br>
- <pre><code>
- // This is a typical column config with the first column providing row numbers
var colModel = new Ext.grid.ColumnModel([
   new Ext.grid.RowNumberer(),
   {header: "Name", width: 80, sortable: true},
   {header: "Code", width: 50, sortable: true},
-    {header: "Description", width: 200, sortable: true}
- ]);
- </code></pre>
- * @constructor
- * @param {Object} config The configuration options
+ * 
+ * Usage:
+ *
*     columns: [
*         {xtype: 'rownumberer'},
*         {text: &quot;Company&quot;, flex: 1, sortable: true, dataIndex: 'company'},
*         {text: &quot;Price&quot;, width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
+ *         {text: &quot;Change&quot;, width: 120, sortable: true, dataIndex: 'change'},
+ *         {text: &quot;% Change&quot;, width: 120, sortable: true, dataIndex: 'pctChange'},
+ *         {text: &quot;Last Updated&quot;, width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
+ *     ]
+ *
  */
-Ext.grid.RowNumberer = function(config){
-    Ext.apply(this, config);
-    if(this.rowspan){
-        this.renderer = this.renderer.createDelegate(this);
-    }
-};
+Ext.define('Ext.grid.RowNumberer', {
+    extend: 'Ext.grid.column.Column',
+    alias: 'widget.rownumberer',
 
-Ext.grid.RowNumberer.prototype = {
-    <div id="cfg-Ext.grid.RowNumberer-header"></div>/**
-     * @cfg {String} header Any valid text or HTML fragment to display in the header cell for the row
-     * number column (defaults to '').
+<span id='Ext-grid-RowNumberer-cfg-text'>    /**
+</span>     * @cfg {String} text
+     * Any valid text or HTML fragment to display in the header cell for the row number column.
      */
-    header: "",
-    <div id="cfg-Ext.grid.RowNumberer-width"></div>/**
-     * @cfg {Number} width The default width in pixels of the row number column (defaults to 23).
+    text: &quot;&amp;#160&quot;,
+
+<span id='Ext-grid-RowNumberer-cfg-width'>    /**
+</span>     * @cfg {Number} width
+     * The default width in pixels of the row number column.
      */
     width: 23,
-    <div id="cfg-Ext.grid.RowNumberer-sortable"></div>/**
-     * @cfg {Boolean} sortable True if the row number column is sortable (defaults to false).
+
+<span id='Ext-grid-RowNumberer-cfg-sortable'>    /**
+</span>     * @cfg {Boolean} sortable
+     * True if the row number column is sortable.
      * @hide
      */
     sortable: false,
 
+    align: 'right',
+
+    constructor : function(config){
+        this.callParent(arguments);
+        if (this.rowspan) {
+            this.renderer = Ext.Function.bind(this.renderer, this);
+        }
+    },
+
     // private
-    fixed:true,
-    menuDisabled:true,
+    resizable: false,
+    hideable: false,
+    menuDisabled: true,
     dataIndex: '',
-    id: 'numberer',
+    cls: Ext.baseCSSPrefix + 'row-numberer',
     rowspan: undefined,
 
     // private
-    renderer : function(v, p, record, rowIndex){
-        if(this.rowspan){
-            p.cellAttr = 'rowspan="'+this.rowspan+'"';
+    renderer: function(value, metaData, record, rowIdx, colIdx, store) {
+        if (this.rowspan){
+            metaData.cellAttr = 'rowspan=&quot;'+this.rowspan+'&quot;';
         }
-        return rowIndex+1;
+
+        metaData.tdCls = Ext.baseCSSPrefix + 'grid-cell-special';
+        return store.indexOfTotal(record) + 1;
     }
-};</pre>    \r
-</body>\r
-</html>
\ No newline at end of file
+});
+</pre>
+</body>
+</html>