quicklaunch.js

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

Ext.ux.Toolbar.QuickLaunch = function(config) {
	Ext.apply(this, config);
	this.events = {
		itemClick: true,
		menuhide: true,
		menushow: true,
		menutriggerover: true
	};
	this.el = Ext.DomHelper.append(document.body,{
		tag:'div',
		cls:'ux-quicklaunch'
	});
	this.expandElDiv = Ext.DomHelper.append(this.el,{
		tag:'div',
		cls:'ux-quicklaunch-expand-div'
	});
	this.ulWrapper = Ext.DomHelper.append(this.el,{
		tag:'div',
		cls:'ux-quicklaunch-list-wrapper'
	});
	this.ul = Ext.DomHelper.append(this.ulWrapper,{
		tag:'ul',
		cls:'ux-quicklaunch-list'
	});
	this.ulEdge = Ext.DomHelper.append(this.ul,{
		tag:'li',
		cls:'ux-quicklaunch-edge'
	});
	Ext.get(this.expandElDiv).setVisibilityMode(Ext.Element.DISPLAY);
	Ext.get(this.expandElDiv).hide();
	Ext.get(this.ul).createChild({
		cls:'x-clear'
	});
	this.listItems = new Ext.util.MixedCollection();
	this.buttons = new Ext.util.MixedCollection();
	this.menu = new Ext.menu.Menu();
	this.menu.on('beforeshow',function() {
		this.menu.removeAll();
		var startAt = Math.round(this.resizer.getEl().getWidth()/this.iconWidth)-1;
		for (i = startAt; i < this.store.getCount(); i++) {
			var record = this.store.getAt(i);
			this.menu.add({
				text:record.data[this.tipField],
				icon:record.data[this.iconField],
				listeners: {
					click: this.onMenuItemClick.createDelegate(this,[i],true),
					scope: this
				}
			});
		}
	},this);
	this.expandEl = new Ext.Button({
		cls:'x-btn-icon',
		iconCls: 'quickstart-menubutton',
		renderTo: this.expandElDiv,
		menu: this.menu,
		template: new Ext.Template(
            	'<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
				'<td class="ux-quickstart-button-left"><i>&#160;</i></td><td class="ux-quickstart-button-center"><em unselectable="on"><button class="x-btn-text" type="{1}" style="height:28px;">{0}</button></em></td><td class="ux-quickstart-button-right"><i>&#160;</i></td>',
				'</tr></tbody></table>'
		)
	});
	this.resizer = new Ext.Resizable(this.el,{
		handles:'e',
		minWidth:22,
		enabled: this.resizable,
		dynamic:true,
		widthIncrement: this.iconWidth,
		resizeChild:this.ulWrapper,
		pinned:true
	});
	this.resizer.on('resize',this.onResize,this);
	this.resizer.on('beforeresize',this.onBeforeResize,this);
	this.setWidth(16);
	Ext.ux.Toolbar.QuickLaunch.superclass.constructor.call(this,this.el);
	if (!this.store) {
		var data = config.data;
		if (!data) {
			data = [[]];
		}
		this.store = new Ext.data.SimpleStore({data:data,fields:[this.iconField,this.tipField]});
	}
	this.store.on('load',this.refreshButtons,this);
	this.store.on('add',this.addButtons,this);
	this.store.on('remove',this.removeButtons,this);
	this.store.on('clear',this.clearButtons,this);
	this.store.on('update',this.updateButtons,this);
};

