PDA

View Full Version : Fuctionality to toolbar of grid



Pankaj Kumar M
15 Jan 2015, 6:32 AM
Hi,

I have grid with binding with database. the reference to the grid is

grid = ColdFusion.Grid.getGridObject('workingbills_grid1');


Now, i have override the toolbar of this grid.

var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
//Create new PaginToolbar and render it to bbar (grid footer)
gbbar = new Ext.PagingToolbar({renderTo:bbar,
store: grid.store,
pageSize: 10,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2} Transactions</b>',

items:[
'-', {
pressed: false,
enableToggle:false,
tooltip: 'click here to view all My Working Bills',
text: 'View All',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler: showWin// handler: ShowWin // should be replaced with your own function
}
]
});

}

I need to change the display values in the displayMsg, where i'm using

Ext.define('Override.toolbar.Paging', {
override: 'Ext.toolbar.Paging',
getPageData: function () {
var store = this.store,
totalCount = store.getCount()- parseInt(store.getCount()/store.pageSize)-1;

return {
total: totalCount,
currentPage: store.currentPage,
pageCount: Math.ceil(totalCount / store.pageSize),
fromRecord: ((store.currentPage - 1) * (store.pageSize-1))+1,
toRecord: Math.min((store.currentPage * (store.pageSize-1)) , totalCount)
};
}
});

Now, how will I bind the above overriding EXT to the grid reference. In this scenario ,how will i override getPageData() ?

lumberjack
20 Jan 2015, 8:04 AM
The following fiddle shows how you might customize the displayMsg.

Regards,
Brian

ba9

Pankaj Kumar M
7 Aug 2015, 5:04 AM
This the javascript code snippet

var bbar = Ext.DomHelper.overwrite(grid.bbar,{tag:'div',id:Ext.id()},true);
//Create new PaginToolbar and render it to bbar (grid footer)
gbbar = new Ext.PagingToolbar({renderTo:bbar,
store: grid.store,
pageSize: 10,
displayInfo: true,
displayMsg: '<b>Showing {0} - {1} out of {2} Transactions</b>',
emptyMsg: "<b>No Record</b>",
items:[
'-', {
pressed: false,
enableToggle:false,
tooltip:'Click here to View All Transaction Details',
text: 'View All',// The text that will show for the button in the bar
icon:'css/add.png',//Icon graphic
cls: 'x-btn-text-icon',//The ext class that will display the button with text/icon properly
handler:showWin// handler:showWin // should be replaced with your own function
}

]
});
}

This is snapshot of the page
file:///C:\Users\PANKAJ~1\AppData\Local\Temp\msohtmlclip1\01\clip_image002.jpg



Here , the 10th row is the total row so there r only 9 records. The displayMessage in the toolbar bar shows ”Showing 1-10 out of 35 transactions”. But the actual message required is “Showing 1-9 out of 35 transactions”. Hope you understood my query.