Moving all items from one GridPanel to another causes "long running Javascript" warning in IE8

[sylmcm]

Hi,

I would like to implement a webpage where selecting items involves
moving items from one GridPanel to another

very similar to the Ext.Net Example
https://examples1.ext.net/#/GridPane...ous/Two_Grids/
(this example also exhibits the problem in IE8)

unfortunately moving all items causes a "long running Javascript" warning to be displayed in IE8

the problem areas appear to be SelectionModel.SelectAll() and GridView.Refresh()

our target browsers are IE 6/7/8 and our GridPanels may contain 5,000 items or more

I have spent several hours investigating overriding GridPanel JS
http://www.vinylfox.com/patterns-using-ext-js-override/

and using the setTimeout pattern mentioned here
http://www.julienlecomte.net/blog/2007/10/28/

sadly, it is not a simple fix and I ended up overriding a lot of code

Is there a workaround available for Ext.net 1.1/1.2 please,
or am I faced with investigating ExtJs 4.0 GridPanel options?

Many Thanks for your help

S

[Vladimir]

You can use setTimeout for copy records

<script type="text/javascript">
        var CountrySelector = {
            add : function (source, destination) {
                source = source || GridPanel1;
                destination = destination || GridPanel2;
                if (source.hasSelection()) {
                    var records = source.selModel.getSelections();
                    source.deleteSelected();
                    CountrySelector.timeoutCopy(records, destination);                   
                }
            },
            addAll : function (source, destination) {
                source = source || GridPanel1;
                destination = destination || GridPanel2;
                var records = source.store.getRange();
                source.store.removeAll();                
                CountrySelector.timeoutCopy(records, destination);
            },
            
            copyRecords : function (records, destination) {
                for(var i = 0, len = records.length; i<len; i++){
                    destination.store.addSorted(records[i]);
                }
            },
            
            timeoutCopy : function (records, destination) {
                setTimeout(function(){
                    CountrySelector.copyRecords(records.splice(0, 50), destination);
                    if(records.length>0){
                        CountrySelector.timeoutCopy(records, destination);
                    }    
                }, 0);
            },
            
            addByName : function (name) {
                if (!Ext.isEmpty(name)) {
                    var result = Store1.query("Name", name);
                    if (!Ext.isEmpty(result.items)) {
                        GridPanel1.store.remove(result.items[0]);
                        GridPanel2.store.add(result.items[0]);                        
                    }
                }
            },
            addByNames : function (name) {
                for (var i = 0; i < name.length; i++) {
                    this.addByName(name[i]);
                }
            },
            remove : function (source, destination) {
                this.add(destination, source);
            },
            removeAll : function (source, destination) {
                this.addAll(destination, source);
            }
        };
    </script>

[sylmcm]

Thank you Vladimir for your quick response and example code

- I will give this a try and let you know

One more minor complication -
rather than removing items from the source GridPanel I was setting their row css style via getRowClass
with styles such as

.active-row {
	color: #555555;
} 

.inactive-row {
	color: #a6a5a5;
} 

var getRowClass = function (item) {

	if (selectedItems == null || selectedItems.length == 0) {
		return "active-row";
	}

	if (selectedItems.indexOf(item.json.Id) != -1) {
		return "inactive-row";
	} else {
		return "active-row";
	}
}

and issuing a GridView.refresh() to get the the source Grid to update - this was also causing a "long running javascript" warning
perhaps I can set the affected rows to be "dirty" and have the GridView only refresh those?

Many Thanks for your help

S

[Vladimir]

You can use refreshRow javascript method of grid view
Please consider to use BufferView or grid paging