layout
本章任务
1.layout
app = {};
Ext.onReady(function() {
self.resizeTo(screen.availWidth, screen.availHeight);
self.moveTo(0, 0);
var navHandler = function(direction) {
// 这段程序可以包含控制导航步骤所需的业务逻辑。
// 在需要的时候它将调用setActiveItem方法，管理导航按钮的状态，
// 处理任何可能需要的逻辑分支，处理可能的操作，像退出或操作完成，等等。
// 在现实的实现中，一个完整的安装向导实现会非常复杂，它与复杂的需求有关。
// 可能需要要扩展CardLayout类。
Ext.Msg.alert(direction);
};
// var action = new Ext.Action({
// text : 'Action 1',
// handler : function() {
// Ext.example.msg('Click', 'You clicked on "Action 1".');
// },
// iconCls : 'blist'
// });
var handleAction = function(action) {
Ext.util.CSS.swapStyleSheet("theme","extjs/resources/css/xtheme-"+action+".css");
};
/**
* 顶部,工具栏
*/
var tbar = new Ext.Panel({
region : 'north',
height : 30,
tbar : [{
xtype : 'buttongroup',
items : [{
text : '系统首页',
iconCls : 'sysIndex',
iconAlign : 'top',
scale : 'medium'
}, {
text : '系统简介',
iconCls : 'synopsis',
iconAlign : 'top',
scale : 'medium'
}, {
text : '系统帮助',
iconCls : 'help',
iconAlign : 'top',
scale : 'medium'
}, {
text : '重新登录',
iconCls : 'syslogin',
iconAlign : 'top',
scale : 'medium'
}, {
text : '修改密码',
iconCls : 'changePwd',
iconAlign : 'top',
scale : 'medium'
}, {
text : '安全退出',
iconCls : 'sysLogout',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 刷新 ',
iconCls : 'refresh',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 后退 ',
iconCls : 'goBack',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 换肤 ',
iconCls : 'goBack',
menu : [{
text : 'orange',
handler : handleAction
.createCallback('orange')
}, {
text : 'red5',
handler : handleAction
.createCallback('red5')
}, {
text : 'silverCherry',
handler : handleAction
.createCallback('silverCherry')
}, {
text : 'gray',
handler : handleAction
.createCallback('gray')
}, {
text : 'blue',
handler : handleAction
.createCallback('blue')
}, {
text : 'calista',
handler : handleAction
.createCallback('calista')
}, {
text : 'indigo',
handler : handleAction
.createCallback('indigo')
}, {
text : 'slate',
handler : handleAction
.createCallback('slate')
}],
iconAlign : 'top',
scale : 'medium'
}]
}, {
xtype : 'buttongroup',
items : [{
text : ' 打印1 ',
iconCls : 'print',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 打印2 ',
iconCls : 'print',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 打印3 ',
iconCls : 'print',
iconAlign : 'top',
scale : 'medium'
}, {
text : ' 打印4 ',
iconCls : 'print',
iconAlign : 'top',
scale : 'medium'
}]
}]
});
/**
* 中间,选项卡
*/
var tablepanel = new Ext.TabPanel({
region : 'center'
});
app.addTab = function(obj) {
var tab = Ext.getCmp(obj.id);
if (tab) {
tablepanel.setActiveTab(tab);
} else {
var newTab = new Ext.Panel({
id : obj.id,
title : obj.innerHTML,
closable : true,
autoScroll : true,
html : ''
});
//var newTab = new Ext.Panel({title:'panel1',html:'panel1panel1panel1panel1panel1panel1panel1'});
switch (obj.id) {
case '2' :
newTab.html = '<iframe src="page/content_basedate.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '3' :
newTab.html = '<iframe src="page/content_quality.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '4' :
newTab.html = '<iframe src="page/content_stone.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '5' :
newTab.html = '<iframe src="page/images.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '7' :
newTab.html = '<iframe src="page/content01.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '9' :
newTab.html = '<iframe src="page/content_custom.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
//板房管理
case '11' :
newTab.html = '<iframe src="page/content033.html"" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '12' :
newTab.html = '<iframe src="page/content034.html"" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '13' :
newTab.html = '<iframe src="page/content035.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '14' :
newTab.html = '<iframe src="page/content036.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '15' :
newTab.html = '<iframe src="page/content037.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '16' :
newTab.html = '<iframe src="page/content038.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '17' :
newTab.html = '<iframe src="page/content039.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
//库存管理
case '19' :
newTab.html = '<iframe src="page/content04.htm" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '20' :
newTab.html = '<iframe src="page/content04.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '21' :
newTab.html = '<iframe src="page/content04.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '22' :
newTab.html = '<iframe src="page/content04.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
// <!--报表管理(财务)-->
case '24' :
newTab.html = '<iframe src="page/content_repoet_month.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '25' :
newTab.html = '<iframe src="page/content_repoet_week.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '26' :
newTab.html = '<iframe src="page/content_repoet_gather.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '27' :
newTab.html = '<iframe src="page/content_salary.jsp" width="100%" height="100%" frameBorder="0"></iframe>';
break;
// <!--人事管理-->
case '29' :
newTab.html = '<iframe src="page/content_dept.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '30' :
newTab.html = '<iframe src="page/content_employment.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
case '31' :
newTab.html = '<iframe src="page/content_salary_level.html" width="100%" height="100%" frameBorder="0"></iframe>';
break;
}
tablepanel.add(newTab);
tablepanel.setActiveTab(newTab);
}
}
/**
* 底部,状态栏
*/
var wordCount = new Ext.Toolbar.TextItem('深圳市中鹏科技有限公司');
var charCount = new Ext.Toolbar.TextItem('操作员: ${session.userName}');
var clock = new Ext.Toolbar.TextItem('当前时间: 0');
var bbar = new Ext.Panel({
region : 'south',
height : 21,
bbar : new Ext.ux.StatusBar({
id : 'word-status',
// These are just the standard toolbar TextItems we created above.
// They get
// custom classes below in the render handler which is what gives
// them their
// customized inset appearance.
statusAlign : 'right', // the magic config
items : [
wordCount,
'-',
' '
+ ' '
+ ' '
+ ' '
+ ' ',
charCount,
'-',
' '
+ ' '
+ ' '
+ ' '
+ ' '
+ ' '
+ ' '
+ ' ',
clock]
}),
items : {
listeners : {
render : {
fn : function() {
Ext.fly(clock.getEl().parent())
.addClass('x-status-text-panel').createChild({
cls : 'spacer'
});
// Kick off the clock timer that updates the clock el
// every
// second:
Ext.TaskMgr.start({
run : function() {
Ext
.fly(clock.getEl())
.update('当前时间:'
+ new Date()
.format('Y年m月d日 g:i:s A'));
},
interval : 1000
});
},
delay : 100
}
}
}
});
/**
* 西边,菜单栏
*/
var accordion = new Ext.Panel({
region : 'west',
width : 200,
split : true,
collapsible : true,
layout : 'accordion',
layoutConfig : {
titleCollapse : true
},
// items : [{
// title : '期初管理',
// html : '<a href="#" οnclick="javascript:app.addTab(this)" id="userManage">用户管理</a><br/><a href="#" οnclick="javascript:app.addTab(this)" id="userManage">用户管理</a>'
// }, {
// title : '第二栏',
// html : '第二栏'
// }]
items : [{
title : '期初管理',
border : false,
iconCls : 'basedate',
contentEl : 'basedate'
}, {
title : '客户管理',
border : false,
iconCls : 'custom',
contentEl : 'custom'
}, {
title : '主管专栏',
border : false,
iconCls : 'manage',
contentEl : 'manage'
}, {
title : '板房管理',
border : false,
iconCls : 'factory',
contentEl : 'factory'
}, {
title : '库存管理(财务)',
border : false,
iconCls : 'lib',
contentEl : 'lib'
}, {
title : '报表管理(财务)',
border : false,
iconCls : 'report',
contentEl : 'report'
}, {
title : '人事管理',
border : false,
iconCls : 'hrm',
contentEl : 'hrm'
}]
});
/**
* 东边,属性类别
*/
var propertyGrid = new Ext.grid.PropertyGrid({
region : 'east',
width : 200,
source : {
"userName)" : "方勇",
"userPass" : "123456"
}
});
var viewPort = new Ext.Viewport({
layout : 'border',
items : [tbar, bbar, accordion, propertyGrid, tablepanel]
});
})
本章目标
1. 理解layout
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
