EXTJS_Tabpanel布局,选项卡加载页面,调用别的jsp页面,截图所示
2016-11-17 23:14
621 查看
EXTJS_Tabpanel布局,选项卡加载页面,调用别的jsp页面,截图所示
标签： extjsjspfunctionborderlayout2011-07-21 14:01 2869人阅读 评论(1) 收藏 举报
分类：
EXTJS（7）
版权声明：本文为博主原创文章，未经博主允许不得转载。
先上来:advancedTree01.json文件的的内容
[
{
"text":"卡卡西班",
"id":"01",
"allowDrag":false,
"des":"最强的组合！",
"children":[
{"text":"小樱","id":"0101","allowDrag":false,"des":"一个很可爱的女孩！","children":[
{"text":"小樱1","id":"010101","leaf":true,"allowDrag":true,"des":"一个很可爱的女孩！"},
{"text":"鸣人1","id":"010202","leaf":true,"allowDrag":true,"des":"四代火影的儿子！"},
{"text":"佐助1","id":"010303","leaf":true,"allowDrag":true,"des":"为了杀自己哥哥而活着的男人！"}
]
},
{"text":"鸣人","id":"0102","leaf":true,"allowDrag":true,"des":"四代火影的儿子！"},
{"text":"佐助","id":"0103","leaf":true,"allowDrag":true,"des":"为了杀自己哥哥而活着的男人！"}
]
},
{
"text":"凯班",
"id":"02",
"allowDrag":false,
"des":"有一个很白痴的老师！",
"children":[
{"text":"小李","id":"0201","leaf":true,"allowDrag":true,"des":"他的努力意识值得任何人学习！"},
{"text":"宁次","id":"0202","leaf":true,"allowDrag":true,"des":"白眼族的天才忍者！"},
{"text":"天天","id":"0203","leaf":true,"allowDrag":true,"des":"她救活了一个暗器公司！"}
]
}
]
Ext.onReady(function(){
var tree1 = new Ext.tree.TreePanel({
id : 'tree-mianban',
title : 'All publisher',
frame : true,
collapsible : true,
height:1200,
width : 400,
split : true,
minSize : 200,
maxSize : 600,
loader : new Ext.tree.TreeLoader({ dataUrl : 'common/myjs/advancedTree01.json' }) });
// 根节点
var root1 = new Ext.tree.AsyncTreeNode({
text : '木叶',
draggable : false,
id : 'root1'//children : json
});
tree1.setRootNode(root1);
root1.expand(true, true);
var form1 = new Ext.form.FormPanel({
title : '广告管理',
width : 400,
collapsible : true,
frame : true,
labelWidth : 2,
region : 'west',
items : [
{ xtype : 'fieldset',
layout : 'column',
height : 50,
defaultType : 'radio',
items : [{ name : 'radio',
id : 'manradio',
boxLabel : 'standard',
hideLabel : true,
inputValue : 'man',
checked : true,
listeners : { 'check' : function(item,check) {
//监听check事件 你之前那么写是错的 Ext渲染完后 dom元素的id不再是manradio
alert(check);
alert(item.id)
} } },
{ name : 'radio',
id : 'womanradio',
hideLabel : true,
boxLabel : 'virtualGroup',
inputValue : 'woman',
listeners : { 'check' : function(item,check) {
alert(check);
alert(item.id) } } }] },
{ xtype : 'textfield',
anchor : '98%',
value : '搜索',
id : 'search',
name : 'text'
}, tree1] });
var form2 = new Ext.form.FormPanel({
title : 'Media',
region : 'north',
frame : true,
height :100,
layout : 'column',
border : true,
anchor : '100%',
labelWidth : 30,
xtype : 'fieldset',
items : [
{
columnWidth : .3,
layout : 'form',
border : false,
items : [
{ xtype : 'textfield', fieldLabel : 'time', name : 'aaa', anchor : '40%' }] },
{ columnWidth : .3, layout : 'form', border : false, items : [{ xtype : 'textfield', fieldLabel : 'area', name : 'bbb', anchor : '40%' }] },
{ columnWidth : .3, layout : 'form', border : false, items : [{ xtype : 'textfield', fieldLabel : 'category', name : 'bbb', anchor : '40%' }] }
] });
var center = new Ext.TabPanel({
title:'center',
defaults:{autoScroll:true},
frame:true,
region:'center',
items: [{
id: 'Campaigins',
title: 'Campaigins',
html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'gridpanel.jsp'+'"> </iframe>',
listeners:{ // 添加监听器，点击此页面的tab时候要重新加载（刷新功能）
activate:function(){
this.getUpdater().refresh();
}
}
},
{
id: 'Groups',
title: 'Groups',
html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'http://www.dangdang.com'+'"> </iframe>',
listeners:{ // 添加监听器，点击此页面的tab时候要重新加载（刷新功能）
activate:function(){
this.getUpdater().refresh();
}
}
},
{
id: 'Ads',
title: 'Ads',
html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'http://www.baidu.com'+'"> </iframe>',
listeners:{ // 添加监听器，点击此页面的tab时候要重新加载（刷新功能）
activate:function(){
this.getUpdater().refresh();
}
}
},
{
id: 'Keywords',
title: 'Keywords',
html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'http://www.google.com'+'"> </iframe>',
listeners:{ // 添加监听器，点击此页面的tab时候要重新加载（刷新功能）
activate:function(){
this.getUpdater().refresh();
}
}
},
{
id: 'Placements',
title: 'Placements',
html:' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'gridpanel.jsp'+'"> </iframe>',
listeners:{ // 添加监听器，点击此页面的tab时候要重新加载（刷新功能）
activate:function(){
this.getUpdater().refresh();
}
}
},
]
});
center.setActiveTab(0);
var viewport = new Ext.Viewport({
layout : 'border',
items : [ form1,
{ region : 'center',layout : 'border', items : [form2, center] }
]
});
});
顶
0
踩
0
上一篇EXTjs
的ajax返回的response对应url中的数据,
下一篇Gridpanel数据加载成功后,触发事件,让表格第一行的数据显示在下面的formpanel
我的同类文章
EXTJS（7）•form中的button,添加在内部,多了一条线,解决办法2011-08-03阅读441
•extjs
下拉框取值2011-07-15阅读1735
•extjs项目案例2011-07-14阅读3358
•extjs的例子2011-07-14阅读427
•Gridpanel数据加载成功后,触发事件,让表格第一行的数据显示在下面的formpanel2011-07-22阅读1819
•Extjs
RadioGroup中Radio的切换2011-07-14阅读1458
•功能强大的EXTJS的tree的节点操作2011-07-14阅读1741
猜你在找
Git代码管理工具速成视频课程
大规模敏捷需求管理
分布式资源管理系统的前世今生，深入剖析YARN资源调度架构
2016软考系统集成项目管理工程师视频教程精讲 基础知识（下）
PHP面向对象设计模式
给jsp页面加图片加载不出来的解决办法
37-002-1 通过spring的OpenSessionInViewFilter解决jsp页面懒加载显示的问题
JSP页面加载xls表格数据
当jsp页面完全加载完成后执行一个js函数
struts2实现首次打开默认jsp页面预加载数据库表的读取
查看评论
1楼 tanwencan 2011-09-29 11:29发表 [回复]
当同时加载多个tabpanel的时候,也能够实现多个tabpanel都刷新吗？
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- EXTJS_Tabpanel布局,选项卡加载页面,调用别的jsp页面,截图所示
- EXTJS_Tabpanel布局,选项卡加载页面,调用别的jsp页面,截图所示
- Bootstrap tab选项卡实现AJAX加载不同的JSP页面的方法
- ExtJS中TabPanel用iframe加载其他完整页面的处理方法
- Extjs4.2 TabPanel中使用Ext.ux.IFrame组件加载内容页面
- Extjs中左边treepanel右边panel动态加载jsp页面
- ExtJS 4.1 TabPanel动态加载页面并执行脚本
- ExtJS中TabPanel用iframe加载其他完整页面的处理方法
- Extjs中左边treepanel右边panel动态加载jsp页面
- 关于extjs中的tabpanel的刷新等若干问题，解决tabpanel内页面刷新，更新数据等问题。
- Tab选项卡和滑动门同时布局在一个页面上
- ExtJs tree tabpanel 布局
- ExtJs4 笔记（10） Ext.tab.Panel 选项卡
- ExtJs4 笔记 Ext.tab.Panel 选项卡
- extjs tabpanel限制选项卡数量实现思路及代码
- Extjs TabPanel Tab页面刷新操作
- 简单实用TAB选项卡，支持单页面多个调用
- Extjs中通过Tree加载右侧TabPanel
- EXTJS布局示例（panel，Viewport，TabPanel）(带图)
- Extjs中通过Tree加载右侧TabPanel