Ext.grid.RowNumberer --> Ext.grid.NumberedColumn [Archive]

mjlecomte

4 Jun 2009, 3:35 PM

Looks to me like Ext.grid.RowNumberer could/should be brought up to times and make Ext.grid.NumberedColumn.

Here's my take on the Class:

//RowNumberer.js to be removed and the following moved within Column.js

/**
* @class Ext.grid.NumberedColumn
* Formerly known as "RowNumberer", this is a utility class that can be passed into
* a {@link Ext.grid.ColumnModel} as a column config that provides a column with
* automatically numbered rows.
* <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.NumberedColumn(),
{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
*/
Ext.grid.NumberedColumn = Ext.extend(Ext.grid.Column, {
/**
* @cfg {String} header Any valid text or HTML fragment to display in the header cell for
* the numbered column (defaults to '').
*/
header: "",
/**
* @cfg {Number} rowspan The rowspan attribute to be applied to the numbered column
* style. Defaults to <tt>undefined</tt>. Set this to <tt>2</tt>, for example, when
* using <code>{@link Ext.grid.GridView#enableRowBody}</code> (eg. RowExpander, etc.)
*/
/**
* @cfg {Boolean} sortable True if the numbered column is sortable (defaults to false).
* @hide
*/
sortable: false,
/**
* @cfg {Number} width The default width in pixels of the numbered column (defaults to 23).
*/
width: 23,

// private
fixed: true,
menuDisabled: true,
dataIndex: '',
id: 'numberer',

constructor: function(cfg){
Ext.grid.NumberedColumn.superclass.constructor.call(this, cfg);
},

renderer: function(v, p, record, rowIndex){
if(this.rowspan){
p.cellAttr = 'rowspan="'+this.rowspan+'"';
}
return rowIndex+1;
}
});

// backward compatibility
Ext.grid.RowNumberer = Ext.grid.NumberedColumn;

// add the xtype
Ext.grid.Column.types = {
gridcolumn : Ext.grid.Column,
booleancolumn: Ext.grid.BooleanColumn,
numbercolumn: Ext.grid.NumberColumn,
numberedcolumn: Ext.grid.NumberedColumn,
datecolumn: Ext.grid.DateColumn,
templatecolumn: Ext.grid.TemplateColumn
};

mjlecomte

4 Jun 2009, 3:37 PM

Here's an example of usage (drop these two files into the examples/grid directory):

grid-numberedColumn.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Grid Numbered Column Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />



<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>


<script type="text/javascript" src="../../ext-all-detail.js"></script>

<script type="text/javascript" src="../ux/RowExpander.js"></script>
<script type="text/javascript" src="grid-numberedColumn.js"></script>
<link rel="stylesheet" type="text/css" href="grid-examples.css" />


<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

<style type="text/css">
body .x-panel {
margin-bottom:20px;
}
.icon-grid {
background-image:url(../shared/icons/fam/grid.png) !important;
}
#button-grid .x-panel-body {
border:1px solid #99bbe8;
border-top:0 none;
}
.add {
background-image:url(../shared/icons/fam/add.gif) !important;
}
.option {
background-image:url(../shared/icons/fam/plugin.gif) !important;
}
.remove {
background-image:url(../shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(../shared/icons/save.gif) !important;
}
</style>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>

</body>
</html>

grid-numberedColumn.js

Ext.onReady(function(){

var xg = Ext.grid;

// shared reader
var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]);

// row expander
var expander = new xg.RowExpander({
tpl : new Ext.Template(
'<p><b>Company:</b> {company}</p><br>',
'<p><b>Summary:</b> {desc}</p>'
)
});

var sm = new xg.RowSelectionModel({
listeners: {
// On selection change, set enabled state of the removeButton
// which was placed into the GridPanel using the ref config
selectionchange: function(sm) {
if (sm.getCount()) {
grid1.removeButton.enable();
} else {
grid1.removeButton.disable();
}
}
}
});
var store = new Ext.data.Store({
reader: reader,
data: xg.dummyData
});

var onRowsChange = function(view, row, info){
this.refresh();
};

var recId = 100;

var grid1 = new xg.GridPanel({
store: store,
selModel: sm,
cm: new xg.ColumnModel({
defaults: {
width: 20,
sortable: true
},
columns: [
expander,
{
xtype: 'numberedcolumn',
rowspan: 2
},
{id:'company',header: "Company", width: 40, dataIndex: 'company'},
{header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", dataIndex: 'change'},
{header: "% Change", dataIndex: 'pctChange'},
{header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
}),
viewConfig: {
forceFit:true,
listeners:{
rowsinserted: onRowsChange,
rowremoved: onRowsChange
}
},
columnLines: true,
width: 600,
height: 400,
plugins: expander,
collapsible: true,
animCollapse: false,
title: 'Numbered Columns, Expander Rows, Collapse and Force Fit',
iconCls: 'icon-grid',
renderTo: document.body,
// inline toolbars
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add',
handler : function(){

var defaultData = {
change: 0,
company: 'New Company',
lastChange: (new Date()).clearTime(),
pctChange: 0,
price: 10
};
var p = new store.recordType(defaultData, ++recId); // create new record
store.insert(0, p); // add new record to the store
}
},{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove',
// Place a reference in the GridPanel
ref: '../removeButton',
disabled: true,
handler: function(btn, ev) {
var g = grid1;
var rec = g.getSelectionModel().getSelected();
if (!rec) {
return false;
}
g.store.remove(rec);
}
}]
});
});

// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am', 'Services'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am', 'Manufacturing'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am', 'Services'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am', 'Finance'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am', 'Manufacturing'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am', 'Manufacturing'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am', 'Manufacturing'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am', 'Automotive'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am', 'Computer'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am', 'Manufacturing'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am', 'Computer'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am', 'Computer'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am', 'Medical'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am', 'Finance'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am', 'Food'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am', 'Medical'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am', 'Computer'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am', 'Services', 'Medical'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am', 'Food'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am', 'Retail'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am', 'Manufacturing'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am', 'Computer'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am', 'Services'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am', 'Retail'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am', 'Services']
];

// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.');
}

mjlecomte

4 Jun 2009, 3:53 PM

Had to fix the renderer so the rowspan worked.

mjlecomte

4 Jun 2009, 3:57 PM

Here's a screenshot, shows one of the rows expanded.

Load it up to see adding/deleting records update the row numbers.

charleshimmer

19 Nov 2009, 5:33 PM

What the difference between your class and RowNumberer?