manager.js

一个简单的Ext例子

var tabPanel = null;
//员工基本信息处理
function listEmployeer(){
    alert("error");
	//tabPanel.add({
		//title:'员工信息列表',
		//iconCls:'tabs',
		//autoLoad:{url:'http://localhost:8080/LEDOA/organization/personal/listPersonal.jsp',callback:this.initSearch,scope:this,scripts: true},//这里一定要是http开头才行
		//closable:true
	//}).show();
	tabPanel.add({
		title:'员工信息列表',
		id:'tab1',
		iconCls:'tabs',   
		autoHeight:true,     
        autoScroll:true,     
        autoWidth:true,  
        closable:true,     
        frame:true,     
        html:'<iframe id="test1" src="http://localhost:8080/LEDOA/listPersonal.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
function listLeave(){
	//tabPanel.add({
		//title:'员工请假列表',
		//iconCls:'tabs',
		//autoLoad:{url:'http://localhost:8080/LEDOA/organization/personal/personLeave.jsp',callback:this.initSearch,scope:this,scripts: true},//这里一定要是http开头才行
		//closable:true
	//}).show();
	tabPanel.add({
		title:'员工请假列表',
		id:'tab2',
		iconCls:'tabs',
		closable:true,         
        frame:true,     
        html:'<iframe id="test2" src="http://localhost:8080/LEDOA/organization/personal/personLeave.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
function listOverTime(){
	tabPanel.add({
		title:'员工请假列表',
		id:'tab3',
		iconCls:'tabs',    
		closable:true,     
        frame:true,     
        html:'<iframe id="test3" src="http://localhost:8080/LEDOA/organization/personal/personOvertime.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
function listTravel(){
	tabPanel.add({
		title:'员工请假列表',
		id:'tab4',
		iconCls:'tabs',    
		closable:true,     
        frame:true,     
        html:'<iframe id="test4" src="http://localhost:8080/LEDOA/organization/customer/customer.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
function listCustomer(){
	tabPanel.add({
		title:'客户信息列表',
		id:'tab5',
		iconCls:'tabs',   
		closable:true,      
        frame:true,     
        html:'<iframe id="test5" src="http://localhost:8080/LEDOA/organization/customer/customer.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
function listDepartment(){
	tabPanel.add({
		title:'部门信息列表',
		id:'tab6',
		iconCls:'tabs',  
		closable:true,       
        frame:true,     
        html:'<iframe id="test6" src="http://localhost:8080/LEDOA/organization/department/department.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
function listAddOrder(){
	tabPanel.add({
		title:'商品入购列表',
		id:'tab7',
		iconCls:'tabs',  
		closable:true,       
        frame:true,     
        html:'<iframe id="test7" src="http://localhost:8080/LEDOA/business/goods/addOrder.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
function listSalary(){
	tabPanel.add({
		title:'工资信息列表',
		id:'tab8',
		iconCls:'tabs',  
		closable:true,       
        frame:true,     
        html:'<iframe id="test8" src="http://localhost:8080/LEDOA/business/salary/listSalary.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
function listAddOther(){
	alert("其他支出登记");
	tabPanel.add({
		title:'其他支出列表',
		id:'tab9',
		iconCls:'tabs',  
		closable:true,       
        frame:true,     
        html:'<iframe id="test9" src="http://localhost:8080/LEDOA/business/other/addOther.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
function listDelOrder(){
	tabPanel.add({
		title:'商品出售列表',
		id:'tab10',
		iconCls:'tabs',  
		closable:true,       
        frame:true,     
        html:'<iframe id="test10" src="http://localhost:8080/LEDOA/business/goods/delOrder.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
function listDelOther(){
	tabPanel.add({
		title:'其他收入列表',
		id:'tab11',
		iconCls:'tabs',  
		closable:true,       
        frame:true,     
        html:'<iframe id="test11" src="http://localhost:8080/LEDOA/business/other/delOther.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
function listGoods(){
	tabPanel.add({
		title:'商品信息列表',
		id:'tab12',
		iconCls:'tabs',  
		closable:true,       
        frame:true,     
        html:'<iframe id="test12" src="http://localhost:8080/LEDOA/business/goods/Goods.html" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>'
	}).show();
}
Ext.onReady(function(){
	//设置树形面板
	var Tree = Ext.tree;
	// 公司组织管理
	var root1 = new Ext.tree.TreeNode({
		id:'root1',
		text:'公司组织管理'
	});
	var a1=new Ext.tree.TreeNode({
		id:'a1',
		icon:'img/user.gif',
		text:'员工信息管理'
	});
	var a2=new Ext.tree.TreeNode({
		id:'a2',
		icon:'img/user.gif',
		text:'部门信息管理'
	});
	var a3=new Ext.tree.TreeNode({
		id:'a3',
		icon:'img/im2.gif',
		href:'javascript:listCustomer();',
		text:'客户信息管理'
	});
	var a11=new Ext.tree.TreeNode({
		id:'a11',
		icon:'img/im2.gif',
		href:'javascript:listEmployeer();',
		text:'员工信息列表'
	});
	var a14=new Ext.tree.TreeNode({
		id:'a14',
		icon:'img/im2.gif',
		href:'javascript:listLeave();',
		text:'员工请假记录'
	});
	var a15=new Ext.tree.TreeNode({
		id:'a15',
		icon:'img/im2.gif',
		href:'javascript:listOverTime();',
		text:'员工加班记录'
	});
	var a16=new Ext.tree.TreeNode({
		id:'a16',
		icon:'img/im2.gif',
		href:'javascript:listTravel();',
		text:'员工出差记录'
	});
	var a21=new Ext.tree.TreeNode({
		id:'a21',
		icon:'img/im2.gif',
		href:'javascript:listDepartment();',
		text:'部门信息列表'
	});
	
	a1.appendChild(a11);
    a1.appendChild(a14);
    a1.appendChild(a15);
    a1.appendChild(a16);
    a2.appendChild(a21);
	root1.appendChild(a1);
    root1.appendChild(a2);
    root1.appendChild(a3);
	var tree = new Tree.TreePanel({
		//el:'tree-div',
		root:root1,
		animate:true,
		enableDD:true,
		border:false,
		rootVisible:true
	});
	//root1.expand(false, false);
    //公司业务管理
    var root2=new Ext.tree.TreeNode({
		id:'root2',
		text:'公司业务管理'
	});
    var b1=new Ext.tree.TreeNode({
		id:'b1',
		icon:'img/user.gif',
		text:'公司财务支出'
	});
	var b11=new Ext.tree.TreeNode({
		id:'b11',
		icon:'img/im2.gif',
		href:'javascript:listAddOrder();',
		text:'购入商品管理'
	});
	var b12=new Ext.tree.TreeNode({
		id:'b12',
		icon:'img/im2.gif',
		href:'javascript:listSalary();',
		text:'员工薪水管理'
	});
	var b13=new Ext.tree.TreeNode({
		id:'b13',
		icon:'img/im2.gif',
		href:'javascript:listAddOther();',
		text:'其他支出登记'
	});
    var b2=new Ext.tree.TreeNode({
		id:'b2',
		icon:'img/user.gif',
		text:'公司财务收入'
	});
	var b21=new Ext.tree.TreeNode({
		id:'b21',
		icon:'img/im2.gif',
		href:'javascript:listDelOrder();',
		text:'商品出售管理'
	});
	var b22=new Ext.tree.TreeNode({
		id:'b22',
		icon:'img/im2.gif',
		href:'javascript:listDelOther();',
		text:'其他收入登记'
	});
	var b3=new Ext.tree.TreeNode({
		id:'b3',
		icon:'img/im2.gif',
		href:'javascript:listGoods();',
		text:'新产品管理'
	});
	var b4=new Ext.tree.TreeNode({
		id:'b4',
		icon:'img/im2.gif',
		text:'任务行程安排'
	});
	b1.appendChild(b11);
    b1.appendChild(b12);
    b1.appendChild(b13);
    b2.appendChild(b21);
    b2.appendChild(b22);
	root2.appendChild(b1);
    root2.appendChild(b2);
    root2.appendChild(b3);
    root2.appendChild(b4);
	var tree2=new Ext.tree.TreePanel({
		//renderTo:"tree",
		root:root2,
		animate:true,
		enableDD:true,
		border:false,
		rootVisible:true
	});
	//root2.expand(false,false);
    //系统基本管理
    var root3=new Ext.tree.TreeNode({
		id:'root3',
		text:'系统基本管理'
	});
    var c1=new Ext.tree.TreeNode({
		id:'c1',
		icon:'img/user.gif',
		text:'个人信息管理'
	});
	var c11=new Ext.tree.TreeNode({
		id:'c11',
		icon:'img/im2.gif',
		text:'修改个人密码'
	});
	var c12=new Ext.tree.TreeNode({
		id:'c12',
		icon:'img/im2.gif',
		text:'修改个人信息'
	});
	var c2=new Ext.tree.TreeNode({
		id:'c2',
		icon:'img/im2.gif',
		text:'注销系统'
	});
	c1.appendChild(c11);
    c1.appendChild(c12);
	root3.appendChild(c1);
    root3.appendChild(c2);

   var tree3=new Ext.tree.TreePanel({
		//renderTo:"tree3",
		root:root3,
		animate:true,
		enableDD:true,
		border:false,
		rootVisible:true
	});
	//root3.expand(false,false);
	//Border
	var tabActions = new Ext.Panel({
		frame:true,
		title:'Actions',
		collapsible:true,
		contentEl:'actions',
		titleCollapse:true
    	});
	var actionPanel = new Ext.Panel({
		id:'action-panel',
		region:'west',
		split:true,
		collapsible:true,
		collapseMode:'mini',
		width:200,
		minWidth:150,
		border:false,
		baseCls:'x-plain',
		//items:[tabActions]
		layout:"accordion",
		layoutConfig:{
			animate:true
		},
		items:[
			{title:"子元素1",items:[tree]},
			{title:"子元素2",items:[tree2]},
			{title:"子元素3",items:[tree3]}
		]
    	});
	tabPanel = new Ext.TabPanel({
		region:'center',
		deferredRender:false,
		autoScroll:true,
		margins:'0 4 4 0',
		items:[{id:'tab1',contentEl:'tabs',title:'Main',closable:false,autoScroll:true}]
    	});
	var topPanel = new Ext.Panel({
		region:"north",
		height:90,
		//html: '<div style='background-color:#666',width:1024,height:100'></div>'<img src="img/dsc_0079.jpg" width="800" height="100" />'
		html:"<div align='center' style='background-color:#C1D8F9;height:90'><span><font size=10><strong>深圳市斯达光电技术有限公司</strong></font></span></div>" 
	});
    	viewport = new Ext.Viewport({
		layout:'border',
		items:[topPanel,actionPanel,tabPanel]
    	});
    	root1.expand(false, false);
    	root2.expand(false, false);
    	root3.expand(false, false);
    	
});