快捷導(dǎo)航

入門(mén)基礎(chǔ)學(xué)習(xí) ExtJS筆記（一）

更新時(shí)間：2010年11月11日 14:52:04 作者：

這段時(shí)間手中項(xiàng)目已經(jīng)完成，空閑時(shí)間較多。開(kāi)始了學(xué)習(xí)ExtJs之旅。

大致看了幾天的書(shū)籍查閱了API。頭腦里也記不下多少，學(xué)習(xí)還是動(dòng)手比較好。就試著開(kāi)始寫(xiě)寫(xiě)：
首先：開(kāi)始搭個(gè) 界面框架.
第一步當(dāng)然是引用ExtJs的相關(guān)文件：
<link rel="Stylesheet" href="resources/css/ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
定義一個(gè)Ext.Viewport：
在items的屬性里設(shè)置：
頭部：

復(fù)制代碼代碼如下:

 
　　　　　　{ 
region: 'north', 
html: '<h1 class="x-panel-header">CRM管理系統(tǒng)</h1>', 
autoHeight: false, 
border: false, 
margins: '0 0 5 0' 
} 

左側(cè)的管理樹(shù)：

復(fù)制代碼代碼如下:

 
{ 
region: 'west', 
collapsible: true, 
title: '管理菜單', 
xtype: 'treepanel', 
width: 200, 
autoScroll: true, 
split: true, 
loader: new Ext.tree.TreeLoader(), 
root: new Ext.tree.AsyncTreeNode({ 
expanded: true, 
children: [ 
{ 
text: '系統(tǒng)設(shè)置', 
leaf: true, 
url: 'userlist' 
}, 
{ 
text: '用戶(hù)管理', 
leaf: false, 
children: [ 
{ 
id: 'userlist', text: '用戶(hù)列表', leaf: true 
} 
] 
}, 
{ id: 'news', 
text: '新聞資訊', 
leaf: true 
}] 
}), 
rootVisible: false, 
listeners: { 
click: function (node, event) { 
//Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + node.attributes.text + '"'); 
event.stopEvent(); 
var n = contentPanel.getComponent(node.id); 
// alert(n); 
if (!n && node.leaf == true) { // //判斷是否已經(jīng)打開(kāi)該面板 
n = contentPanel.add({ 
'id': node.id, 
'title': node.text, 
closable: true, 
autoLoad: { 
url: node.id + '.html', 
scripts: true 
} // 通過(guò)autoLoad屬性載入目標(biāo)頁(yè),如果要用到腳本,必須加上scripts屬性 
}); 
} 
contentPanel.setActiveTab(n); 
} 
} 
} 

右邊具體功能面板區(qū)：

復(fù)制代碼代碼如下:

 
new Ext.TabPanel({ 
region: 'center', 
enableTabScroll: true, 
activeTab: 0, 
items: [{ 
id: 'homePage', 
title: '首頁(yè)', 
autoScroll: true, 
html: '<div style="position:absolute;color:#ff0000;top:40%;left:40%;">主頁(yè)</div>' 
}] 
}); 

這樣一個(gè)簡(jiǎn)單的界面就搭出來(lái)了。界面如下：