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值
，單擊事件時(shí)可以使用
“l(fā)eaf”-->Boolean 值，如果 “ 葉子 ” 是真的話，則不能包含子節(jié)點(diǎn) Children nodes
"cls"--> 選用的樣式，通常在這里選定圖標(biāo)
”href“--> 指定的 url ，還有一個(gè) ”hrefTarget“ 的屬性
children – 〉表示子節(jié)點(diǎn)信息
?
在 Record.css 中自定了兩個(gè)定義的 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 字符串中就使用了這個(gè)值 ?
Tree 使用如下，相對(duì)比較簡(jiǎn)單
????
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 ，顯示的頁(yè)面
當(dāng)左邊樹型控件被點(diǎn)擊后，右邊的所有的 Tab 進(jìn)行變化，訪問(wèn)與樹型列表 id 相對(duì)應(yīng)的頁(yè)面內(nèi)容
?
l ???????? 布局使用
布局一般使用 Viewport
var viewport = new Ext. Viewport ({
只要注意 region 和 el 即可
???????????? region: 'north' ,
???????????? el: 'north-div' , ?
el 和 contentEl 的區(qū)別
el 是第一層 div ， contentEl 一般指向更內(nèi)部的 div
?
l ???????? Tab 使用
普通的 Tab 訪問(wèn)未有無(wú)法顯示 js 的問(wèn)題
??????????? {
??????????????? title: 'Ajax Tab 1' ,
??????????????? autoLoad:{url:'grid.html',scripts:true} ???????????????
??????????? }
所以就使用了 Ext 論壇中提供的一個(gè) Iframe 的擴(kuò)展 Ext .ux.ManagedIFrame
使用時(shí)將 miframe.js 文件導(dǎo)入即可
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
'
,?
//
?設(shè)置訪問(wèn)的名稱
????????????????????????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
'
,?
//
?設(shè)置訪問(wèn)的名稱
????????????????????????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;
????????????}
);
單擊后，通過(guò)查找ManagedIFrame形成的Tab頁(yè)的id，并且將其屬性src改變來(lái)達(dá)到Tab頁(yè)內(nèi)容改變的效果
Ext.get(
'
person
'
).dom.src?
=
?
'
grid.html?selectedid=
'
+
node.id;
參考：
Ext2_0 form 使用實(shí)例 - 天曉得的專欄 - CSDNBlog
Ext 2_0 布局實(shí)例
[2_0][SOLVED] Best practices for getting - saving form data - Ext JS Forums
[EXT Develop Log]--comboBoxradioFix it! - kkbear - JavaEye 技術(shù)網(wǎng)站
ext 學(xué)習(xí) -tree 組件 - 在線閱讀 - 新書城
對(duì)《 Ext2_0 form 使用實(shí)例》的一點(diǎn)補(bǔ)充 - 天曉得的專欄 - CSDNBlog
用 Ext 2_0 combobox 做的省份和城市聯(lián)動(dòng)選擇框 - 天曉得的專欄 - CSDNBlog
關(guān)于 ext 和 struts 的交互 - Allen_CD_China - JavaEye 技術(shù)網(wǎng)站
從 Java 類產(chǎn)生 json(json-lib) - windfree – BlogJava
學(xué)習(xí) EXT 第 XX 天
流氓臨遠(yuǎn) , 沒(méi)人性土豆 ’s ext tutorial
And Others, I can’t remember
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
