閑了將近二十天，一直在學(xué)習(xí)Extjs，昨天接到通知，下周將進(jìn)入新的項(xiàng)目組培訓(xùn)，培訓(xùn)內(nèi)容是Flex。
在學(xué)Extjs的時(shí)候，見(jiàn)過(guò)別人對(duì)Extjs和Flex的比較。記得當(dāng)時(shí)有人說(shuō)Extjs和Flex根本不是一個(gè)層次上的框架，但那時(shí)我依然連Flex是什么都沒(méi)有去查，而毅然的選擇了Extjs。但可笑的是，下一個(gè)項(xiàng)目的應(yīng)用就是Flex。
由于項(xiàng)目的緊張，也許對(duì)Extjs的學(xué)習(xí)將要告一段落了。所以，我該寫(xiě)點(diǎn)什么。
用Extjs做登錄
index.html
<div id="north-div"><a id="login" href="#">Login</a></div>
login.js
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif'; //替換默認(rèn)的空白圖片
Ext.QuickTips.init(); // 初始化鼠標(biāo)停留時(shí)的顯示框，這里用不上
// 點(diǎn)擊登錄時(shí)觸發(fā)的事件
onClickLogin = function() {
var loginUrl = '../../login.do'; // 登錄請(qǐng)求的url
// 這里L(fēng)ogin的Panel分為兩部分，logoPanel和formPanel
// 創(chuàng)建logoPanel對(duì)象
var logoPanel = new Ext.Panel( {
baseCls : 'x-plain',
html : 'Here is your logo
'
});
// 創(chuàng)建formPanel對(duì)象
var formPanel = new Ext.form.FormPanel( {
bodyStyle : 'padding:35px 25px 0',
baseCls : 'x-plain',
defaults : {
width : 200
},
defaultType : 'textfield',
frame : false,
id : 'login-form',
// form面板上的組件
items : [ {
fieldLabel : 'User Name',
name : 'name'
}, {
fieldLabel : 'Password',
inputType : 'password',
name : 'password'
}],
labelWidth : 120,
region : 'center',
url : loginUrl
});
// 創(chuàng)建window對(duì)象，用來(lái)裝置以上兩個(gè)面板，使login顯示在一個(gè)window上
var win = new Ext.Window( {
// window上的按鈕，按鈕時(shí)獨(dú)立的，也可以設(shè)置在formPanel里
buttons : [ {
handler : function() { // 按鈕login觸發(fā)的事件
form.submit( {
waitMsg : 'Please Wait',
reset : true,
success : this.Success, // 登錄成功的時(shí)候執(zhí)行
fail : this.Fail, // 登錄失敗的時(shí)候執(zhí)行
scope : onClickLogin // 這里是為了指定this的范圍
});
},
scope : onClickLogin,
text : 'LOGIN'
}, {
handler : function() { // 按鈕cancel觸發(fā)的事件
win.hide();
},
scope : onClickLogin,
text : 'CANCEL'
}],
buttonAlign : 'right',
closable : false,
draggable : true,
height : 200,
id : 'login-win',
layout : 'border',
plain : true,
// window上的組件
items : [logoPanel, formPanel],
title : 'Login',
width : 400
});
// 取得表單，參考login按鈕觸發(fā)的事件
form = formPanel.getForm();
// 顯示window
win.show();
// return里的為onClickLogin的共有函數(shù)
return {
Success : function(f, a) {
if (a && a.result) { //a表示action，a.result表示action返回的結(jié)果數(shù)據(jù)
win.destroy(true);
// setCookie
// set window.location
}
},
Fail : function(f, a) {
Ext.Msg.alert('Login failed');
}
};
};
// 設(shè)置login事件
Ext.get('login').on('click', onClickLogin);
});
Extjs是與后臺(tái)對(duì)立的框架，所以后臺(tái)的處理用什么是隨意的，只要能夠返回前臺(tái)可以識(shí)別的數(shù)據(jù)即可。
用Extjs做布局
js代碼片段：
Ext.contants = {};
Ext.contants.links = '<a id="link1" href="#">Link1</a><br><a id="link2" href="#">Link2</a>'
// 創(chuàng)建一個(gè)TabPanel作為中間的面板
var centerPanel = new Ext.TabPanel( {
region : 'center',
contentEl : 'center-div',
split : true,
border : true,
resizeTabs : true,
minTabWidth : 115,
tabWidth : 135,
enableTabScroll : true,
defaults : {
autoScroll : true
},
plugins : new Ext.ux.TabCloseMenu()
});
// 用Viewport來(lái)實(shí)現(xiàn)布局
var viewport = new Ext.Viewport( {
layout : 'border',
// items中包含東西南北中五個(gè)組件
items : [ {
// 我將北部設(shè)計(jì)為全局導(dǎo)航，比如可以把login的按鈕放在這里
title : 'Welcome to come China',
region : 'north',
contentEl : 'north-div',
split : true,
border : true,
collapsible : true,
height : 50,
minSize : 50,
maxSize : 120
}, {
// 空面板
region : 'south',
contentEl : 'south-div',
split : true,
border : true,
collapsible : true,
height : 50,
minSize : 50,
maxSize : 120
}, {
// 空面板
region : 'east',
contentEl : 'east-div',
split : true,
border : true,
collapsible : true,
width : 120,
minSize : 120,
maxSize : 200
}, {
// Links面板
title : 'Links',
region : 'west',
contentEl : 'west-div',
split : true,
border : true,
collapsible : true,
width : 150,
minSize : 120,
maxSize : 200,
layout : 'accordion',
layoutConfig : {
animate : true
},
// 面板中包含幾個(gè)組件
items : [ {
// 以其中一個(gè)為例，這里面有兩個(gè)links
html : Ext.contants.links,
title : 'Links',
autoScroll : true,
border : false,
iconCls : 'nav'
}, {
title : 'aaa',
html : 'aaa',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bbb',
html : 'bbb',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bbb',
html : 'ccc',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bb',
html : 'ddd',
border : false,
autoScroll : true,
iconCls : 'settings'
}, {
title : 'bbb',
html : 'eee',
border : false,
autoScroll : true,
iconCls : 'settings'
}]
}, centerPanel] //最后一個(gè)是中間的TabPanel
});
用事件來(lái)觸發(fā)centerPanel中添加一個(gè)裝有GridPanel的Tab，顯示新聞列表，TabPanel中添加一個(gè)按鈕實(shí)現(xiàn)添加新聞。
var zhaiiGrid;
// 在TabPanel中的Add按鈕觸發(fā)的事件，用來(lái)添加一條新信息
var addZhaii = function() {
var formPanel, win;
if (!formPanel) {
formPanel = new Ext.form.FormPanel( {
baseCls : 'x-plain',
defaults : {
width : 200
},
defaultType : 'textfield',
frame : false,
id : 'addZhaii-form',
items : [ {
fieldLabel : 'Title',
name : 'title'
}, {
fieldLabel : 'Contents',
xtype : 'htmleditor',
anchor : '95%',
allowBlank : false,
height : 200,
name : 'contents'
}],
labelWidth : 80,
region : 'center',
url : 'addZhaii.do'
});
}
if (!win) {
win = new Ext.Window( {
buttons : [ {
handler : function() {
form.submit( {
waitMsg : 'Please Wait',
reset : true,
// success : Login.Success,
scope : addZhaii
});
},
scope : addZhaii,
text : 'Add'
}, {
handler : function() {
win.hide();
},
scope : addZhaii,
text : 'Cancel'
}],
buttonAlign : 'right',
closable : false,
draggable : true,
height : 300,
id : 'addZhaii-win',
layout : 'border',
minHeight : 250,
minWidth : 530,
plain : true,
resizable : true,
items : [formPanel],
title : 'Link1 Window',
width : 650
});
}
form = formPanel.getForm();
win.show();
};
var addZhaiiAction = new Ext.Action( {
text : 'Add Zhaii',
handler : addZhaii, // 觸發(fā)上面定義的添加事件
iconCls : 'blist'
});
var addZhaiiTab = function() {
var expander = new Ext.grid.RowExpander( {
tpl : new Ext.Template('<p><b>Title:</b> {title}<br>',
'<p><b>Contents:</b> {contents}</p>')
});
var cm = new Ext.grid.ColumnModel([expander, {
header : 'id',
dataIndex : 'id'
}, {
header : 'title',
width : 300,
dataIndex : 'title'
}, {
header : 'zhaier',
dataIndex : 'zhaier'
}, {
header : 'date',
dataIndex : 'date'
}, {
header : 'sc',
dataIndex : 'sc'
}, {
header : 'hh',
dataIndex : 'hh'
}]);
var ds = new Ext.data.Store( {
proxy : new Ext.data.HttpProxy( {
url : '../../getZhaii.do'
}),
reader : new Ext.data.JsonReader( {
totalProperty : 'totalProperty',
root : 'root'
}, [ {
name : 'content'
}, {
name : 'hh'
}, {
name : 'sc'
}, {
name : 'date'
}, {
name : 'zhaier'
}, {
name : 'title'
}, {
name : 'id'
}])
});
ds.load( {
params : {
start : 0,
limit : 10
}
});
if (Ext.isEmpty(zhaiiGrid)) {
zhaiiGrid = new Ext.grid.GridPanel( {
store : ds,
cm : cm,
id : 'zhaiiGrid',
viewConfig : {
forceFit : true
},
plugins : expander,
collapsible : true,
animCollapse : false,
title : 'zhaiiGrid',
iconCls : 'icon-grid',
closable : true,
// top處添加事件按鈕
tbar : [addZhaiiAction],
// bottom處的分頁(yè)欄
bbar : new Ext.PagingToolbar( {
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
emptyMsg: '沒(méi)有記錄'
})
});
// .show()了才會(huì)顯示
centerPanel.add(zhaiiGrid).show();
} else if (zhaiiGrid = centerPanel.getItem('zhaiiGrid')) {
// zhaiiGrid.show();
} else {
zhaiiGrid = new Ext.grid.GridPanel( {
store : ds,
cm : cm,
id : 'zhaiiGrid',
viewConfig : {
forceFit : true
},
plugins : expander,
collapsible : true,
animCollapse : false,
title : 'adsfasd',
iconCls : 'icon-grid',
closable : true,
tbar : [addZhaiiAction],
bbar : new Ext.PagingToolbar( {
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
emptyMsg: '沒(méi)有記錄'
})
});
centerPanel.add(zhaiiGrid).show();
}
}
// 給link1添加事件
Ext.get('link1').on('click', addZhaiiTab);
// 初始化頁(yè)面時(shí)，便添加zhaiiTab
addZhaiiTab();
以上是一些代碼片斷，前幾天在研究desktop，想實(shí)現(xiàn)成動(dòng)態(tài)的頁(yè)面，代碼還沒(méi)寫(xiě)完。
暫時(shí)放下Extjs一些日子，明天開(kāi)始學(xué)習(xí)Flex，既然都是客戶(hù)端框架，應(yīng)該多少有些共通之處吧。誰(shuí)知道呢，學(xué)學(xué)看吧。
本文鏈接：http://www.aygfsteel.com/realsmy/archive/2008/01/12/174791.html
歡迎來(lái)訪(fǎng)！^.^!
本BLOG僅用于個(gè)人學(xué)習(xí)交流!
目的在于記錄個(gè)人成長(zhǎng).
所有文字均屬于個(gè)人理解.
如有錯(cuò)誤，望多多指教！不勝感激！