5. Tree
直接使用 Ext 例子
Tree 所需要的 json 字符串
[{id:300,text:'01',cls:'task-folder',children:[{id:'2',text:'01-01',leaf:true, cls:'task'},{id:'3',text:'01-02',children:[{id:'4',text:'01-02-01',leaf:true},{id:'5',text:'01-02-02',leaf:true}]},{id:'6',text:'01-03',leaf:true}]},{id:'7',text:'02',leaf:true}]
text”-->
显示的文本
"id"-->id值
，单击事件时可以使用
“leaf”-->Boolean 值，如果 “ 叶子 ” 是真的话，则不能包含子节点 Children nodes
"cls"--> 选用的样式，通常在这里选定图标
”href“--> 指定的 url ，还有一个 ”hrefTarget“ 的属性
children – 〉表示子节点信息
在 Record.css 中自定了两个定义的 css ， task 和 task-folder
.task .x-tree-node-icon {
background-image : url(icons/cog.png) ;
}
.task-folder .x-tree-node-icon {
background-image : url(icons/folder_go.png) !important ;
}
Json 字符串中就使用了这个值
Tree 使用如下，相对比较简单
var
Tree
=
Ext.tree;
var
tree
=
new
Tree.TreePanel(
{
el:
'
tree-div
'
,
autoScroll:
true
,
animate:
true
,
enableDD:
true
,
containerScroll:
true
,
loader:
new
Tree.TreeLoader(
{
loader:
dataUrl:
'
record.jsp
'
}
)
}
);
//
set the root node
var
root
=
new
Tree.AsyncTreeNode(
{
text:
'
Ext JS
'
,
draggable:
false
,
id:
'
source
'
}
);
tree.setRootNode(root);
//
render the tree
tree.render();
root.expand();
6. Layout
左边为树型控件，右边为 TabPanel ，显示的页面
当左边树型控件被点击后，右边的所有的 Tab 进行变化，访问与树型列表 id 相对应的页面内容
l 布局使用
布局一般使用 Viewport
var viewport = new Ext. Viewport ({
只要注意 region 和 el 即可
region: 'north' ,
el: 'north-div' ,
el 和 contentEl 的区别
el 是第一层 div ， contentEl 一般指向更内部的 div
l Tab 使用
普通的 Tab 访问未有无法显示 js 的问题
{
title: 'Ajax Tab 1' ,
autoLoad:{url:'grid.html',scripts:true}
}
所以就使用了 Ext 论坛中提供的一个 Iframe 的扩展 Ext .ux.ManagedIFrame
使用时将 miframe.js 文件导入即可
var
tabs2
=
new
Ext.TabPanel(
{
//
renderTo: document.body,
region :
'
center
'
,
el :
'
center-center
'
,
//
大的
//
contentEl : 'center-center', // 小的
activeTab :
0
,
width :
600
,
height :
250
,
plain :
true
,
defaults :
{
autoScroll :
true
}
,
items : [
{
xtype :
"
panel
"
,
title :
"
Personal Assistant
"
,
body :
new
Ext.ux.ManagedIFrame(
{
autoCreate :
{
id:
'
person
'
,
//
设置访问的名称
src :
'
dynamic.html
'
,
frameBorder :
0
,
cls :
'
x-panel-body
'
,
width :
'
100%
'
,
height :
'
100%
'
}
}
)
}
,
{
xtype :
"
panel
"
,
title :
"
Personal
"
,
body :
new
Ext.ux.ManagedIFrame(
{
autoCreate :
{
id:
'
person2
'
,
//
设置访问的名称
src :
'
grid.html
'
,
frameBorder :
0
,
cls :
'
x-panel-body
'
,
width :
'
100%
'
,
height :
'
100%
'
}
}
)
}
]
}
);
l 树型控件
要给树型控件添加单击事件
tree.on(
'
click
'
,
function
(node)
{
//
do something
alert(node.id
+
'
was activated.
'
);
Ext.get(
'
person
'
).dom.src
=
'
grid.html?selectedid=
'
+
node.id;
}
);
单击后，通过查找ManagedIFrame形成的Tab页的id，并且将其属性src改变来达到Tab页内容改变的效果
Ext.get(
'
person
'
).dom.src
=
'
grid.html?selectedid=
'
+
node.id;
参考：
Ext2_0 form 使用实例 - 天晓得的专栏 - CSDNBlog
Ext 2_0 布局实例
[2_0][SOLVED] Best practices for getting - saving form data - Ext JS Forums
[EXT Develop Log]--comboBoxradioFix it! - kkbear - JavaEye 技术网站
ext 学习 -tree 组件 - 在线阅读 - 新书城
对《 Ext2_0 form 使用实例》的一点补充 - 天晓得的专栏 - CSDNBlog
用 Ext 2_0 combobox 做的省份和城市联动选择框 - 天晓得的专栏 - CSDNBlog
关于 ext 和 struts 的交互 - Allen_CD_China - JavaEye 技术网站
从 Java 类产生 json(json-lib) - windfree – BlogJava
学习 EXT 第 XX 天
流氓临远 , 没人性土豆 ’s ext tutorial
And Others, I can’t remember
