-<html>\r
-<head>\r
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> \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: "Company", flex: 1, sortable: true, dataIndex: 'company'},
+ * {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
+ * {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
+ * {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
+ * {text: "Last Updated", 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: "&#160",
+
+<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,
- 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="'+this.rowspan+'"';
}
- 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>