[CLOSED] GridPanel Selected Items Limit

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] GridPanel Selected Items Limit

    Another case where I'm probably just missing something obvious ...

    Is there a practical limit as to how many items in a grid panel can be selected at one time? I'm stress testing my application, which has a grid panel with a store on it. I am using something like this

    function DeleteSelection() {
        var selectedItemsList;
        selectedItemsList = App.MyGridPanel.getRowsValues({ selectedOnly: true});
        Ext.each(selectedItemsList, function(item){
            myRecord = App.MyStore.getAt(App.MyStore.findExact("MyID",item.MyID));
            App.MyStore.remove(myRecord)
        });
        App.MyStore.commitChanges();
    }
    to remove selected items from a store like this:

    <ext:GridPanel ID="MyGridPanel" runat="server" ClientIDMode="Static" AutoScroll="true" MaxHeight="300" Title="My Items" ContextMenuID="MyContextMenu" StoreID="MyStore">
        <ColumnModel>
            <Columns>
                 <ext:Column runat="server" ID="MyIDColumnName" DataIndex="MyID" />
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel runat="server" ID="MySelectionModel" Mode="Multi" />
        </SelectionModel>
        <BottomBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" ID="DeleteButton">
                        <Listeners>
                            <Click Fn="DeleteSelection" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </BottomBar>
    </ext:GridPanel>
    When I have about 350 items in the grid panel, and try to select a large fraction of them (usually around 40 or so), I start seeing anomalies in how the selection is highlighted. I'm also having trouble selecting the last item in the grid.

    Am I missing something obvious?

    Thanks!

    PTR
    Last edited by Baidaly; Oct 17, 2013 at 11:21 PM. Reason: [CLOSED]
  2. #2
    Hello!

    When do you have this problem? When you are selecting items or when you are removing selected items?

    Try to use suspendEvent and resumeEvents

    http://docs.sencha.com/extjs/4.2.1/#...-suspendEvents
    http://docs.sencha.com/extjs/4.2.1/#...d-resumeEvents
  3. #3

    Hmm.... Stylesheet

    Quote Originally Posted by Baidaly View Post
    Hello!

    When do you have this problem? When you are selecting items or when you are removing selected items?

    Try to use suspendEvent and resumeEvents

    http://docs.sencha.com/extjs/4.2.1/#...-suspendEvents
    http://docs.sencha.com/extjs/4.2.1/#...d-resumeEvents
    Baidaly,

    Thanks. I think that will help with some other issues, so will do.

    However, I have another interesting tidbit to add to my issue.

    I had added this to my style sheet:

    .x-grid-row-selected.x-grid-row-over .x-grid-cell
    {
       background-color: #f6eff6 !important;
    
    }

    Removing this style seems to have fixed my problem.
  4. #4
    Quote Originally Posted by Baidaly View Post
    Hello!

    When do you have this problem? When you are selecting items or when you are removing selected items?

    Try to use suspendEvent and resumeEvents

    http://docs.sencha.com/extjs/4.2.1/#...-suspendEvents
    http://docs.sencha.com/extjs/4.2.1/#...d-resumeEvents
    Adding suspendEvents to the Add and Remove functions sped up the removal process dramatically. So I'll keep in mind both suspendEvents and suspendLayouts.

    Only issue now is that if I scroll down the grid and select the last 30 items, then right click to bring up a context menu (I've got the remove button in a context menu now, not a toolbar), the grid scrolls back up to the top, hiding the selected rows. The function does delete the correct (selected) rows, however. Is this expected behavior? Or is there something else I'm not doing?

    Thanks!

    PTR
  5. #5
    Hi,

    To remove selected records just use
    App.MyGridPanel.deleteSelected();
    Code of 'deleteSelected' looks like ('this' is grid in that context)
    var selection = this.getSelectionModel().getSelection();
    
    
    if (selection && selection.length > 0) {
       this.store.remove(selection);
    }
  6. #6
    Quote Originally Posted by ptrourke View Post
    Adding suspendEvents to the Add and Remove functions sped up the removal process dramatically. So I'll keep in mind both suspendEvents and suspendLayouts.

    Only issue now is that if I scroll down the grid and select the last 30 items, then right click to bring up a context menu (I've got the remove button in a context menu now, not a toolbar), the grid scrolls back up to the top, hiding the selected rows. The function does delete the correct (selected) rows, however. Is this expected behavior? Or is there something else I'm not doing?

    Thanks!

    PTR
    Try to use IgnoreRightMouseSelection:

    <ext:RowSelectionModel runat="server" Mode="Multi" IgnoreRightMouseSelection="True" />
  7. #7
    Quote Originally Posted by Vladimir View Post
    Hi,

    To remove selected records just use
    App.MyGridPanel.deleteSelected();
    Code of 'deleteSelected' looks like ('this' is grid in that context)
    var selection = this.getSelectionModel().getSelection();
    
    
    if (selection && selection.length > 0) {
       this.store.remove(selection);
    }


    Thank you both.

    If I want to remove a selection of records from a store that meets a certain criterion (i.e., where one field === a test value), is there a short cut? I'm trying the following, and it's not working (assume that I have tried with and without suspendEvents and suspendLayouts &c.). (This is all variations on the same store.)

    function RemoveClassesInMyGroup(MyGroupID) {
        App.MyStore.each( function(record, id) {
            if (record && record.get('MyGroupID') === MyGroupID) {
                App.MyStore.remove(record);
            }
        });
    
    }
    I discovered I had to use "if (record && [criterion)" because the each loop was iterating after the last item, and I was getting a warning that I couldn't use "get" on an undefined "record".
  8. #8
    Quote Originally Posted by ptrourke View Post
    Thank you both.

    If I want to remove a selection of records from a store that meets a certain criterion (i.e., where one field === a test value), is there a short cut? I'm trying the following, and it's not working (assume that I have tried with and without suspendEvents and suspendLayouts &c.). (This is all variations on the same store.)

    function RemoveClassesInMyGroup(MyGroupID) {
        App.MyStore.each( function(record, id) {
            if (record && record.get('MyGroupID') === MyGroupID) {
                App.MyStore.remove(record);
            }
        });
    
    }
    I discovered I had to use "if (record && [criterion)" because the each loop was iterating after the last item, and I was getting a warning that I couldn't use "get" on an undefined "record".
    It's better to use query method of the Store, which returns a MixedCollection of records that match to your criterion:

    http://docs.sencha.com/extjs/4.2.1/#...e-method-query
  9. #9
    Quote Originally Posted by Baidaly View Post
    It's better to use query method of the Store, which returns a MixedCollection of records that match to your criterion:

    http://docs.sencha.com/extjs/4.2.1/#...e-method-query

    Thanks. Sorry if it seems I am being a pest; I had this working one way, but it was slow, so I'm trying to do it the proper way.

    This is what I have

    function RemoveGroups(){
        App.GroupsGrid.suspendLayouts = true;
        App.MyGrid.suspendLayouts = true;
        var MyGroupList = App.GroupsGrid.getRowsValues({ selectedOnly: true});
        Ext.each(MyGroupList, function(item) {
            records = App.MyStore.query("MyGroupID",item.MyGroupID);
            App.MyStore.remove(records);
        });
       App.MyStore.commitChanges();
       App.MyGrid.suspendLayouts = false;
       App.GroupsGrid.suspendLayouts = false; 
    }
    The query is finding the right records, but they are not being deleted.
  10. #10
    Quote Originally Posted by ptrourke View Post
    Thanks. Sorry if it seems I am being a pest; I had this working one way, but it was slow, so I'm trying to do it the proper way.

    This is what I have

    function RemoveGroups(){
        App.GroupsGrid.suspendLayouts = true;
        App.MyGrid.suspendLayouts = true;
        var MyGroupList = App.GroupsGrid.getRowsValues({ selectedOnly: true});
        Ext.each(MyGroupList, function(item) {
            records = App.MyStore.query("MyGroupID",item.MyGroupID);
            App.MyStore.remove(records);
        });
       App.MyStore.commitChanges();
       App.MyGrid.suspendLayouts = false;
       App.GroupsGrid.suspendLayouts = false; 
    }
    The query is finding the right records, but they are not being deleted.
    Store.query return MixedCollection, so you should use its items property:

    records = App.MyStore.query("MyGroupID",item.MyGroupID).items;
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] MenuPanel dymanic items are not selected
    By ermanni.info in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: May 03, 2013, 12:19 AM
  2. Drag selected items
    By Dominik in forum 1.x Help
    Replies: 1
    Last Post: Apr 11, 2012, 9:50 AM
  3. Recover values in selected items GridPanel
    By Dominik in forum 1.x Help
    Replies: 2
    Last Post: Jun 22, 2010, 8:19 AM
  4. Replies: 0
    Last Post: Feb 01, 2010, 12:42 PM
  5. Replies: 0
    Last Post: Jun 03, 2009, 5:30 PM

Tags for this Thread

Posting Permissions