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
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
