管理系统都会有自己的logo界面，在Extjs 中，通常有三种方式可以实现页面logo + 工具栏
1.使用纯html方式实现，在定义的north panel中html配置项目，例如如下例子:
-
var head = new Ext.Panel({
-
region : 'north',
-
border : false,
-
bodyStyle: 'background:#385975',
-
height : 100,
-
html:'
'
-
+'
当前用户: '
-
+user_name+'|修改密码 | 退出
',
-
})
我之前的logo是这样做，发现工具栏的handler函数太难定义了，scope的问题很多，如果使用全局变量的话，又显得很凌乱，不推荐这种方法
2.使用html 加 toolbar 的组合，例如：
-
var head = new Ext.Panel({
-
region : 'north',
-
border : false,
-
bodyStyle: 'background:#385975',
-
height : 100,
-
html:'
',
-
tbar:['->',
-
{
-
xtype:'label',
-
text:'当前用户:'
-
height:30,
-
},
-
'-',{
-
xtype:'label',
-
text:user_name,
-
height:30
-
},
-
'-',{
-
text:'退出系统',
-
handler:this.onLogout,
-
}
-
}]
-
})
本例没有亲测，但是网上很多朋友都是这么做的，思路就是这个样子，这样做也是能实现的，但是如果你是追求完美的人，就继续往下
3.覆盖extjs自带css，通过API 可以看到Ext.Toolbar一个配置项 "ctCls" 其解释为：
An optional extra CSS class that will be added to this component's container. This can be useful for adding customized styles to the container or any of its children using standard CSS rules.
意思就是我们可以自定义自己的css 影响toolbar container 或者 toolbar items的样式，背景图我们需要在包含toolbar的容器内设置，toolbar 的组件需要在toolbar容器内设置,看下面的例子
-
//顶部
-
buildHeader : function(){
-
return {
-
xtype:'panel',
-
region : 'north',
-
border:false,
-
height:60,
-
bbar:new Ext.Toolbar({
-
defaults:{height:60},
-
ctCls: 'mainToolbar', //自定义css
-
items:[
-
'->',{ //button align to right
-
xtype:'label',
-
text:'当前用户:',
-
height:20,
-
style: 'font-weight:bold;font-size:16px',
-
},{
-
xtype:'tbspacer', //2个label之间的间隔
-
height:60 // 这里高度设置非常重要
-
},{
-
xtype:'label',
-
height:20,
-
html:''+cookieUtil.get('loginCookie')+'',
-
},{
-
xtype:'tbseparator',
-
height:20
-
},{
-
xtype:'button',
-
height:20,
-
text:'修改密码',
-
scope:this,
-
handler:function(){}
-
},{
-
xtype:'tbseparator',
-
height:20
-
},{
-
xtype:'button',
-
height:20,
-
text:'退出系统',
-
scope:this,
-
handler:this.onLogOut
-
}]
-
})
-
}
-
},
mainToolbar css:
-
.mainToolbar .x-toolbar{
-
border-color:#444444;
-
background:#375975 url(../images/logo.gif) no-repeat top left;
-
}
-
.mainToolbar .x-toolbar .x-toolbar-cell{
-
vertical-align: bottom; // 设置button的垂直对齐方式，默认是middle，按照习惯应该在bottom
-
}
-
-
.mainToolbar .x-btn-noicon .x-btn-small .x-btn-text{
-
background-color: #A4D3EE;// 设置button背景色，如果不设置，默认会是toolbar的背景色，如果是深色背景色，会看不清button上面的text
-
}
-
.mainToolbar .x-toolbar .xtb-spacer {
-
width: 5px; // 上文说的label间隔距离默认是2px，
-
}
这种方式我觉得无论在美观，还是在可行性上面都是最好的，值得推荐~ 最后附一张本例结果图，
阅读(6256) | 评论(0) | 转发(0) |
