Jump to content
uniGUI Discussion Forums
Sherzod

PageSize Extension for UniDBGrid

Recommended Posts

Hi All! 

 

PageSize Extension for UniDBGrid:

 

post-906-0-76615600-1402049608_thumb.png

 

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.

  • Upvote 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Upvote 1

Share this post


Link to post
Share on other sites

 

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!

Share this post


Link to post
Share on other sites

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);
    },

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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];
}

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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,

Share this post


Link to post
Share on other sites

Hi,

 

Thank you #Delphi Developer. Code worked!

function store.beforeload(store, operation, eOpts)
{
    if (operation.params) {
        operation.params.limit = operation.limit;
    }
}

Share this post


Link to post
Share on other sites

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;}')
    );

Share this post


Link to post
Share on other sites

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;

Share this post


Link to post
Share on other sites

Can you try this ?!:

JSAddListener('beforeload', JSFunction('store, operation, eOpts', 'if (operation.params) {operation.params.limit = operation.limit;}'), DataStore);

Share this post


Link to post
Share on other sites

i do unidbgrid runtime pagesized use PagingToolbarResizer.js

my data total record 180
first grid create weboptions page size 25
i runtime mode change page size to 100 then
i edit first page last row edit post but select cursor move other row two page first
why post data changed row select cursor? Help me

Share this post


Link to post
Share on other sites

×