index = Ext.extend(Ext.Viewport,{
center : new Ext.TabPanel({
id : 'mainview',
region : 'center',
activeTab : 0,
width : 600,
height : 250,
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
split : true,
layoutOnTabChange:true,
tabPosition : 'top',
resizeTabs:true,
defaults : {autoScroll:true},
plugins : new Ext.ux.TabCloseMenu(),
items :{
id : 'start-panel',
title : 'MainView',
iconCls : 'tabs',
layout : 'fit',
bodyStyle : 'padding:25px',
html : '<img src="../images/bg.jpg"/>'
}
}),
constructor : function(){
//var clock = new Ext.Toolbar.TextItem('');
index.superclass.constructor.call(this,{
layout : 'border',
items : [{
region : 'north',
xtype : 'panel',
height : 25,
layout : 'column',
border : false,
items : [{
columnWidth : 1,
border : false,
layout : 'fit',
items : [{
xtype : 'panel',
id : 'logo-header',
border : false,
tbar : [
{
text : currentUser
},{
text : new Date().format('Y年m月d日')
},'->',{
text:'注销'
,iconCls:'logout'
,handler:function(){
Ext.Msg.show({
title:'注销系统',
msg: '提示:注销系统前请注意保存数据,确定要注销吗?',
buttons: Ext.Msg.YESNO,
fn: function(btn){
if(btn=='yes'){
Ext.Ajax.request({
url : 'logout.action',
success : function() {
location = '../main/index.jsp';
},
failure : function() {
Ext.Msg.show({
title : '错误提示',
msg : '退出系统失败!',
icon : Ext.Msg.ERROR,
buttons : Ext.Msg.OK
});
}
});
}
}
});
}
}
]
}]
}]
},{
region : 'west',
xtype : 'panel',
layout : 'accordion',
title : '计划排产管理系统',
split : true,
minSize : 200,
maxSize : 250,
//margins : '2 0 5 5',
collapsible : true,
collapseMode:'mini',
width : 200,
layoutConfig : {
animate : true
},
listeners : {
'expand' :{
fn : this.onExpandPanel,
scope : this
},
'collapse' :{
fn : this.onCollapsePanel,
scope : this
}
},
items : [{
title : '导航栏',
iconCls : 'icon-nav',
xtype : 'treepanel',
autoScroll : true,
border : false,
id : 'treepanel',
tools : [{
id : 'refresh',
handler : this.onRefreshTreeNodes,
scope : this
},{
id:'expanded',
tooltip:'展开',
handler:function(){
Ext.getCmp('treepanel').expandAll();
}
}],
loader : new Ext.tree.JsonPluginTreeLoader({
url : 'findTree.action'
}),
root : new Ext.tree.AsyncTreeNode({text : '菜单', expanded:true}),
listeners : {
'click' : {
fn :this.onTreeNodeClick,
scope : this
},
'afterrender':{
fn : this.onExpandAll,
scope : this
}
}
}]
},this.center]
})
},
addTab : function(name,id,css,link){
var tabId = 'tab_'+id;
var tabTitle = name;
var tabLink = link;
var centerPanel = Ext.getCmp('mainview');
var tab =centerPanel.getComponent(tabId);
var subMainId = 'tab_'+id+'_main';
if(!tab){
var newTab = centerPanel.add(new Ext.Panel({
id : tabId,
title : tabTitle,
iconCls : 'tabs',
border : false,
closable : true,
layout : 'fit',
listeners : {
activate : this.onActiveTabSize,
scope : this
}
}));
centerPanel.setActiveTab(newTab);
newTab.load({
url : tabLink,
method : 'post',
params : {
subMainId : subMainId
},
scope : this,
discardUrl : true,
nocache : true, // 不缓存
text : '加载中,请稍候...',
timeout : 3000,
scripts : true
});
}else{
centerPanel.setActiveTab(tab);
}
},
onActiveTabSize : function(){
var w = Ext.getCmp('mainview').getActiveTab().getInnerWidth();
var h = Ext.getCmp('mainview').getActiveTab().getInnerHeight();
var Atab = Ext.getCmp('mainview').getActiveTab().id;
var submain = Ext.getCmp(Atab+'_main');
if(submain){
submain.setWidth(w);
submain.setHeight(h);
}
},
onRefreshTreeNodes : function(){
Ext.getCmp('treepanel').root.reload();
},
onTreeNodeClick : function(_node,_e){
if(_node.isLeaf()){
var _nodeText = _node.attributes.text;
var _nodeLink = _node.attributes.url;
var _nodeId = _node.attributes.id;
this.addTab(_nodeText,_nodeId,'_css',_nodeLink)
}
},
onExpandPanel : function(_nowCmp){
this.onActiveTabSize();
},
onCollapsePanel : function(_nowCmp){
this.onActiveTabSize();
},
onExpandAll : function(){
Ext.getCmp('treepanel').expandAll();
}
})
- 大小: 45.1 KB
分享到:
相关推荐
js代码,实现了 extjs4.x tabpanel 动态加载panel和html的功能
extjs4.2.1 tabPanel刷新及关闭标签
ExtJS 关闭TabPanel内的Panel时使用TabPanel的'beforeremove’和其内的Panel的'beforeclose’事件弹出关闭确认提示对话框
代码如下: var tabIndex = ‘shouye’;... /** * 向TabPanel组件中添加窗口或激活已经存在的窗口 * 并将指定资源加载进窗口 * @param node : 传入的Node节点 */ var loadPanel = function(node) { var
Extjs5.0从入门到实战... panel, tabpanel,Tree, grid, form表单(及其验证方法),数据组件: store,model等,讲解了动态菜单、单表和子父表模块等的开发方法以及后端spring,spring mvc,mybatis的整合和数据打通等。
18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) ...
解决Ext中tabPanel关闭后再次打开的2种方式。详情见文件,很小的txt文本。
2. ExtJs2.0学习系列(2)--Ext.Panel 3. ExtJs2.0学习系列(3)--Ext.Window 4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之...
18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) ...
从页面布局和使用的控件TextBox,Combox,Button,ToolBar,StateBar,Panel,TabPanel,ExplorerBar,MenuBar,PictureBox都用统一的样式非常方便的配置,基本不需要额外美工处理,同时支持ajax无刷新效果。
第二十五章:动态操作树节点 200 一、概述 200 二、基本操作 201 三、事件 203 四、小结 204 第二十六章:远程获取节点数据 205 一、 概述 205 二、异步加载解析 206 三、小结 212 第二十七章:选项卡面板——Ext....
从外往里说,extjs所有的这种选择器都是继承自picker类,继承这个类实现一个重要的方法createPicker 方法,在这个方法里创建一个本选择器需要用到的组件,我这里创建的是tabpanel,tabpanel继承自Ext.tab.Panel这个...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...
左侧的功能树 代码如下: Ext.define(“AM.view.SystemTree”, { extend : ‘Ext.tree.Panel’, alias : ‘widget.systemTree’, rootVisible : false,// 不展示ROOT displayField : ‘text’, // title:’物流运输...
从页面布局和使用的控件TextBox,Combox,Button,ToolBar,StateBar,Panel,TabPanel,ExplorerBar,MenuBar,PictureBox都用统一的样式非常方便的配置,基本不需要额外美工处理,同时支持ajax无刷新效果。...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
15 第三章 使用面板…………………………………………………………………………………………………………17 3.1 Panel………………………………………………………………………………………………………………...