在项目中需要用到这样一个画面:整个画面分上、中、下三部分,上面部分放置ToolBar,里面包括4个Menu,每个Menu里面又追加Item,Item的名称是每个机能画面的名称;中间部分是主面板,点击Menu中的一个Item,主面板要切换到相应的机能画面;下面部分相当于一个控制台,要求同步显示后台程序运行产生的Log和各种错误、警告信息。现在有以下两个问题需要请教各位前辈高手,请不吝指教!!!
问题一:点击不同的Item,怎样让主面板切换到对应的机能面板且保持上下两个部分不变?
问题二:如何实现下面Log的同步显示?请各位多多发言,即使只是一个指导思想,也感激万分!!!
下面是已经做出的一个基本框架source:Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Ext.onReady(function(){
Ext.QuickTips.init();
var data = [['value1', 'text1'], ['value2', 'text2'], ['value11', 'text11'], ['value12', 'text12']];
var store = new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: data
});
var panelObj = new Ext.form.FormPanel({
region: 'center',
tbar: [{
xtype: 'tbbutton',
text: '主机能1',
menu: [{
id: 'AAAAAA',
text: '机能1',
handler: menuItemClick
}, {
id: 'BBBBBB',
text: '机能2',
handler: menuItemClick
}, {
id: 'CCCCCC',
text: '机能3',
handler: menuItemClick
}]
}, '-', {
xtype: 'combo',
store: store,
mode: 'local',
triggerAction: 'query',
displayField: 'text',
valueField: 'value'
}, '-', {
xtype: 'tbbutton',
text: '主机能2',
menu: [{
id: 'DDDDDD',
text: '机能1',
handler: menuItemClick
}, {
id: 'EEEEEE',
text: '机能1',
handler: menuItemClick
}, '-', {
id: 'FFFFFF',
text: '机能1',
handler: menuItemClick
}]
}],
items: [{
xtype: 'panel',
id: 'mainContent',
title: '主面板',
contentEl: 'systemShow',
frame: true,
height: 900
}]
});
var viewportObj = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
height: 50,
html: 'heads'
}, panelObj, {
region: 'south',
frame: true,
height: 150,
title: 'LOG'
}],
renderTo: Ext.getBody()
});
});function menuItemClick(item){
var mainPanel = Ext.getCmp('mainContent');
var goalPanel = item.id + "Panel"; mainPanel.setTitle(item.text);
mainPanel.show();
}
问题一:点击不同的Item,怎样让主面板切换到对应的机能面板且保持上下两个部分不变?
问题二:如何实现下面Log的同步显示?请各位多多发言,即使只是一个指导思想,也感激万分!!!
下面是已经做出的一个基本框架source:Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Ext.onReady(function(){
Ext.QuickTips.init();
var data = [['value1', 'text1'], ['value2', 'text2'], ['value11', 'text11'], ['value12', 'text12']];
var store = new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: data
});
var panelObj = new Ext.form.FormPanel({
region: 'center',
tbar: [{
xtype: 'tbbutton',
text: '主机能1',
menu: [{
id: 'AAAAAA',
text: '机能1',
handler: menuItemClick
}, {
id: 'BBBBBB',
text: '机能2',
handler: menuItemClick
}, {
id: 'CCCCCC',
text: '机能3',
handler: menuItemClick
}]
}, '-', {
xtype: 'combo',
store: store,
mode: 'local',
triggerAction: 'query',
displayField: 'text',
valueField: 'value'
}, '-', {
xtype: 'tbbutton',
text: '主机能2',
menu: [{
id: 'DDDDDD',
text: '机能1',
handler: menuItemClick
}, {
id: 'EEEEEE',
text: '机能1',
handler: menuItemClick
}, '-', {
id: 'FFFFFF',
text: '机能1',
handler: menuItemClick
}]
}],
items: [{
xtype: 'panel',
id: 'mainContent',
title: '主面板',
contentEl: 'systemShow',
frame: true,
height: 900
}]
});
var viewportObj = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
height: 50,
html: 'heads'
}, panelObj, {
region: 'south',
frame: true,
height: 150,
title: 'LOG'
}],
renderTo: Ext.getBody()
});
});function menuItemClick(item){
var mainPanel = Ext.getCmp('mainContent');
var goalPanel = item.id + "Panel"; mainPanel.setTitle(item.text);
mainPanel.show();
}
我觉得你中间用选项卡tabpanel比较好,可以方便切换。当点击tabpanel的时候,也就是tabpanel中的选项
卡触发激活activeTab事件或show事件的时候,就在你说的log控制台显示消息。只有log控制台的消息是随
tab的点击而动态显示的,当点击菜单的时候,添加一个新panel。当panel存在的时候,会自动将存在的panel显示处理
每次只显示一个tabpanel。将其他的tabpanel隐藏。这样可以做到中间变得其他的不变的目的。
大致思路就这样。
id:goalPanel
//xxxxx
});
mainPanel.add(goalPanelExtObjRef);
mainPanel.setActiveItem(goalPanel);