var Tree = Ext.tree;
Ext.onReady(function(){
var vport=new Ext.Viewport(
{
enableTabScroll:true,
layout:"border",
items:[
{
title:"导航菜单",
region:'west',
id:'ma',
width:200,
collapsible:true,
layoutConfig:{animate:false},
layout:'accordion',
frame:true,//设置导航条样式(圆角)和内部元素padding
bbar: [
]
},
tab
]
}
);
//使用ajax绑定目录树
Ext.Ajax.request({
url:'manageMenu.asp',
params:{'MMF':0},
success: function(resp,opts) {
var respText=Ext.util.JSON.decode(resp.responseText);
for(var i=0;i<respText.length;i++){
var id = respText[i].id;
var tree=new Ext.tree.TreePanel({
rootVisible:false,
border:false,
root:new Tree.AsyncTreeNode({id:'root_'+id,disable:true}),
loader:new Ext.tree.TreeLoader({dataUrl :'manageMenu.asp?mmf='+id+'&p='+Math.random()})
})
var tmp = new Ext.Panel({
id:"pannel_"+id,
title:respText[i].text,
iconCls:respText[i].iconCls,
//layout:'accordion',
autoWidth:true,
//html:'<div id="tree_'+id+'" style="overflow:auto;width:100%;height:100%"></div>',
items:[tree]
});
Ext.getCmp('ma').add(tmp);
Ext.getCmp('ma').doLayout();
tree.on('click',treeClick);
tree.expandAll();
}
},
failure: function(resp,opts) {
var respText = Ext.util.JSON.decode(resp.responseText);
Ext.Msg.alert('错误', respText.error);
}
})
});
function treeClick(node,e) {
if(node.isLeaf()){
e.stopEvent();
var n = tab.getComponent(node.id);
if (!n) {
var n = tab.add({
'id' : node.id,
'title' : node.text,
closable:true,
iconCls:"plugins-nav-icon",
html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+node.attributes.href+'" mce_src="'+node.attributes.href+'"></iframe>'
});
}
tab.setActiveTab(n);
}
}
var tab = new Ext.TabPanel({
xtype:'tabpanel',
deferredRender:false,
region:'center',
activeTab:0,
enableTabScroll:true,
items:[
{iconCls:"toc-icon",title:'后台首页',closable:true,autoScroll:true,html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="main.asp" mce_src="main.asp"></iframe>'},
{iconCls:"plugins-nav-icon",title:'普通面板',closable:true,autoScroll:true}
]
});
- 大小: 147.6 KB
分享到:
相关推荐
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
用ext + xml文件 完成 ext tree panel 树结构。延迟加载,支持 多选 单选。前后台数据交互使用的是 json串,挺不错的
Ext4+JSON+Servlet/Struts2+Ext.tree.Panel+Ext.tab.Panel构建Web应用系统框架
8.3.1 一个结合DataWrite和RowEditor的Grid示例 238 8.3.2 在CRUD操作中restful的设置以及使用Ext.Direct的问题 247 8.4 ListView控件 248 8.5 本章小结 251 第四部分 Ext 扩展和Ext插件 第9章 Ext 扩展 254 9.1 ...
banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json进行数据传输),内容区域采用tab页得形式来显示,点击...
7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...
10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...
10.12 表格与树形的结合——Ext.ux.tree.ColumnTree 第11章 其他布局类简介 11.1 标准布局类 11.1.1 折叠布局——AccordionLayout 11.1.2 边框布局——BorderLayout 11.1.3 卡片式布局——CardLayout 11.1.4 ...
6.8 Ext.util.Format提供常用的格式化方法 6.8.1 ellipsis() 6.8.2 capitalize() 6.8.3 date() 6.8.4 htmlEncode() 6.8.5 htmlDecode() 6.8.6 stripTags() 6.8.7 substr() 6.8.8 lowercase...
menuTree:new Ext.tree.TreePanel({ title:'功能菜单', region:'west', bodyStyle:'background:transparent url(images/default/panel/group-lr.gif) repeat-x 0 bottom;', id:'extExample-tree', autoScroll:true, ...
-修正Tree控件的一个BUG(定义Mappings属性时)。 +PageManager.Instance应该存在于HttpContext.Current,而不是一个全局变量。 -这个BUG导致Asp.net compatibility中的示例无法完成,现在已经修正。 +去除...
-修正Tree控件的一个BUG(定义Mappings属性时)。 +PageManager.Instance应该存在于HttpContext.Current,而不是一个全局变量。 -这个BUG导致Asp.net compatibility中的示例无法完成,现在已经修正。 +去除...
3、通过实现角色管理、用户管理、部门管理三个基础的功能模块,演示了Viewport、Container、Panel、Grid、Window、Form、Tree等常用组件的用法,以及border、column、form、fit、accordion、hbox等常用布局方式;...