Jump to content


Photo

PageSize Extension for UniDBGrid

UniDBGrid PageSize Extension Plugin

  • Please log in to reply
22 replies to this topic

#1 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3430 posts

Posted 06 June 2014 - 10:23 AM

Hi All! 

 

PageSize Extension for UniDBGrid:

 

Attached File  PageSizeExtension.png   48.46KB   384 downloads

 

How to use?

 

1. Download the file from here https://github.com/l...olbarResizer.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....oolbar-resizer/

 

Sincerely.


  • 2

#2 ganzqgy

ganzqgy

    Advanced Member

  • Members
  • PipPipPipPip
  • 143 posts

Posted 16 July 2014 - 01:56 PM

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

Attached Files

  • Attached File  ux.zip   2.59KB   89 downloads

  • 0

#3 ganzqgy

ganzqgy

    Advanced Member

  • Members
  • PipPipPipPip
  • 143 posts

Posted 16 July 2014 - 02:33 PM

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

Attached Files


  • 1

#4 Hank

Hank

    Advanced Member

  • Members
  • PipPipPipPip
  • 205 posts

Posted 16 July 2014 - 03:19 PM

 

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!


  • 0

#5 ganzqgy

ganzqgy

    Advanced Member

  • Members
  • PipPipPipPip
  • 143 posts

Posted 16 July 2014 - 11:21 PM

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


  • 0

#6 ganzqgy

ganzqgy

    Advanced Member

  • Members
  • PipPipPipPip
  • 143 posts

Posted 17 July 2014 - 02:20 PM

print dbgrid

Attached Files


  • 0

#7 chefdackel

chefdackel

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 169 posts
  • LocationGermany

Posted 23 September 2014 - 06:03 PM

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


  • 0

#8 ganzqgy

ganzqgy

    Advanced Member

  • Members
  • PipPipPipPip
  • 143 posts

Posted 24 September 2014 - 12:32 AM

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


  • 0

#9 Farshad Mohajeri

Farshad Mohajeri

    Administrator

  • Administrators
  • 9813 posts

Posted 24 September 2014 - 03:17 AM

Replace:

   sender.pagingBar.hide();
    sender.pagingBar.border = "0 none";   
    sender.pagingBar.destroy();

With

 sender.removeDocked(sender.pagingBar, true);

  • 1

#10 chefdackel

chefdackel

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 169 posts
  • LocationGermany

Posted 25 September 2014 - 08:33 AM

 

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.


  • 0

#11 delagoutte

delagoutte

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 296 posts

Posted 14 June 2017 - 09:05 AM

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:807...c=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 ?

  • 0

#12 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3430 posts

Posted 14 June 2017 - 11:16 AM

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,


  • 0

#13 delagoutte

delagoutte

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 296 posts

Posted 14 June 2017 - 12:21 PM

thanks


  • 0

#14 multimesut

multimesut

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 73 posts

Posted 17 June 2017 - 01:36 PM

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?


  • 0

#15 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3430 posts

Posted 17 June 2017 - 06:13 PM

Hi,

 

I'm sorry, can you clarify your question again?

 

Best regards,


  • 0

#16 multimesut

multimesut

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 73 posts

Posted 19 June 2017 - 08:26 AM

Hi #Delphi Developer,

 

PageSize is failing for Reflesh. I showed the video problem in detail.

 

Video (download and play);

 

https://drive.google...iew?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,


  • 0

#17 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3430 posts

Posted 20 June 2017 - 05:27 AM

Hi,

 

Can you check with this solution for now ?!:

 

http://forums.unigui...ime/#entry40915

 

Best regards,


  • 0

#18 multimesut

multimesut

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 73 posts

Posted 20 June 2017 - 08:39 AM

Hi,

 

Thank you #Delphi Developer. Code worked!

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

  • 0

#19 multimesut

multimesut

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 73 posts

Posted 20 June 2017 - 09:20 AM

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

  • 0

#20 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3430 posts

Posted 20 June 2017 - 09:23 AM

Hi,

Do you want to do this at runtime or ?
  • 0





Also tagged with one or more of these keywords: UniDBGrid, PageSize, Extension, Plugin

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users