入門基礎(chǔ)學(xué)習(xí) ExtJS筆記（一）
更新時(shí)間：2010年11月11日 14:52:04 作者：
這段時(shí)間手中項(xiàng)目已經(jīng)完成，空閑時(shí)間較多。開始了學(xué)習(xí)ExtJs之旅。
大致看了幾天的書籍 查閱了API。頭腦里也記不下多少，學(xué)習(xí)還是動手比較好。就試著開始寫寫：
首先：開始搭個(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è)置：
頭部：
{
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屬性載入目標(biāo)頁,如果要用到腳本,必須加上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>'
}]
});
這樣一個(gè)簡單的界面就搭出來了。界面如下：
首先：開始搭個(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è)的管理樹：
復(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: '用戶管理',
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屬性載入目標(biāo)頁,如果要用到腳本,必須加上scripts屬性
});
}
contentPanel.setActiveTab(n);
}
}
}
右邊具體功能面板區(qū)：
復(fù)制代碼 代碼如下:
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>'
}]
});
這樣一個(gè)簡單的界面就搭出來了。界面如下：
您可能感興趣的文章:
- 如何學(xué)習(xí)Javascript入門指導(dǎo)
- ExtJS 學(xué)習(xí)專題（一） 如何應(yīng)用ExtJS（附實(shí)例）
- JavaScript入門學(xué)習(xí)書籍推薦
- Javascript入門學(xué)習(xí)第一篇 js基礎(chǔ)
- Javascript 入門基礎(chǔ)學(xué)習(xí)
- Javascript入門學(xué)習(xí)第八篇 js dom節(jié)點(diǎn)屬性說明
- Javascript入門學(xué)習(xí)第九篇 Javascript DOM 總結(jié)
- JavaScript 學(xué)習(xí)初步 入門教程
- JavaScript的學(xué)習(xí)入門整理篇
- 如何學(xué)JavaScript？前輩的經(jīng)驗(yàn)之談
相關(guān)文章
ExtJS是一個(gè)Ajax框架，是一個(gè)用javascript寫的，用于在客戶端創(chuàng)建豐富多彩的web應(yīng)用程序界面。ExtJS可以用來開發(fā)RIA也即富客戶端的AJAX應(yīng)用2008-12-12
Extjs中TabPane如何嵌套在其他網(wǎng)頁中實(shí)現(xiàn)思路及代碼
Extjs中TabPane在一些特殊用途時(shí)把其嵌在其他的網(wǎng)頁中，很多新手朋友可能對此不是很熟悉，小編就在本文章中詳細(xì)的介紹一下，感興趣的你可不要錯(cuò)過了啊，希望本文對你有所幫助2013-01-01
關(guān)于extjs treepanel復(fù)選框選中父節(jié)點(diǎn)與子節(jié)點(diǎn)的問題
實(shí)現(xiàn)帶有復(fù)選框的樹,選中父節(jié)點(diǎn)時(shí)，選中所有子節(jié)點(diǎn)。取消所有子節(jié)點(diǎn)時(shí)，才能取消根節(jié)點(diǎn),感興趣的朋友可以了解下本文2013-04-04
ExtJS 2.0實(shí)用簡明教程 之Border區(qū)域布局
Border布局由類Ext.layout.BorderLayout定義，布局名稱為border。2009-04-04
EXTjs4.0的store的findRecord的BUG演示代碼
EXTjs4.0 的store的findRecord的BUG:當(dāng)判斷ID=1的時(shí)候，遇到1開頭的ID的時(shí)候，這個(gè)時(shí)候就判斷出問題了，有類似問題的朋友可以了解下哈2013-06-06
ExtJS是一個(gè)MVVM結(jié)構(gòu)的JavaScript框架,在處理表格表單方面則是它的拿手好戲,這里整理了基本的JavaScript的ExtJS框架中表格的編寫教程2016-05-05
ExtJS accordion布局使用說明，需要的朋友可以參考下。2009-10-10
Ext GridPanel加載完數(shù)據(jù)后進(jìn)行操作示例代碼
Ext GridPanel加載完數(shù)據(jù)后進(jìn)行操作，比如load數(shù)據(jù)之后選定某些行數(shù)據(jù),下面有個(gè)示例，需要的朋友可以參考下2014-06-06
ComboBox 和 DateField 在IE下消失的解決方法
開發(fā)過程中卻遇到了在 IE 瀏覽器中放大、縮小窗口大小會導(dǎo)致這兩個(gè)組件消失不見不報(bào)任何錯(cuò)誤且在其他瀏覽器正常，通過本文你將學(xué)會如何解決此問題2013-08-08
上一篇簡單做了一個(gè)用ext寫的登陸界面，今天來實(shí)現(xiàn)登陸效果，主要是回顧下ext中表單提交方法的使用。2010-08-08