scrolleditem.js

是在ext2.0的基础上开发的一个web桌面系统

Ext.namespace("Ext.ux");
Ext.namespace("Ext.ux.Toolbar");
Ext.ux.Toolbar.ScrolledItem = function() {
	this.el = Ext.DomHelper.append(document.body,{
		tag:'div',
		cls:'ux-scrolleditem'
	});
	this.resizer = new Ext.Resizable(this.el,{
		handles:'e',
		minWidth:200,
		enabled: this.resizable
	});
	this.scrollRight = Ext.DomHelper.append(this.el,{
		tag:'div',
		cls:'x-tab-scroller-right',
		style:'height:22px'
	});
	Ext.get(this.scrollRight).addClassOnOver('x-tab-scroller-right-over');
	this.rightRepeater = new Ext.util.ClickRepeater(this.scrollRight,{
		interval: this.scrollRepeatInterval,
		handler: this.onScrollRight,
		scope: this
	});
	this.scrollLeft = Ext.DomHelper.append(this.el,{
		tag:'div',
		cls:'x-tab-scroller-left',
		style:'height:22px'
	});
	Ext.get(this.scrollLeft).addClassOnOver('x-tab-scroller-left-over');
	this.leftRepeater = new Ext.util.ClickRepeater(this.scrollLeft,{
		interval: this.scrollRepeatInterval,
		handler: this.onScrollLeft,
		scope: this
	});
	this.scrollArea = Ext.DomHelper.append(this.el,{
		tag:'div',
		cls:'ux-scrolleditem-strip-wrap'
	});
	this.scrollAreaList = Ext.DomHelper.append(this.scrollArea,{
		tag:'ul',
		cls:'ux-scrolleditem-strip'
	});
	this.scrollAreaListEdge = Ext.DomHelper.append(this.scrollAreaList,{
		tag:'li',
		cls:'ux-scrolleditem-edge'
	});
	Ext.get(this.scrollAreaList).createChild({
		cls:'x-clear'
	});
	Ext.ux.Toolbar.ScrolledItem.superclass.constructor.call(this,this.el);
	Ext.get(this.scrollLeft).hide();
	Ext.get(this.scrollRight).hide();
};
Ext.extend(Ext.ux.Toolbar.ScrolledItem,Ext.Toolbar.Item,{
	enable:Ext.emptyFn,
	resizable:true,
	items: new Ext.util.MixedCollection(),
	disable:Ext.emptyFn,
	focus:Ext.emptyFn,
	activeItem: null,
	enableScroll:true,
	scrollRepeatInterval:400,
	scrollDuration: .35,
	animScroll: true,
	scrolling:true,
	addButton: function(config) {
		if (config instanceof Array) {
			var buttons = [];
			for (var i = 0, len = config.length; i < len; i++) {
				buttons.push(this.addButton(config[i]));
			}
			return buttons;
		}
		var b = config;
		if (!(config instanceof Ext.Toolbar.Button)) {
			b = config.split ?
				new Ext.Toolbar.SplitButton(config) :
				new Ext.Toolbar.Button(config);
		}
		var li = Ext.get(this.scrollAreaList).createChild({tag:'li'},this.scrollAreaListEdge);
		b.render(li);
		this.items.add(b);
		this.updateScrollButtons();
		this.setActiveItem(b);
		return b;
	},
	removeItem: function(item) {
		var index = this.items.indexOf(item);
		this.items.remove(item);
		this.updateScrollButtons();
		index = Math.min(index,this.items.getCount()-1);
		this.setActiveItem(this.items.get(index));
	},
	addText: function(text) {
		var item = this.addItem(new Ext.Toolbar.TextItem(text));
		this.updateScrollButtons();
		this.setActiveItem(item);
		return item;
	},
	addItem: function(item) {
		var li = Ext.get(this.scrollAreaList).createChild({tag:'li'},this.scrollAreaListEdge);
		item.render(li);
		this.items.add(item);
		this.setActiveItem(item);
		this.updateScrollButtons();
		return item;
	},
	addElement: function(el) {
		var item = this.addItem(new Ext.Toolbar.Item(el));
		this.setActiveItem(item);
		this.updateScrollButtons();
		return item;
	},
	addFill: function() {
		var item = this.addItem(new Ext.Toolbar.Fill());
		this.setActiveItem(item);
		this.updateScrollButtons();
		return item;
	},
	addSpacer: function() {
		var item = this.addItem(new Ext.Toolbar.Spacer());
		this.setActiveItem(item);
		this.updateScrollButtons();
		return item;
	},
	addSeparator: function() {
		var item = this.addItem(new Ext.Toolbar.Separator());
		this.setActiveItem(item);
		this.updateScrollButtons();
		return item;
	},
	add: function() {
		var a = arguments,l = a.length;
		for ( var i = 0; i < l; i++) {
			var el = a[i];
			if (el.isFormField) {
				this.addField(el);
			} else if (el.render) {
				this.addItem(el);
			} else if (typeof el == "string") {
				if (el == 'separator' || el == '-') {
					this.addSeparator();
				} else if (el == ' ') {
					this.addSpacer();
				} else if (el == '->') {
					this.addFill();
				} else {
					this.addText(el);
				}
			} else if (el.tagName) {
				this.addElement(el);
			} else if (typeof el == 'object') {
				if (el.xtype) {
					this.addField(Ext.ComponentMgr.create(el,'button'));
				} else {
					this.addButton(el);
				}
			}
		}
	},
	addDom: function(config,returnEl) {
		var li = Ext.get(this.scrollAreaList).createChild({tag:'li'},this.scrollAreaListEdge);
		Ext.DomHelper.overwrite(li,config);
		var ti = new Ext.Toolbar.Item(li.firstChild);
		ti.render(li);
		this.items.add(ti);
		this.setActiveItem(ti);
		this.updateScrollButtons();
		return ti;
	},
	addField: function(field) {
		var li = Ext.get(this.scrollAreaList).createChild({tag:'li'},this.scrollAreaListEdge);
		field.render(li);
		var ti = new Ext.Toolbar.Item(li.firstChild);
		ti.render(li);
		this.items.add(ti);
		this.setActiveItem(ti);
		this.updateScrollButtons();
		return ti;
	},
	getScrollAnim: function() {
		return {
			duration: this.scrollDuration,
			callback: this.updateScrollButtons,
			scope: this
		};
	},
	getScrollIncrement: function() {
		this.lastItemWidth = this.items.get(this.items.getCount()-1).getEl().getWidth();
		return (this.scrollIncrement || this.lastItemWidth+2);
	},
	getScrollArea: function() {
		return parseInt(Ext.get(this.scrollArea).dom.clientWidth,10) || 0;
	},
	getScrollPos: function() {
		return parseInt(Ext.get(this.scrollArea).dom.scrollLeft,10) || 0;
	},
	getScrollWidth: function() {
		return Ext.get(this.scrollAreaListEdge).getOffsetsTo(this.scrollArea)[0] + this.getScrollPos();
	},
	onScrollRight: function() {
		if (this.items.getCount() < 1) { return; }
		var sw = this.getScrollWidth()-this.getScrollArea();
		var pos = this.getScrollPos();
		var s = Math.min(sw,pos+this.getScrollIncrement());
		if (s != pos) {
			this.scrollTo(s,this.animScroll);
		} else {
		}
	},
	onScrollLeft: function() {
		if (this.items.getCount() < 1) { return; }
		var pos = this.getScrollPos();
		var s = Math.max(0,pos-this.getScrollIncrement());
		if (s != pos) {
			this.scrollTo(s,this.animScroll);
		}
	},
	updateScrollButtons: function() {
		var pos = this.getScrollPos();
		Ext.get(this.scrollLeft)[pos == 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
		Ext.get(this.scrollRight)[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
	},
	setActiveItem: function(item) {
		this.activeItem = item;
		this.delegateUpdates();
	},
	delegateUpdates: function() {
		if (this.enableScroll) {
			this.autoScroll();
		}
	},
	autoScroll: function() {
		var count = this.items.getCount();
		var ow = Ext.get(this.el).dom.offsetWidth;
		var tw = Ext.get(this.el).dom.clientWidth;
		var wrap = Ext.get(this.scrollArea);
		var cw = wrap.dom.offsetWidth;
		var pos = this.getScrollPos();
		var l = Ext.get(this.scrollAreaListEdge).getOffsetsTo(this.scrollArea)[0]+pos;
		if (!this.enableScroll || count < 1 || cw < 20) {
			return;
		}
		wrap.setWidth(tw);
		if (l <= tw) {
			wrap.dom.scrollLeft = 0;
			if (this.scrolling) {
				this.scrolling = false;
				wrap.removeClass('x-scrolleditem-scrolling');
				Ext.get(this.scrollLeft).hide();
				Ext.get(this.scrollRight).hide();
			}
		} else {
			if (!this.scrolling) {
				wrap.addClass('x-scrolleditem-scrolling');
			}
			tw -= wrap.getMargins('lr');
			wrap.setWidth(tw > 20 ? tw : 20);
			if (!this.scrolling) {
				Ext.get(this.scrollLeft).show();
				Ext.get(this.scrollRight).show();
			}
			this.scrolling = true;
			if (pos > (l-tw)) {
				wrap.dom.scrollLeft = l-tw;
			} else {
				this.scrollToItem(this.activeItem,true);
			}
			this.updateScrollButtons();
		}
	},
	scrollToItem: function(item,animate) {
		item = item.el.dom.parentNode;
		if (!item) { return; }
		var el = item;
		var pos = this.getScrollPos(), area = this.getScrollArea();
		var left = Ext.fly(el).getOffsetsTo(this.scrollArea)[0]+pos;
		var right = left+el.offsetWidth;
		if (left < pos) {
			this.scrollTo(left,animate);
		} else if (right > (pos+area)) {
			this.scrollTo(right-area,animate);
		}
	},
	scrollTo: function(pos,animate) {
		Ext.get(this.scrollArea).scrollTo('left',pos,animate ? this.getScrollAnim() : false);
		if (!animate) {
			this.updateScrollButtons();
		}
	},
	setWidth: function(width) {
		this.resizer.resizeTo(width,this.resizer.getEl().getHeight());
		this.autoScroll();
	},
	getWidth: function() {
		return Ext.get(this.el).getWidth();
	}
});