Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Single Data Source, Multiple Grids with Grouping

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    54

    Default Single Data Source, Multiple Grids with Grouping

    I've created 1 editor grid which works perfectly but currently isn't attached to a live data store, e.g database/xml/etc.

    I have a second grid which was originally a grouping grid populated by a static data array. I've since attempted to move this over to the dynamically entered data in the first grid.

    The store for the editor grid looks like this;

    Code:
    var arrayReader = new Ext.data.ArrayReader( {}, Line); 
    
    var lineStore = new Ext.data.Store( {
        reader : arrayReader,
        data : gridData,
    });
    The code for the group store is this;

    Code:
    var lineStoreGroup = new Ext.data.GroupingStore({
        reader : arrayReader,
        data : gridData,
        sortInfo:{field: 'item_type', direction: "ASC"},
        groupField:'item_type'
    });
    If I point my 2nd (grouped) grid at lineStore and remove the grouping it fills with data from the first grid. However if I point it to lineStoreGroup it remains blank and does not give me any errors in firebug.

    My initial thought is that the code for the editor grid is not populating gridData so lineStoreGroup has nothing to read. I think it's just storing it in memory which is why I get data when I use lineStore.

    This is the code which creates a new row in the editor grid (linesGrid)

    Code:
            linesGrid.getStore().insert(0, new Line( {
                item_type : line_item_type,
                size : line_size,
                quantity : line_quantity,
                sku_reference : line_sku_reference,
                colour : line_colour,
                length : line_length,
                nett_weight : line_nett_weight,
                gross_weight : line_gross_weight,
                customer_reference : line_customer_reference,
                lot : line_lot,
                bank : line_bank,
                customs : line_customs
            }));

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    54

    Default

    What is the best way to check if lineStore is writing to the gridData array?

    EDIT: infact if I do a log on the gridData array it seems to be blank. Am I misunderstanding how array stores work?

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    gridData can't be empty, because it worked in lineStore (at least, that's what you said).

    If gridData is empty then there is something else wrong with code you haven't posted yet.

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Posts
    54

    Default

    Quote Originally Posted by Condor View Post
    gridData can't be empty, because it worked in lineStore (at least, that's what you said).

    If gridData is empty then there is something else wrong with code you haven't posted yet.
    Well using the code above I can add data to the editor grid using lineStore. However if I do a length check on gridData after each insert I get a value of 0. Yes there are records in the grid, so where are they being stored? They certainly aren't being stored in gridData.

    To initialise gridData all I did was this;

    Code:
    var gridData = new Array();

  5. #5
    Sencha User
    Join Date
    Nov 2010
    Posts
    54

    Default

    Here is the code for the summary grid;

    Code:
       var summaryGrid = new Ext.grid.GridPanel({
            store: lineStoreGroup,
            colModel : cm,
            view: new Ext.grid.GroupingView({
                forceFit:true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
            }),
    
            frame:true,
            width: 768,
            height: 550,
            title: 'Summary'
        });
    if I change store to lineStore and remove the view config then it get the same data from the previous editorgrid

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    gridData is only used to initialize the store. It's not used as the actual store storage.

    Try:
    Code:
    var recs = [];
    lineStore.each(function(rec){
      recs.push(rec.copy());
    });
    lineStoreGroup.add(recs);

  7. #7
    Sencha User
    Join Date
    Nov 2010
    Posts
    54

    Default

    Quote Originally Posted by Condor View Post
    gridData is only used to initialize the store. It's not used as the actual store storage.

    Try:
    Code:
    var recs = [];
    lineStore.each(function(rec){
      recs.push(rec.copy());
    });
    lineStoreGroup.add(recs);
    Ah I see that is what I was struggling with, trying to understand why the store wasn't using the array as an actual store.

  8. #8
    Sencha User
    Join Date
    Nov 2010
    Posts
    54

    Default

    Condor,

    Is there a particular reason you're using the .copy() function and not just adding the same rec to the group store?

    I'm adding functionality to the editor grid so the user can remove individual rows. I've got it working so that the remove updates both grids but the first record in the editor grid remains blank. That is achievable by removing the .copy() from the push function. If I leave the .copy() in the push command the lineStoreGroup grid doesn't update once the rows have been removed.

    This should show what I've tried to explain;

    blankfirstline.jpg

    Here is the remove code:

    Code:
    WarehouseStock.removeRow = function() {
        
         linesGrid.stopEditing();
         var s = linesGrid.getSelectionModel().getSelections();
         for(var i = 0, r; r = s[i]; i++){
             linesGrid.getStore().remove(r);
             lineStoreGroup.remove(r);
         }
         lineStoreGroup.sort('item_type', 'ASC');
    }
    Here is the function which adds the new row to the editor grid;

    Code:
    WarehouseStock.newRow = function(){
               var line_item_type = "";
               var line_item_type_id = "";
            var line_size = "";
            var line_quantity = "";
            var line_sku_reference = "";
            var line_colour = "";
            var line_length = "";
            var line_nett_weight = "";
            var line_gross_weight = "";
            var line_customer_reference = "";
            var line_lot = "";
            var line_bank = "";
            var line_customs = "";
            
            
            var previousRow =  linesGrid.getStore().getAt(0); 
            
            if (previousRow) {
                    line_item_type_id = previousRow.get('type_id');
                    line_item_type = previousRow.get('item_type');
                    line_size = previousRow.get('size');
                    line_colour = previousRow.get('colour');
                    line_customer_reference = previousRow.get('customer_reference');
                    line_lot = previousRow.get('lot');
                    line_bank = previousRow.get('bank');
                    line_customs = previousRow.get('customs');
            }
    
            linesGrid.getStore().insert(0, new Line( {
                item_type_id : line_item_type_id,
                item_type : line_item_type,
                size : line_size,
                quantity : line_quantity,
                sku_reference : line_sku_reference,
                colour : line_colour,
                length : line_length,
                nett_weight : line_nett_weight,
                gross_weight : line_gross_weight,
                customer_reference : line_customer_reference,
                lot : line_lot,
                bank : line_bank,
                customs : line_customs
            }));
    
            linesGrid.startEditing(0, 0);
            
            linesGrid.getStore().each(function(rec){
                lineStoreGroup.add(rec.copy());
            });
            lineStoreGroup.sort('item_type', 'ASC');
            lineStoreGroup.groupBy('item_type');
    }

  9. #9
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    A record can only belong to a single store.

    (try setting one of the record field values - you'll notice that it will only update in one of the two grids)

  10. #10
    Sencha User
    Join Date
    Nov 2010
    Posts
    54

    Default

    Quote Originally Posted by Condor View Post
    A record can only belong to a single store.

    (try setting one of the record field values - you'll notice that it will only update in one of the two grids)
    I see what you mean. As I'm making a duplicate, how can I remove it from both stores? I thought using your example above I had both stores using the same array as a data source?

Page 1 of 2 12 LastLast

Similar Threads

  1. Multiple level of grouping in grids
    By venky0589 in forum Ext 2.x: User Extensions and Plugins
    Replies: 312
    Last Post: 23 Oct 2014, 2:26 AM
  2. Multiple level of grouping in grids extension
    By p.vongphrchanh in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 9 Dec 2009, 9:16 AM
  3. Multiple level of grouping in grids
    By fother in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 25 Nov 2008, 3:49 AM
  4. Grouping grids - can they have multiple grouping options
    By Padster in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 11 Aug 2008, 2:17 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •