Ext.ux.LiveDataPanel = Ext.extend(Ext.Panel, {
	limit: 12,
	currPage: 0,
	loadingTxt: Ext.LoadMask.prototype.msg,
	loadingIndicatorTxt: '{0} di {1} prodotti',
	loading: false,
	triggerScrollOffset: 150,
	border: false,
	frame: true,

	initComponent: function(){
		var offset = this.frame ? 35 : 20;
		this.autoScroll = true;
		this.items = [{
			itemId: 'dv',
			xtype: 'dataview',
			emptyText: '<div style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#6699CC; padding-left:10px;">Raggiungere la sottocategoria desiderata nei seguenti modi:<br />- Cliccando sul triangolino alla sinistra della categoria<br />- Mediante "doppio click" sulla cartella corrispondente alla categoria da espandere</div>',
			loadingText: 'Caricamento prodotti...',
			singleSelect: true,
			autoScroll: true,
			width: this.width - offset,
			tpl: this.tpl,
			store: this.store,
			itemSelector: this.itemSelector,
			frame: false,
			border: false,
			bodyStyle: 'background-color: #fff'
		}];
		Ext.ux.LiveDataPanel.superclass.initComponent.call(this);
		this.dv = this.getComponent('dv');
		this.dv.on('click', function(v, idx, node, e) {
			if (e.target.parentNode.tagName == "A") {
    			//console.info(v, idx, node, e);
    			document.location = e.target.parentNode.href;
				return true;
    		} else if(e.target.tagName == "A") {
    			document.location = e.target.href;
				return true;
    		}
		});
	},
	onRender: function(ct, pos){
		Ext.ux.LiveDataPanel.superclass.onRender.apply(this, arguments);
		this.indicatorEl = this.el.createChild({
			tag: 'div',
			cls: 'load-indicator',
			html: '<img src="images/loader.gif" /><span></span>'
		});
		this.dv.store.on('load', function(){
			this.indicatorEl.anchorTo(this.el, 'br-br?', [-25, -10]);
		}, this);
		this.body.on('scroll', function(e, t){
			var ds = this.dv.store;
			if ((t.scrollTop + t.clientHeight + this.triggerScrollOffset >= t.scrollHeight) && ds.getCount() !== ds.getTotalCount() && this.loading === false) {					
				this.nextPage();				
			}
		}, this);
	},
	nextPage: function(pageNum) {		
		this.currPage++;
		this.updateIndicator();
		this.indicatorEl.show();		
		var start = this.currPage * this.limit;			
		this.loading = true;
		this.dv.store.load({
			params: {
				start: start,
				limit: this.limit					
			},
			callback: function() {
				this.indicatorEl.hide();					
				this.loading = false;
			},
			scope: this,
			add: true
		});
	},
	updateIndicator: function() {
		var txt = String.format(this.loadingIndicatorTxt, this.currPage * this.limit, this.dv.store.getTotalCount());
		this.indicatorEl.down('span').update(txt);
	}
});
Ext.reg('livedatapanel', Ext.ux.LiveDataPanel);

Ext.DataView.override({
    onAdd : function(ds, records, index){
        if(this.all.getCount() == 0){
            this.refresh();
            return;
        }
        var nodes = this.bufferRender(records, index), n, a = this.all.elements;		
        if(index < this.all.getCount()){
            n = this.all.item(index).insertSibling(nodes, 'before', true);
            a.splice.apply(a, [index, 0].concat(nodes));
        }else{
			nodes.reverse();
            n = this.all.last().insertSibling(nodes, 'after', true);
			nodes.reverse();
            a.push.apply(a, nodes);
        }
        this.updateIndexes(index);
    }
});