Hi Everyone,

I am writing a plugin for customizing the PagingToolbar according to our own needs. I am embedding the combo box inside the pagingtoolbar. The problem here is that the combo box is not getting loaded properly and I am not able to get the value of the combo box.Can anyone please help me with it.

Code:
***********************************

Ext.PagingToolbar = function(el, ds, config){
Ext.PagingToolbar.superclass.constructor.call(this, el, null, config);
this.ds = ds;
this.cursor = 0;
this.onRender(this.el);
this.bind(ds);
};

Ext.PagingToolbar = Ext.extend(Ext.Toolbar, {
/**
* @cfg {Ext.data.Store} store The {@link Ext.data.Store} the paging toolbar should use as its data source (required).
*/
/**
* @cfg {Boolean} displayInfo
* True to display the displayMsg (defaults to false)
*/
/**
* @cfg {Number} pageSize
* The number of records to display per page (defaults to 20)
*/
pageSize: 20,
/**
* @cfg {String} displayMsg
* The paging status message to display (defaults to "Displaying {0} - {1} of {2}"). Note that this string is
* formatted using the braced numbers 0-2 as tokens that are replaced by the values for start, end and total
* respectively. These tokens should be preserved when overriding this string if showing those values is desired.
*/
displayMsg : 'Displaying {0} - {1} of {2}',
/**
* @cfg {String} emptyMsg
* The message to display when no records are found (defaults to "No data to display")
*/
emptyMsg : 'No data to display',
/**
* Customizable piece of the default paging text (defaults to "Page")
* @type String
*/
beforePageText : "Page",
/**
* Customizable piece of the default paging text (defaults to "of %0")
* @type String
*/
afterPageText : "of {0}",
/**
* Customizable piece of the default paging text (defaults to "First Page")
* @type String
*/
firstText : "First Page",
/**
* Customizable piece of the default paging text (defaults to "Previous Page")
* @type String
*/
prevText : "Previous Page",
/**
* Customizable piece of the default paging text (defaults to "Next Page")
* @type String
*/
nextText : "Next Page",
/**
* Customizable piece of the default paging text (defaults to "Last Page")
* @type String
*/
lastText : "Last Page",
/**
* Customizable piece of the default paging text (defaults to "Refresh")
* @type String
*/
refreshText : "Refresh",

// private
onRender : function(ct, position){
Ext.PagingToolbar.superclass.onRender.call(this, ct, position);
this.first = this.addButton({
tooltip: this.firstText,
iconCls: "x-tbar-page-first",
disabled: true,
handler: this.gridPage("first")
});
this.prev = this.addButton({
tooltip: this.prevText,
iconCls: "x-tbar-page-prev",
disabled: true,
handler: this.gridPage("prev")
});
this.next = this.addButton({
tooltip: this.nextText,
iconCls: "x-tbar-page-next",
disabled: true,
handler: this.gridPage("next")
});
this.last = this.addButton({
tooltip: this.lastText,
iconCls: "x-tbar-page-last",
disabled: true,
handler: this.gridPage("last")
});
this.addSeparator();
this.Rows = this.add({
text:'Rows:'
});
this.numRows = this.add({
xtype: "combo",
store: new Ext.data.SimpleStore({fields: ['number','value'],
data : [['10','10'],['25','25'],['50','50'],['100','100'],['250','250'],['500','500']]}),
displayField: 'number',
valuefield: 'value',
autoLoad: true,
mode: 'local',
width: 50,
value: 25,
editable: false
});
this.addSeparator();
this.span = this.add({
text: '<span id="gridPageStatus" class="ytb-text">Loading...</span>'
});
this.bind();
},

gridPage:function(position) {
var gridPosition = "";
var gridStart = 0;
var gridTotalCount = this.ds.getTotalCount();

gridPosition=position;
switch (position) {
case 'first':
gridStart = 0;
break;
case 'last':
gridStart=gridTotalCount-parseInt(this.numRows.getValue());
if (gridStart<0) {gridStart=0};
break;
case 'next':
if (gridStart+parseInt(this.numRows.getValue())<gridTotalCount) {gridStart=gridStart+parseInt(this.numRows.getValue())};
break;
case 'prev':
gridStart=gridStart-parseInt(this.numRows.getValue());
if (gridStart<0) {gridStart=0};
break;
case 'keep':
break;

};
},

// private
getPageData : function(){
var total = this.ds.getTotalCount();
return {
total : total,
activePage : Math.ceil((this.cursor+this.pageSize)/this.pageSize),
pages : total < this.pageSize ? 1 : Math.ceil(total/this.pageSize)
};
},


onLoad : function() {
gridTotalCount = this.ds.getTotalCount();
if (gridStart==0) {
this.prev.disable();
this.first.disable();
} else {
this.prev.enable();
this.first.enable();
};
if (gridStart+parseInt(this.numRows.getValue())>=gridTotalCount) {
this.next.disable();
this.last.disable();
gridEnd=gridTotalCount;
} else {
this.next.enable();
this.last.enable();
gridEnd=gridStart+parseInt(this.numRows.getValue());
};
if (gridTotalCount > 0) {
Ext.DomHelper.overwrite('gridPageStatus', 'Showing ' + (gridStart + 1) + ' - ' + gridEnd + ' of ' + gridTotalCount + ' records');
} else {
Ext.DomHelper.overwrite('gridPageStatus', 'No records to display');
};
},


unbind : function(ds){
this.ds.un("load", this.onLoad, this);
},

bind : function(ds){
this.ds.on("load", this.onLoad, this);
}

});

**************************************

this is the plugin I wrote and numRows is the combox that I have defined and when I do
this.numRows.getvalue() it gives an error saying that this.numRows is undefined.I am very confused as how to get the value from the combo box. I am a newbie to extJS so please do help me with this one.
Can anyone help me out with that