ExtJS中面板切换的有关问题请高手指教(!)
ExtJS中面板切换的问题请高手指教(在线等!!!)
在项目中需要用到这样一个画面:整个画面分上、中、下三部分,上面部分放置ToolBar,里面包括4个Menu,每个Menu里面又追加Item,Item的名称是每个机能画面的名称;中间部分是主面板,点击Menu中的一个Item,主面板要切换到相应的机能画面;下面部分相当于一个控制台,要求同步显示后台程序运行产生的Log和各种错误、警告信息。
现在有以下两个问题需要请教各位前辈高手,请不吝指教!!!
问题一:点击不同的Item,怎样让主面板切换到对应的机能面板且保持上下两个部分不变?
问题二:如何实现下面Log的同步显示?
请各位多多发言,即使只是一个指导思想,也感激万分!!!
下面是已经做出的一个基本框架source:
------解决方案--------------------
可以在panelObj外面加一个card布局的容器比如panel来实现中间面板的切换。
------解决方案--------------------
在项目中需要用到这样一个画面:整个画面分上、中、下三部分,上面部分放置ToolBar,里面包括4个Menu,每个Menu里面又追加Item,Item的名称是每个机能画面的名称;中间部分是主面板,点击Menu中的一个Item,主面板要切换到相应的机能画面;下面部分相当于一个控制台,要求同步显示后台程序运行产生的Log和各种错误、警告信息。
现在有以下两个问题需要请教各位前辈高手,请不吝指教!!!
问题一:点击不同的Item,怎样让主面板切换到对应的机能面板且保持上下两个部分不变?
问题二:如何实现下面Log的同步显示?
请各位多多发言,即使只是一个指导思想,也感激万分!!!
下面是已经做出的一个基本框架source:
- JScript code
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(); }
------解决方案--------------------
可以在panelObj外面加一个card布局的容器比如panel来实现中间面板的切换。
------解决方案--------------------
- CSS code
我觉得你中间用选项卡tabpanel比较好,可以方便切换。当点击tabpanel的时候,也就是tabpanel中的选项 卡触发激活activeTab事件或show事件的时候,就在你说的log控制台显示消息。只有log控制台的消息是随 tab的点击而动态显示的,当点击菜单的时候,添加一个新panel。当panel存在的时候,会自动将存在的panel显示处理 每次只显示一个tabpanel。将其他的tabpanel隐藏。这样可以做到中间变得其他的不变的目的。 大致思路就这样。
------解决方案--------------------
mainContent面板layout为card,
var goalPanelExtObjRef= new XXXXX({
id:goalPanel
//xxxxx
});
mainPanel.add(goalPanelExtObjRef);
mainPanel.setActiveItem(goalPanel);
------解决方案--------------------
mainPanel.layout.setActiveItem(goalPanelExtObjRef);