1. #31
    Sencha Premium Member dscoular's Avatar
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    dscoular is on a distinguished road

      0  

    Default


    Hi Annie,

    Quote Originally Posted by aghextjs View Post
    Hi Doug-

    Did you figure out what's happening? I'd like to know. I was out of town last week so didn't get a chance to look at this. I'll try to look at it soon, might have some time tomorrow.

    Annie
    I'm not entirely sure what's happening but I did come up with a work-around. The problem is with the Paging toolbar. I updated my onDeleteIncident() method to be aware when the last record on a page was being removed and set the current page to be the previous one:

    Code:
    onDeleteIncident: function(event) {
            console.log("Delete Incident button was clicked...")
            if (this.selectedRecords) {
                var myRecords = this.selectedRecords
                this.getMemCasesStore().remove(myRecords)
                var afterPageData = this.getToolbar().getPageData()  // Get our page data after removal.
                if (afterPageData.currentPage > afterPageData.pageCount) {
                    // We need to go to the previous page.
                    this.getMemCasesStore().loadPage(afterPageData.pageCount)
                }
                else {
                    // Load our new store with the new set of records.
                    this.getMemCasesStore().load()
                }
            }
        },
    This seems to work but now when I delete *all* records from *all* pages I cannot seem to create new records. The new record will appear briefly until the code calls the Paging toolbar's refresh method and then is lost.

    I've created a new sencha fiddle with the new code which exhibits the new problem.

    https://fiddle.sencha.com/fiddle/58g/preview

    Delete all records one by one and then try creating a new one (sorry it's a pain to delete all 28 records).

    Any help or thoughts hugely appreciated.

    Cheers,

    Doug
    "The big print giveth and the small print taketh away."

  2. #32
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    59
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Default


    Hi Doug,

    I went back to your first post (#29) and got a Fiddle set up to play around with. I sorta had to merge your Fiddle and one I had previously created to get it to actually run (not sure why). Anyways, I changed the code in the onDelete.

    First, I commented out the store.load() call that you are making after deleting the record from the store. I'm not sure why you are loading again, Your store should be up-to-date after removing the record.

    Second, I used some of your newer logic, checking if the current page is after the "last" page and instead of doing a toolbar.refresh(), called toolbar.moveLast() instead. It looks like this (remember I said this is mashup of your fiddle and mine, hence the "simpsons" store instead of what you had)

    PHP Code:
        onDeleteIncident: function(event) {
            
    console.log("Delete Incident button was clicked...");
            var 
    toolbar this.getToolbar(),
                
    pageData;
            if (
    this.selectedRecord) {
                
    this.getSimpsonsStore().remove(this.selectedRecord);
            }
            
    //this.getSimpsonsStore().load();  // REMOVED this - not sure why reloading
            
    pageData toolbar.getPageData();
            if (
    pageData.currentPage pageData.pageCount) {
                
    toolbar.moveLast();
            } else {
                
    toolbar.doRefresh();
            }
        } 
    By doing this, I saw the records move up on the page as records were deleted and also went to the last page instead of seeing page 0 of 0.

    Let me know if this works for you.

    Annie


  3. #33
    Sencha Premium Member dscoular's Avatar
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    dscoular is on a distinguished road

      0  

    Default


    Hi Annie,

    I went back to your first post (#29) and got a Fiddle set up to play around with. I sorta had to merge your Fiddle and one I had previously created to get it to actually run (not sure why). Anyways, I changed the code in the onDelete.

    First, I commented out the store.load() call that you are making after deleting the record from the store. I'm not sure why you are loading again, Your store should be up-to-date after removing the record.
    I found I needed to call the store's load routine to get the grid to update. Presumably, some event was generated which the Paging toolbar took notice of. I've adopted your mechanism of calling the Paging toolbar's doRefresh() and moveLast() methods.

    Second, I used some of your newer logic, checking if the current page is after the "last" page and instead of doing a toolbar.refresh(), called toolbar.moveLast() instead. It looks like this (remember I said this is mashup of your fiddle and mine, hence the "simpsons" store instead of what you had)
    I had similar problems with getting any of our sencha fiddles to run. The only way I could get them to run was to choose "Open Outside of Fiddle..." in the menu with the "Sharing" icon.


    The problem I am now having is when I delete all records in the store and then try and create a new record, that record doesn't show up even if I call doRefresh().

    I tried to fork a copy of your fiddle to implement a creation form and submission method that would use your Simpsons store but I couldn't get it to work.

    I've updated the Sencha Fiddle I had that demonstrates the problem and I've reduced the data store items. The preview of the fiddle is here:

    https://fiddle.sencha.com/fiddle/58g/preview

    The actual Sencha fiddle is here (but I can never get either mine or yours to run without running it as an external preview):

    https://fiddle.sencha.com/#fiddle/58g

    If you simply delete all four records and then try and create a new record you'll, hopefully, see my problem.

    Any thoughts or insights hugely appreciated.

    Cheers,

    Doug
    "The big print giveth and the small print taketh away."

  4. #34
    Sencha User
    Join Date
    Mar 2012
    Posts
    18
    Vote Rating
    1
    mamkash is on a distinguished road

      0  

    Default


    Hi Doug,

    The paging store what you are using needs some corrections, like after inserting or removing records , rebuidindexmap should be done and also few other things. Please follow the paging store available at the below github repository.

    https://github.com/bbalasateesh/Ext.ux.data.PagingStore.

    Mamatha

  5. #35
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    59
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Default


    Doug,

    I don't know what happened to my Fiddles, but they are no longer working for me either. Besides trying to run with 5.0.x.
    Quote Originally Posted by dscoular View Post
    If you simply delete all four records and then try and create a new record you'll, hopefully, see my problem.

    Any thoughts or insights hugely appreciated.
    I was able to fork your fiddle and run it in preview mode to this one: https://fiddle.sencha.com/fiddle/5fe/preview

    I
    made a very simple code change, in GridController.onCreateIncidentSubmit, I changed this.getToolbar().doRefresh() to this.getToolbar().moveLast(). If you have all records deleted, you are showing page 0 of 0, so if you try to refresh, you are still showing page 0 of 0. moveLast will show the added record. Of course, it depends on the behavior you want when you add a new record. Do you want to always add the record to the end, or does it show up in the middle of the store. You might just need logic similar to before, either doRefresh (if current page > 0) or moveLast().

    As for the version of the plugin at https://github.com/bbalasateesh/Ext.ux.data.PagingStore, give it a try. I looked at the changes and I'm not sure about the plugin actually calling load, it's dictating a specific user experience that you may or may not want. I didn't like the changes, which is why I didn't copy them into the version I created.

    Either way, let me know what solution you go with.

    Annie

  6. #36
    Sencha Premium Member dscoular's Avatar
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    dscoular is on a distinguished road

      0  

    Default


    Hi Annie,

    Quote Originally Posted by aghextjs View Post
    I made a very simple code change, in GridController.onCreateIncidentSubmit, I changed this.getToolbar().doRefresh() to this.getToolbar().moveLast(). If you have all records deleted, you are showing page 0 of 0, so if you try to refresh, you are still showing page 0 of 0. moveLast will show the added record. Of course, it depends on the behavior you want when you add a new record. Do you want to always add the record to the end, or does it show up in the middle of the store. You might just need logic similar to before, either doRefresh (if current page > 0) or moveLast().

    As for the version of the plugin at https://github.com/bbalasateesh/Ext.ux.data.PagingStore, give it a try. I looked at the changes and I'm not sure about the plugin actually calling load, it's dictating a specific user experience that you may or may not want. I didn't like the changes, which is why I didn't copy them into the version I created.

    Either way, let me know what solution you go with.

    Annie
    I tried the version at https://github.com/bbalasateesh/Ext.ux.data.PagingStor but it didn't seem to make any difference to my problem.

    I've implemented your suggestion of using the moveLast() method after creation and it appears to work perfectly.

    I'm quite amazed at the amount of low level work an ExtJS developer has to be concerned with when, with any other widget toolkit, I'd just specify the store (local or remote), the selection model, the grid and I'd merely remove or insert to the store and the grid would handle all aspects of highlighting and pagination for me. I guess ExtJS still has quite a way to go before it's like using a desktop toolkit.

    Anyway, thanks for providing this great user extension which bridges the gap in the meantime.

    Cheers,

    Doug
    "The big print giveth and the small print taketh away."

  7. #37
    Sencha User
    Join Date
    Sep 2013
    Posts
    12
    Vote Rating
    0
    aaman is on a distinguished road

      0  

    Default


    Hi All

    I have an array store and i am using PagingStore to achieve paging, but the PagingToolBar never shows more then 1 page.when i checked the store I realized that the store contains only 8 records( which is pagesize i specified). Doesn't the store contain all the records and the paging toolbar should take care of the record distribution?

  8. #38
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    59
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Default


    The active data set of the store will only match the page size, but the paging tool bar should be hooked into the total number of records and the current page. From the unit tests on the github site you'll see something like this:

    PHP Code:
        t.is(myStore.data.length3'Store is paged');
        
    t.is(myStore.allData.length10'All data is there');
        
    t.is(myStore.getTotalCount(), 10'Total count looks at allData'); 
    So, the totalCount is 10, but there are only 3 records in the store. All the data from the store is saved off in the allData property. When you move to the next/previous page, the active data set is updated.

    The unit tests aren't fully working w/Ext JS 4.2.1 right now. I want to look into it, but don't have much time at the moment.

  9. #39
    Sencha User
    Join Date
    Sep 2013
    Posts
    12
    Vote Rating
    0
    aaman is on a distinguished road

      0  

    Default


    Thx for reply , I just saw that PagingToolBar's store.allData contains all the records and store.data contains only the pageSize records.
    So that suggests the store which PagingToolBar is using contains the correct data, but still it shows only 0 page for 50 recoreds with page size of 5. But I noted that store.nextPage() shows null.


    Following is how i am making the store
    mystore= new myFolder.util.PagingStore({
    fields: [{
    .....
    }],
    data: data,
    pageSize: 5 ,
    proxy: {
    type: 'memory',
    reader: {
    type: 'json',
    root:'items'
    }
    }
    });

    and this is how i am using pagingToolBar in Grid.
    bbar: [{
    xtype: 'PagingToolBar',
    itemId:'toolBar',
    pageSize: 5,
    store: store,
    displayInfo: true,
    displayMsg: '{0} - {1} of {2}',
    emptyMsg: "No topics to display"
    }]


    I am using Sencha 4.2.


    Thx

  10. #40
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    59
    Vote Rating
    4
    aghextjs is on a distinguished road

      0  

    Default


    Here is my store definition (using MVC), in Ext JS 4.1.1

    PHP Code:
    Ext.define('Admin.store.MyStore', {
        
    extend'Ext.ux.data.PagingStore',
        
    alias'store.store',
        
    model'Admin.model.MyModel',
        
    pageSize50,
        
    proxy: {
            
    type'ajax',
            
    reader: {
                
    type'json',
                
    root'rows'
            
    }
        }}); 
    And here is the toolbar:

    PHP Code:
    {
        
    xtype'pagingtoolbar',
        
    itemId'pagingBar',
        
    dock'top',
        
    displayInfotrue,
        
    displayMsg'Displaying records{0} - {1} of {2}',
        
    emptyMsg'No records to display',
        
    store'MyStore'

    The only obvious thing I see in your code is that your store is "mystore" and then you are setting the pagingtoolbar to "store"... Not sure if that is just a copy/paste thing.