Ext.ux.grid.SelCount : Display grid selection count in toolbar

[vmorale4]

Hi, this is my first plug-in. Its purpose is very simple: display the current selection count of a grid in a toolbar.

You can configure the count text, as well as whether it should use the bottom or the top toolbar (by default it uses bbar).



Ext.namespace('Ext.ux.grid');

/**
* Ext.ux.grid.SelCount plugin for Ext.form.GridPanel
*
* @author vmorale4
* @date February 17, 2009
*
* @class Ext.ux.grid.SelectionCount
* @extends Ext.util.Observable
*/

//Note: this override will become obsolete in Ext 3.0
Ext.override(Ext.Toolbar.TextItem, {
setText : function(t){
Ext.fly(this.getEl()).update(t);
}
});

Ext.ux.grid.SelCount = function(config) {
Ext.apply(this, config);
};

Ext.extend(Ext.ux.grid.SelCount, Ext.util.Observable, {
bar:'bbar',
countText:'{0} row(s) selected',
defaultText:'No rows selected',
init:function(grid) {
this.grid=grid;
var sm= grid.getSelectionModel();
grid.on('render',function(){
var b=(this.bar=='bbar'?grid.getBottomToolbar(): grid.getTopToolbar());
b.addSeparator();
this.countItem=b.addText(this.defaultText);
},this);
sm.on('selectionchange',function(){
this.countItem.setText(String.format(this.countText,sm.getCount()));
},this);
}
});

[zhw511006]

Good Work! Thank You!

I make small change !

this.countItem=b.addSeparator();
this.countItem=b.addText('0 row selected');

[vmorale4]

Good Work! Thank You!

I make small change !

this.countItem=b.addSeparator();
this.countItem=b.addText('0 row selected');

I like the separator idea, so I updated the code with that.

Now about changing the text to '0 row selected' I instead created another property called defaultText, this way it is easier to configure a different message/language

[zhw511006]

I like the separator idea, so I updated the code with that.

Now about changing the text to '0 row selected' I instead created another property called defaultText, this way it is easier to configure a different message/language

Good Idear!;)

[lkasdorf]

Thanks for creating and posting this- but I'm having a little trouble getting this to work.

Got an example you can point to?

I have a pre-defined class for my grid. I create an instance of your SelCount, then call init() on it:



this.selCount = new Ext.ux.grid.SelCount({bar:'tbar', grid:this});
this.selCount.init(this);


Then, in my tbar, I have this:


,tbar:[
...
,this.selCount
]



I see the item in my tbar, but it is not responding to the selectionchange event. I'll track it down, but maybe you have a suggestion. Thanks!

Thanks!

[zhw511006]

Use it in the GridPanel Plugins ! It Works!

plugins:[new Ext.ux.grid.SelCount({bar: 'tbar'})]

[lkasdorf]

Ah! A plugin- it even says that in the OP. (head slap Doh!)

Thanks for straightening me out- works great now!