Extjs Panel显示两行Toolbar
2018-02-05 本文已影响190人
w_w_wei
测试环境： 3.1
使用的方法，先创建一个主Panel名为inPanel，为展示的内容， 此panel能设置一个Toolbar，为显示在下方的Toolbar。
再创建一个Panel名为bigPanel显示inPanel， 在添加一个Toolbar，这个ToolBar会显示在最上面。
最后用Viewport显示出来
<html>
<head>
<title>Extjs 3.1</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="/extjs/resources/css/ext-all.css">
<script src="/extjs/adapter/ext/ext-base.js"></script>
<script src="/extjs/ext-basex.js"></script>
<script src="/extjs/ext-all.js"></script>
</head>
<body>
<script>
Ext.onReady(function(){
var inPanel = new Ext.Panel({
tbar: new Ext.Toolbar({
items:['关键字',
new Ext.form.TextField({
fieldLabel: 'good',
id: 'filter_keyword',
name: 'filter_keyword'
}),
'用户名',
new Ext.form.TextField({
id: 'filter_username',
name: 'filter_username'
}),]
}), //第二行Toolbar
layout: 'fit',
items: [new Ext.Panel({
html:'<div>good</div>' //主窗体
})]
});
var bigPanel = new Ext.Panel({
tbar : new Ext.Toolbar({
items:[
{
text: '刷新日志',
}, {
text: '配置选项',
}, {
text: '导出日志',
id: 'exportlog',
}]
}), //第一行Toolbar
layout:'fit',
items: [inPanel]
});
new Ext.Viewport({
layout: 'fit',
items: [bigPanel]
});
});
</script>
</body>
</html>
效果图
