Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / RowNumberer.html
index 88da490..dd156a9 100644 (file)
@@ -1,72 +1,86 @@
+<!DOCTYPE html>
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <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>
+  <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();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-<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
+<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 = Ext.extend(Object, {
-    <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 '').
+Ext.define('Ext.grid.RowNumberer', {
+    extend: 'Ext.grid.column.Column',
+    alias: 'widget.rownumberer',
+
+<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){
-        Ext.apply(this, config);
-        if(this.rowspan){
-            this.renderer = this.renderer.createDelegate(this);
+        this.callParent(arguments);
+        if (this.rowspan) {
+            this.renderer = Ext.Function.bind(this.renderer, this);
         }
     },
 
     // private
-    fixed:true,
+    resizable: false,
     hideable: false,
-    menuDisabled:true,
+    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>    
+});
+</pre>
 </body>
-</html>
\ No newline at end of file
+</html>