Sherzod Posted June 6, 2014 Share Posted June 6, 2014 Hi All! PageSize Extension for UniDBGrid: How to use? 1. Download the file from here https://github.com/loiane/extjs4-ux-paging-toolbar-resizer/blob/master/ux/PagingToolbarResizer.js and copy to the directory /files/ 2. Add CustomFiles in UniServerModule: files/PagingToolbarResizer.js 3. Add beforerender function in UniDBGrid: function beforerender(sender, eOpts) { if (sender.pagingBar) { sender.pagingBar.hide(); sender.pagingBar.border = "0 none"; sender.pagingBar.destroy(); sender.addDocked( {dock: 'bottom', items: [Ext.create('Ext.PagingToolbar', { pageSize: sender.store.pageSize, store: sender.store, displayInfo: true, plugins: Ext.create('Ext.ux.PagingToolbarResizer',{displayText: 'Records per Page', options : [ 5, 10, 15, 20, 25 ]}) })] }); } } http://loianegroner.com/extjs/examples/extjs4-ux-paging-toolbar-resizer/ Sincerely. 2 Quote Link to comment Share on other sites More sharing options...
ganzqgy Posted July 16, 2014 Share Posted July 16, 2014 extjs4.2+unigui0.96: 1.ext-4.2.1.883\src\ux\: PagingToolbarResizer.js,PreviewPlugin.js 2.ext.grid.panel: function added(sender, container, pos, eOpts){ if (sender.pagingBar) { sender.pagingBar.hide(); sender.pagingBar.border = "0 none"; sender.pagingBar.destroy(); sender.addDocked( {dock: 'bottom', items: [Ext.create('Ext.PagingToolbar', { pageSize: sender.store.pageSize, store: sender.store, displayInfo: true, plugins: Ext.create('Ext.ux.PagingToolbarResizer',{displayText: 'Records per Page', options : [ 5, 10, 15, 20, 25 ]}) })] }); } } ux.zip Quote Link to comment Share on other sites More sharing options...
ganzqgy Posted July 16, 2014 Share Posted July 16, 2014 function added(sender, container, pos, eOpts){ if (sender.pagingBar) { sender.pagingBar.hide(); sender.pagingBar.border = "0 none"; sender.pagingBar.destroy(); sender.addDocked( {dock: 'bottom', items: [Ext.create('Ext.PagingToolbar', { pageSize: sender.store.pageSize, store: sender.store, displayInfo: true, plugins: [Ext.create('Ext.ux.ProgressBarPager', {width: 300}), Ext.create('Ext.ux.PagingToolbarResizer',{displayText: 'Records per Page', options : [ 5, 10, 15, 20, 25,50,100 ]})] })] }); } } PagingToolbarResizer.js.zip 1 Quote Link to comment Share on other sites More sharing options...
ChenHaibin Posted July 16, 2014 Share Posted July 16, 2014 Hello Delphi Developer: Something is wrong in ProgressBarPager.js When initialized, if the number of records per page is 20, then adjusted to 10, click on the toolbar the number of pages is wrong. Here is the code ------------------------------------------------------------- // private // This method handles the click for the progress bar handleProgressBarClick : function(e){ var parent = this.parent, displayItem = parent.displayItem, box = this.progressBar.getBox(), xy = e.getXY(), position = xy[0]- box.x, pages = Math.ceil(parent.store.getTotalCount() / parent.pageSize), newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1); parent.store.loadPage(newPage); }, Thank you! Quote Link to comment Share on other sites More sharing options...
ganzqgy Posted July 16, 2014 Share Posted July 16, 2014 handleProgressBarClick : function(e){ var parent = this.parent, displayItem = parent.displayItem, box = this.progressBar.getBox(), xy = e.getXY(), position = xy[0]- box.x, pages = Math.ceil(parent.store.getTotalCount() / parent.store.pageSize), newPage = Math.max(Math.ceil(position / (displayItem.width / pages)), 1); parent.store.loadPage(newPage); }, Quote Link to comment Share on other sites More sharing options...
ganzqgy Posted July 17, 2014 Share Posted July 17, 2014 print dbgrid Gridprint.rar Quote Link to comment Share on other sites More sharing options...
chefdackel Posted September 23, 2014 Share Posted September 23, 2014 print dbgrid anyone had success getting this example running with UniGUI 0.97? I use 0.97.0.1076 and only an empty panel is displayed. Also with the other extensions shown here from Delphi Developer and Mr. ganzqgy. (?) brfc Quote Link to comment Share on other sites More sharing options...
ganzqgy Posted September 24, 2014 Share Posted September 24, 2014 Don't use "added" event. USE: function pagingBar.beforeInit(sender, config){ sender.displayInfo= true; var pbp=Ext.create("Ext.ux.ProgressBarPager", {width:200}); var ptr=Ext.create("Ext.ux.PagingToolbarResizer",{displayText:" 每页行数:",options:[1,5,10,15,20,25,50,100,2000]}); sender.plugins=[pbp,ptr];} Quote Link to comment Share on other sites More sharing options...
Administrators Farshad Mohajeri Posted September 24, 2014 Administrators Share Posted September 24, 2014 Replace: sender.pagingBar.hide(); sender.pagingBar.border = "0 none"; sender.pagingBar.destroy(); With sender.removeDocked(sender.pagingBar, true); 2 Quote Link to comment Share on other sites More sharing options...
chefdackel Posted September 25, 2014 Share Posted September 25, 2014 Replace: sender.pagingBar.hide(); sender.pagingBar.border = "0 none"; sender.pagingBar.destroy(); With sender.removeDocked(sender.pagingBar, true); thanks, works with 0.97/ExtJS 4.2.2 now. Quote Link to comment Share on other sites More sharing options...
delagoutte Posted June 14, 2017 Share Posted June 14, 2017 hello i add progressbarPager.js and PagingToolbarResizer.js in servermodule.customfiles. All is working with unidbgrid in my desktop app. But i have in my app a part develop for mobile. Since i add files the mobile part don't work, i have a 404 error : http://localhost:8077/m/touch-2.4.2-complete/src/ProgressBar.js?_dc=1497430083888 I think it is because there is Ext.define('Ext.ux.ProgressBarPager', { requires: ['Ext.ProgressBar'], in progressbarPages.js. in mobile part of my app, i use unidblistgrid and i don't use the both js. How can i do for having my project that works in desktop mode and mobile mode ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 14, 2017 Author Share Posted June 14, 2017 Hi, You need to remove these files in ServerModule.CustomFiles And to add in initialization section of your "module": UniAddJSLibrary('files/ProgressBarPager.js', False, [upoPlatformDesktop]); ... Best regards, Quote Link to comment Share on other sites More sharing options...
delagoutte Posted June 14, 2017 Share Posted June 14, 2017 thanks Quote Link to comment Share on other sites More sharing options...
multimesut Posted June 17, 2017 Share Posted June 17, 2017 When "PageSize" "MyQuery SQL" value changes it turns to default value. But it is ok when i run "UniSession.AddJS('Ext.getCmp("'+grid.JSName+'_id").store.load();');" code. What is the problem and solution? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 17, 2017 Author Share Posted June 17, 2017 Hi, I'm sorry, can you clarify your question again? Best regards, Quote Link to comment Share on other sites More sharing options...
multimesut Posted June 19, 2017 Share Posted June 19, 2017 Hi #Delphi Developer, PageSize is failing for Reflesh. I showed the video problem in detail. Video (download and play); https://drive.google.com/file/d/0B_ZaWuVsHMqhWEh2WDZBM1RiU0k/view?usp=sharing Code; procedure TMainForm.RefleshClick(Sender: TObject); begin MyQuery1.SQL.Clear; MyQuery1.SQL.Add('SELECT calldate FROM cdr'); MyQuery1.Open; end; procedure TMainForm.FixClick(Sender: TObject); begin UniSession.AddJS('Ext.getCmp("'+UniDBGrid1.JSName+'_id").store.load();'); end; Best regards, Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 20, 2017 Author Share Posted June 20, 2017 Hi, Can you check with this solution for now ?!: http://forums.unigui.com/index.php?/topic/7983-new-pagesize-is-not-taken-into-account-when-it-is-changed-at-runtime/&do=findComment&comment=40915 Best regards, Quote Link to comment Share on other sites More sharing options...
multimesut Posted June 20, 2017 Share Posted June 20, 2017 Hi, Thank you #Delphi Developer. Code worked! function store.beforeload(store, operation, eOpts) { if (operation.params) { operation.params.limit = operation.limit; } } Quote Link to comment Share on other sites More sharing options...
multimesut Posted June 20, 2017 Share Posted June 20, 2017 How can I do this with code? The following did not work. JSAddListener('store.beforeload', JSFunction('store, operation, eOpts', 'if (operation.params) {operation.params.limit = operation.limit;}') ); Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 20, 2017 Author Share Posted June 20, 2017 Hi, Do you want to do this at runtime or ? Quote Link to comment Share on other sites More sharing options...
multimesut Posted June 20, 2017 Share Posted June 20, 2017 no. I will add it here. To do automatic all grid. (TMSTUniDBGrid.pas) Procedure TMSTUniDBGrid.Loaded; begin inherited; JSAddListener('store.beforeload', JSFunction('store, operation, eOpts', 'if (operation.params) {operation.params.limit = operation.limit;}') ); end; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted June 20, 2017 Author Share Posted June 20, 2017 Can you try this ?!: JSAddListener('beforeload', JSFunction('store, operation, eOpts', 'if (operation.params) {operation.params.limit = operation.limit;}'), DataStore); Quote Link to comment Share on other sites More sharing options...
multimesut Posted June 20, 2017 Share Posted June 20, 2017 Yes, This work. Thank you. Quote Link to comment Share on other sites More sharing options...
Juugii Posted April 24, 2018 Share Posted April 24, 2018 i do unidbgrid runtime pagesized use PagingToolbarResizer.jsmy data total record 180first grid create weboptions page size 25i runtime mode change page size to 100 theni edit first page last row edit post but select cursor move other row two page firstwhy post data changed row select cursor? Help me Quote Link to comment Share on other sites More sharing options...
delagoutte Posted August 7, 2018 Share Posted August 7, 2018 for info : the plugin don't work with extjs 6 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.