大致看了幾天的書籍 查閱了API。頭腦里也記不下多少，學習還是動手比較好。就試著開始寫寫：
首先：開始搭個 界面框架.
第一步當然是引用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>
定義一個Ext.Viewport：
在items的屬性里設(shè)置：
頭部：
{
region: 'north',
html: '<h1 class="x-panel-header">CRM管理系統(tǒng)</h1>',
autoHeight: false,
border: false,
margins: '0 0 5 0'
}
左側(cè)的管理樹：
{
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: '用戶管理',
leaf: false,
children: [
{
id: 'userlist', text: '用戶列表', 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)打開該面板
n = contentPanel.add({
'id': node.id,
'title': node.text,
closable: true,
autoLoad: {
url: node.id + '.html',
scripts: true
} // 通過autoLoad屬性載入目標頁,如果要用到腳本,必須加上scripts屬性
});
}
contentPanel.setActiveTab(n);
}
}
}
右邊具體功能面板區(qū)：
new Ext.TabPanel({
region: 'center',
enableTabScroll: true,
activeTab: 0,
items: [{
id: 'homePage',
title: '首頁',
autoScroll: true,
html: '<div style="position:absolute;color:#ff0000;top:40%;left:40%;">主頁</div>'
}]
});
這樣一個簡單的界面就搭出來了。界面如下：
