一下是树的实现代码:
var mytree=new Ext.tree.TreePanel({
animate:true,// 以动画形式伸展,收缩子节点
enableDD: true,
ddGroup:'mygroup',
rootVisible:true,// 是否显示根节点
autoScroll:true,
bodyStyle: 'background-color: #dfe8f6;',
height:300,
width:180,
renderTo : 'treePanel',
lines:true,// 节点之间连接的横竖线
dataUrl:getWebRoot()+"/jsp/splitScreen/getAppuserStations.faces",
root:{
nodeType: 'async',
draggable: false,
expand:true,
id:"root",
text:"台站功能"
}
});
以下是panel布局的实现代码:
var tablePanel = new Ext.Panel({
id: 'splitScreenPanel',
border: false,
renderTo:'tablePanel',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
bodyStyle: 'background-color: #dfe8f6;'
},
frame:true,
height:300,
width:300,
items: [{
flex:0.3,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
frame:true
},
items:[myForm]
},{
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
margins: '0 0 5 0',
defaults: {
ddGroup: 'mygroup',
tools:getTools,
listeners: {
render:renderHander
},
frame:true
},
items: [{
id: 'Screen1',
title: '一',
flex: 1,
margins: '0 5 0 0',
html : "<div id='div1'></div>"
}, {
id: 'Screen2',
title: '二',
flex: 1,
html : "<div id='div2'></div>"
}]
}]
});
if(splitNum==4){
tablePanel.add({
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
ddGroup: 'mygroup',
tools:getTools,
listeners: {
render:renderHander
},
frame:true
},
items: [{
id: 'Screen4',
title: '三',
flex: 1,
margins: '0 5 2 0',
html : "<div id='div4'></div>"
}, {
id: 'Screen5',
title: '四',
flex: 1,
margins: '0 0 2 0',
html : "<div id='div5'></div>"
}]
});
}else{
tablePanel.add({
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
ddGroup: 'mygroup',
tools:getTools,
listeners: {
render:renderHander
},
frame:true
},
items: [{
id: 'Screen3',
title: '三',
flex: 1,
margins: '0 0 2 0',
html : "<div id='div3'></div>"
}]
});
}
tablePanel.doLayout();
动态实现了分几块。
分屏上的按钮:
var getTools= [{
id: 'search',
qtip: '编辑',
handler: function(event, toolEl, panel) {
searchConditionWin.show();
}
},{ id: 'close',
qtip: '删除',
handler: function(event, toolEl, panel) {
getDefault(panel.id);
}
}
];
拖动处理函数:
var renderHander = function(cmp) {
new Ext.dd.DropTarget(cmp.body.dom, {
ddGroup: 'mygroup',
notifyDrop: function(ddSource, e, data) {
if (!data.node.hasChildNodes()) {
cmp.setTitle(data.node.parentNode.attributes.text);
}
return true;
}
});
};
主要实现就是把要拖动的东西放到一个组里,然后加上一个拖动处理函数
- 大小: 14 KB
- 大小: 16.5 KB
分享到:
相关推荐
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
本文为大家介绍下extjs4 treepanel如何动态改变行高度,下面有个不错的示例,感兴趣的朋友可以参考下
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
panel的accordion布局以及treepanel动态导航示例
类似extjs中viewport的panel viewport只能渲染到body,而这个panel可以渲染到任何html元素,并且这个panel会自动变大!自动填充到最大化
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
extjs4 MVC2 TreePanel动态JSON实现 extjs4 MVC2 TreePanel动态JSON实现
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
ExtJs TreePanel应用ExtJs TreePanel应用
Extjs布局教程,Extjs 布局,非常好用的Extjs布局教程
Extjs 4.11 重写 Panel 添加 click事件
获取Extjs中的TreePanel中所有的被checked的叶子节点的id
主要介绍了如何通过CSS样式来修改ExtJS:TreePanel的小图标,下面有个不错的示例,大家可以参考下
TreePanel继承自Panel,在ExtJS中使用树控件含有丰富的属性和方法实现复杂的功能。其中Ext.tree.TreeNode代表一个树节点,比较常用的属性包括text、id、icon、checked等、异步树Ext.tree.AsyncTreeNode、树加载器Ext...
博文链接:https://jfp.iteye.com/blog/178889
extjs实现动态树
NULL 博文链接:https://huiqinbo.iteye.com/blog/2219418