1.如图片所示，希望能给出设计的代码，例子简单的布局就行，数据不要求多只要一个就可以，
2.关于ext的语法我已经掌握和了解，希望在给代码的时候能给出一些注释。难理解的地方。
3.布局只要简单些就行，但是和图片不要差别太大。谢谢：）分数我会追加到400分每天追加100.要是分数少，可以提出我会继续追加。项目让我设计我只设计出大概的轮廓，但是与要求有些差距，因此寻找高手希望给出个代码例子。
如下图:
2.关于ext的语法我已经掌握和了解，希望在给代码的时候能给出一些注释。难理解的地方。
3.布局只要简单些就行，但是和图片不要差别太大。谢谢：）分数我会追加到400分每天追加100.要是分数少，可以提出我会继续追加。项目让我设计我只设计出大概的轮廓，但是与要求有些差距，因此寻找高手希望给出个代码例子。
如下图:
但是我看起来实在太晦涩了。
这个软件地址：http://www.oapro.com
试用网址：http://xuezhi1682.sdsx14.100-su.cn 总经理 用户名:LXZ 密码:123456
市场部主管 用户名:LH 密码:123456
财务部主管 用户名:mqx 密码:123456
普通员工 用户名:wu 密码:123456
系统管理员 用户名:admin 密码:123456
希望能给你们些帮助。里面的源码都被公司加密过，但是我已经用eclipse把代码给解密开。但是理解起来不行。希望能有搞ext的人，给个简单的布局就行 不用像它写的一样复杂。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xxOA管理系统</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
<style>
.icon-Function-menu {background-image:url(images/icon/Function-menu.gif) !important;}
</style>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'img/s.gif';
</script>
</head>
<body>
<div id="loading-mask" style=""></div>
<div id="loading">
<div class="loading-indicator">
</div>
<script type="text/javascript" src="p.js"></script>
<div id="north">
<p class="api-title"><b>xxOA管理系统</b>
<div id="toolbar"></div>
</div><div id="west">
</div>
<div id="south">
<div style="float:left;margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;">
Power By: <span style="color:blue">xxOA管理系统</span>
</div>
<div style="float:right;margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;"> 版权所有：xxOA管理系统</div>
</div>
<div id="center"></div>
</body>
</html>
var tab = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true
});
Ext.onReady(function(){
//layout
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:80
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25
}),{
region:'west',
id:'west-panel',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
margins:'0 0 0 0',
layout:'accordion',
title:'XXX管理',
collapsible :true,
layoutConfig:{
animate:true
},
items: [
{
title:'用户管理',
border:false,
html:'<div id="tree1" style="overflow:auto;width:100%;height:100%"></div>'
//iconCls:'nav'
},{
title:'信息中心',
border:false,
//iconCls:'settings',
html:'<div id="tree2" style="overflow:auto;width:100%;height:100%"></div>'
},{
title:'系统设置',
border:false,
//iconCls:'settings',
html:'<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'
}]
},
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[
{
contentEl:'center',
title: '桌面',
closable:false,
autoScroll:true
}]})//初始标签页
] });
//-----------------------------------------
// 创建工具条
var tb = new Ext.Toolbar()
tb.render('toolbar');
// 为工具条添加4个按钮
tb.add({
text: '行政办公',
iconCls : "icon-Function-menu",
handler: function() {
Ext.Msg.alert('提示', '新建');
}
},{
text: '行政管理',
iconCls : "icon-Function-menu",
handler: function() {
Ext.Msg.alert('提示', '修改');
}
},{
text: '个人事物',
iconCls : "icon-Function-menu",
handler: function() {
Ext.Msg.alert('提示', '删除');
}
},{
text: '事务处理',
iconCls : "icon-Function-menu",
handler: function() {
Ext.Msg.alert('提示', '新建');
}
});
//-------------------------------------------
var root2=new Ext.tree.TreeNode({
id:"root2",
text:"树的根"
}); var c1=new Ext.tree.TreeNode({
id:'c1',
icon:'img/im2.gif',
text:'信息征集',
listeners:{'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="UserAdd.htm"></iframe>'
});
}
tab.setActiveTab(n);
}
}
}); var c2=new Ext.tree.TreeNode({
id:'c2',
icon:'img/im2.gif',
text:'bug征集',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="UserAdd.htm"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});
var c22=new Ext.tree.TreeNode({
id:'c22',
icon:'img/im2.gif',
text:'实例征集'
}); var c3=new Ext.tree.TreeNode({
id:'c3',
icon:'img/im2.gif',
text:'给我留言'
}); var c4=new Ext.tree.TreeNode({
id:'c4',
icon:'img/im2.gif',
text:'留言列表'
}); c1.appendChild(c2);
c1.appendChild(c22);
root2.appendChild(c1);
root2.appendChild(c3)
var tree2=new Ext.tree.TreePanel({
renderTo:"tree1",
root:root2, //对应 根节点
animate:true,
enableDD:false,
border:false,
rootVisible:false,
containerScroll: true
});
});
// 创建工具条 这里位置出现问题 不知道怎么让它在north的底部。
这个是我用ror + ext做的ext的一个小example,，本来是准备尝试用这个来做项目的，但之后发现，我没有那个时间完全移值到ext上，放弃。http://taito.javaeye.com/blog/250835#
你把代码拷贝到你页面引入的JS文件中看看效果先.
这CSDN,上传个图片都这么麻烦......Ext.onReady(function(e){
//路径由你自己的EXT路径决定
Ext.BLANK_IMAGE_URL = "../framework/ext2.0/resources/images/default/s.gif";
Ext.QuickTips.init();
//TOP显示
var top = new Ext.Panel({
//这里可以自己写HTML实现,不需要EXT的代码
region : 'north',
height : 60,
html : '你可以自己用HTML实现'
});
var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];
//CENTER显示
var center = new Ext.Panel({
//这里是除了top之外的部分
tbar : [{
text : 'Btn 1',
iconCls : '' //这里设置按钮前面的图标
},'-',{
text : 'Btn 2'
},'->',{
text : '刷新'
},'-',{
text : '帮助'
},'-',{
text : '退出'
}],
region : 'center',
layout : 'border',
items : [{
//左边的树
region : 'west',
width : 200,
//layout : 'accordion',
title : 'Title',
collapsible : true,
split : true,
items : [{
region : 'north',
height : 200,
html : 'treeview'
},{
region : 'center',
title : '未读信息',
collapsible : true
}]
},{
region : 'center',
xtype : 'tabpanel',
activeTab : 0,
items : [{
title : '办公桌面',
layout : 'column',
autoScroll : true,
items : [{
columnWidth : .33,
border : false,
bodyStyle : 'padding:10 10 10 10;',
items : [{
title : '123',
iconCls : '', //指定小图标
tools : tools,
collapsible : true
}]
},{
columnWidth : .33,
border : false,
bodyStyle : 'padding:10 10 10 10;',
items : [{
title : '321',
collapsible : true
}]
},{
columnWidth : .33,
border : false,
bodyStyle : 'padding:10 10 10 10;',
items : [{
title : '231',
collapsible : true
}]
},{
columnWidth : .33,
border : false,
bodyStyle : 'padding:10 10 10 10',
items : [{
title : '111',
collapsible : true
}]
}]
}]
}]
//items : [left,sub_center]
});
var viewport = new Ext.Viewport({
layout : 'border',
items : [top,center]
});
});
预览图：我的目录结构如下：我主要做了这样一些改进：
1 对js文件作了拆分，即方便阅读， 也方便管理，我按照layout把js拆分为north.js, west.js, south.js, index.js,每个js分别作对应区域的对象的构造。
2 layout对应的各个region，以及每个region里面包含的对象都显示的定义出来， 这样方便操作。
时间太少， 所以所有的图标我都只用了一个，但是我定义在style里面， 楼主只要添加一些style，更改一下对象的iconCls属性就可以了。
中心区域的9个panel楼主也可以拿出来显示的定义他们， 这样操作起来更好。
http://blog.csdn.net/sunxing007/archive/2009/03/17/3999705.aspx由于代码太多， 贴的不好看。
如果你想要一个打包， 给个message.
所以如果你用了更高的版本， 不知道会不会引起兼容问题。
好，发我邮箱里面 [email protected] 或者给个地址我去下。你的这个页面很好 正是我想要实现的 大致功能 谢谢。。
能发我份吗 目前正在学习Extjs 学的头都大了 mail：[email protected]
我也打算要一份，能否给我呢？[email protected]
为了生活 我正在努力学习
[email protected]
[email protected]
谢谢了~~~~~~~~··
谢谢了！！！
ext-3.0.0\examples\portal\portal.html的例子，可以拖动比较简单
定位就有点难度，参照一下
例外：58楼west.js中
//layout:'column',改为layout:'menu',//菜单布局，才能看到上下两部分
mail:[email protected]
谢谢了啊！！
[email protected]
我邮箱：[email protected]