portalmanager.js

一个简单的Ext例子

/**
 * 门户管理器
 */
divo.admin.portal.PortalManager = function(_portletPre) {
	// ----------------- 私有属性 ----------------------
	var portletDefinitions = [{
		id : 'google',
		text : 'Google Home',
		url : "http://www.google.cn/"
	}, {
		id : 'javaeye',
		text : 'My Blog',
		url : "http://fangzhouxing.javaeye.com/"
	}];
	//other possible config format:
	//
	// use xtype:
	//
	//	id : 'product',
	//	text : 'Product',
	//	xtype : "panel.test.ProductGridPanel"
	//
	// use detail config:
	//
	//	id : 'media1',
	//	text : 'FLASH Demo',
	//	xtype : "mediapanel",
	//	config : { mediaCfg:{
	//	   mediaType:'SWF',
    //      url: '/media/media/clock.swf',
    //       controls:true,
    //       start:true,
    //       width: 150,
    //       height:150,
    //       params: { wmode : 'transparent' } 
    //  }}

	var portletPre = _portletPre
	var colNumCombo, portletMenu
	var portalId, portalState, portal

	// ----------------- 私有方法 ----------------------
	// 在portletDefinitions中添加前缀
	function adjustPortletDefinitions() {
		for (var i = 0; i < portletDefinitions.length; i++) {
			portletDefinitions[i].id = portletPre + portletDefinitions[i].id
		}
	}

	// 创建门户管理用工具条控件
	function createToolbar() {
		var tb = []
		tb.push('->')

		portletMenu = new Ext.ux.ColumnMenu({
        	columnHeight: 100,
        	columnWidth: 148,
			id : portletPre + 'menu',
			items : getPortletMenuItems()
		})
		tb.push({
			text : 'Select Content...',
			iconCls : 'bmenu',
			menu : portletMenu
		})
		tb.push({
			text : 'Columns'
		})

		colNumCombo = new Ext.form.ComboBox({
			store : [[1, '1'], [2, '2'], [3, '3'], [4, '4']],
			typeAhead : true,
			width : 40,
			triggerAction : 'all',
			editable : false,
			selectOnFocus : true
		})
		colNumCombo.on("select",onColNumChanged,this)

		tb.push(colNumCombo)
		return tb
	}

	// 生成内容菜单项
	function getPortletMenuItems() {
		var items = []
		for (var i = 0; i < portletDefinitions.length; i++) {
			items.push({
				text : portletDefinitions[i].text,
				hideOnClick:false,
				checked : false,
				checkHandler : onItemCheck
			})
		}
		return items
	}

	// 选择内容菜单项时
	function onItemCheck(item, checked) {
		var portletId = getPortletId(item.text)
		if (!checked) {
			portal.removePortlet(portletId);
			portal.doLayout();
		} else {
			var p = portal.showPortlet({
				text : item.text,
				id : portletId,
				checked : true
			});
			portal.doLayout();
			portalState.restoreCollapseState([p]);
		}
		portalState.save();
	}

	// 门户窗口关闭时
	function onPortletChanged(portletId, checked) {
		var index = getItemIndex(portletId)
		portletMenu.items.itemAt(index).setChecked(checked, true); //第2个参数表示suppressEvent
	}

	// 栏目数改变时
	function onColNumChanged(o) {
		var colNum = o.getValue()
		if (colNum != portalState.getColNum()) {
			portalState.saveColNum(colNum)
			portal.restorePortlets(true)
		}
	}

	//通过名称获取id
	function getPortletId(text) {
		for (var i = 0; i < portletDefinitions.length; i++) {
			if (portletDefinitions[i].text == text)
				return portletDefinitions[i].id
		}
	}
	
	//通过id获得索引号
	function getItemIndex(id) {
		for (var i = 0; i < portletDefinitions.length; i++) {
			if (portletDefinitions[i].id == id)
				return [i]
		}
	}

	// -------------------- public方法 -----------------------
	return {
		/**
		 * 初始化
		 */
		init : function(_portalId, _portalState) {
			portalId = _portalId
			adjustPortletDefinitions()

			portalState = _portalState;

			portal = Ext.ComponentMgr.get(portalId)
			portal.setPortletDefinition(portletDefinitions)
			portal.setPortalState(portalState)

			portal.on('portletchanged', onPortletChanged, this)
			
			colNumCombo.setValue(portalState.getColNum())
			portal.restorePortlets();
		},
		getTbar : function() {
			return createToolbar()
		}

	};
}
// EOP