Ext.extend(Ext.ux.Toolbar.QuickLaunch,Ext.Toolbar.Item,{
	enable:Ext.emptyFn,
	filterOptRe : /^(?:scope|delay|buffer|single)$/,
	resizable:true,
	items: new Ext.util.MixedCollection(),
	disable:Ext.emptyFn,
	focus:Ext.emptyFn,
	iconField: 'icon',
	tipField: 'tip',
	iconWidth: 22,
	refreshButtons: function(store,records,options) {
		this.clearButtons(store);
		this.addButtons(store,records,0);
	},
	addButtons: function(store,records,index) {
		for (i = 0, currentIndex = index, end = index+records.length; i < records.length; i++, currentIndex++) {
			this.addButton(records[i],currentIndex);
		}
		if (this.listItems.getCount()*this.iconWidth > this.resizer.getEl().getWidth()) {
			Ext.get(this.expandElDiv).show();
			this.setWidth(this.resizer.getEl().getWidth());
		}
	},
	addButton: function(record,index) {
		if (index >= this.items.getCount()) {
			var li = Ext.get(this.ul).createChild({tag:'li'},this.ulEdge);
			this.listItems.insert(index,li);
			var button = new Ext.Button({
				renderTo:li,
				scope:this,
				icon:record.data[this.iconField],
				cls:'x-btn-icon',
				tooltip:record.data[this.tipField],
				listeners: {
					scope: this,
					click: this.onButtonClick
				}
			})
			this.buttons.insert(index,button);
		} else {
			var prevLi = this.listItems.get(index)
			var li = Ext.get(this.ul).createChild({tag:'li'},prevLi);
			this.listItems.insert(index,li);
			var button = new Ext.Button({
				renderTo:li,
				scope:this,
				icon:record.data[this.iconField],
				cls:'x-btn-icon',
				tooltip:record.data[this.tipField]
			})
			this.buttons.insert(index,button);			
		}
	},
	clearButtons: function() {
		for (i = this.listItems.getCount()-1; i >= 0; i--) {
			var button = this.buttons.get(i);
			button.destroy();
			this.buttons.remove(button);
			var li = this.listItems.get(i);
			Ext.get(li).remove();
			this.listItems.remove(li);
		}
	},
	removeButtons: function(store,record,index) {
		var button = this.buttons.get(index);
		button.destroy();
		this.buttons.remove(button);
		var li = this.listItems.get(index);
		Ext.get(li).remove();
		this.listItems.remove(li);		
	},
	updateButton: function(store,record,operation) {
		if (operation == Ext.data.Record.EDIT) {
			var index = store.indexOf(record);
			var button = this.buttons.get(index);
			Ext.get(button.getEl()).child('button:first').dom.style.backgroundImage = 'url('+record.data[this.iconField]+')';
			Ext.get(button.getEl()).child('button:first').dom.qtip = record.data[this.tipField];
		}
	},
	setWidth: function(width) {
		this.resizer.resizeTo(width,this.resizer.getEl().getHeight());
	},
	getWidth: function() {
		return Ext.get(this.el).getWidth();
	},
	onBeforeResize: function() {
		Ext.get(this.expandElDiv).hide();
	},
	onResize: function(resizable,width,height,e) {
		if (this.listItems.getCount() * this.iconWidth > this.resizer.getEl().getWidth()) {
			Ext.get(this.expandElDiv).show();
		} else {
			Ext.get(this.expandElDiv).hide();
		}
		Ext.get(this.el).setWidth(this.resizer.getEl().getWidth() + this.expandEl.getEl().getWidth()+6);
	},
    addListener : function(eventName, fn, scope, o){
        if(typeof eventName == "object"){
            o = eventName;
            for(var e in o){
                if(this.filterOptRe.test(e)){
                    continue;
                }
                if(typeof o[e] == "function"){
                    // shared options
                    this.addListener(e, o[e], o.scope,  o);
                }else{
                    // individual options
                    this.addListener(e, o[e].fn, o[e].scope, o[e]);
                }
            }
            return;
        }
        o = (!o || typeof o == "boolean") ? {} : o;
        eventName = eventName.toLowerCase();
        var ce = this.events[eventName] || true;
        if(typeof ce == "boolean"){
            ce = new Ext.util.Event(this, eventName);
            this.events[eventName] = ce;
        }
        ce.addListener(fn, scope, o);
    },
	on: function(eventName, fn, scope, o) {
		this.addListener(eventName, fn, scope, o);
	},
	onButtonClick: function(button,e) {
		var record = this.store.getAt(this.buttons.indexOf(button));
		this.fireEvent('itemClick',button,record);
	},
	onMenuItemClick: function(item,e,index) {
		var record = this.store.getAt(index);
		var button = this.buttons.get(index);
		this.fireEvent('itemClick',button,record);
	},
    fireEvent : function(){
        if(this.eventsSuspended !== true){
            var ce = this.events[arguments[0].toLowerCase()];
            if(typeof ce == "object"){
                return ce.fire.apply(ce, Array.prototype.slice.call(arguments, 1));
            }
        }
        return true;
    }
});
Ext.reg('quicklaunch',Ext.ux.Toolbar.QuickLaunch);