最近工做中用到了Ext,對於剛接觸Ext的我來講簡直就是菜鳥還菜鳥,我問身邊的人Ext怎麼這麼難,他們告訴我叫我多看看Thinking in java,呵呵,他們說EXT用的是OO的思想,可是在個人印象中OO.equals("0"),不過也沒我想的那麼遭,Ext並非特難學,多是剛入門的緣由吧,其實Ext整體給個人感受就像JAVA中的SWING,無論是從佈局仍是從他處理的事件給個人整體的感受就是很像,雖然如今大部分的公司都不用SWING了,可是當初學SWING的時候仍是比較感興趣的,可是爲何學Ext就頭大呢,呵呵,無論怎麼樣既然選擇了幹開發那就好好學吧,學了總比沒學的好。不會思想那我就依葫蘆畫瓢吧。今天寫了Ext三個例子。都不較簡單,用的組件式FormPanel和grid。javascript
1:FormPanelcss
Ext.onReady(function(){
//Ext.QuickTips.init();
//Ext.form.Field.prototype.msgTarget='side';
var simple=new Ext.FormPanel({
labelWidth:75,
frame:true,
title:'',
bodyStyle:'padding:5px 5px 0',
width:350,
defaultType:'textfield',
items:[
{fieldLabel:'業務日期從',
name:'trStartDate',
allowBlank:false,
blankText:'業務日期不能爲空'},
{fieldLabel:'到業務日期爲止',
name:'trStopDate',
allowBlank:false,
blankText:'業務日期不能爲空'
},
{
fieldLabel:'機構號',
name:'orgCode',
allowBlank:false,
blankText:'機構號不能爲空'
},
{
fieldLabel:'櫃員',
name:'trTelr',
allowBlank:false,
blankText:'櫃員號不能爲空'
},{
fieldLabel:'總張數',
name:'allCount',
allowBlank:false,
blankText:'總張數不能爲空'
}],
buttons:[{
text:'肯定',
handler:function(){}
},
{
text:'提交',
handler:function(){}
}
]
});
simple.render('ycyhScanPanel');
});html
2:主要是實現佈局,佈局的整體圖:java
用的是borderlayout的佈局。實現也很簡單。實現代碼以下:web
Ext.onReady(function(){
Ext.useShims=true;
function setFontSize(name, size){
return "<font size=" + size + ">" + name + "</font>";
}
//東邊佈局用到的數據
var eastImagePanel=new Ext.Panel({
id:"showImagePanel",
width:800,
height:385,
autoScroll:false,
region:"center",
html:'<iframe name="imageFrame" id="imageFrame" scrolling="no" frameborder="0" width="100%" height="100%" src="../ShowImage.jsp?imageWidth=750&imageHeight=320"></iframe>'
});
//西邊佈局用到的數據
var vchGridData={
totalCount:0,
vchFileRows:[]
};
var vchGridStore=new Ext.data.Store({
autoDestroy:false,
remoteSort:true,
proxy:new Ext.data.MemoryProxy(vchGridData),
reader:new Ext.data.JsonReader({
idProperty:"vchId",
root:"vchFileRows",
totalProperty:"totalCount",
fields:[
{name:"ck",type:"bool"},
{name:"vchType",type:"string"},
{name:"vchId",type:"string"},
{name:"mainFlag"}
]
})
});
//西邊憑證類佈局面板
function setImageFileType(value){
var imageFileType;
try{
imageFileType=_jsonObj.imageFileTypeViewMap[value];
if(imageFileType==""||imageFileType==null){
return value;
}else{
return imageFileType;
}
}catch(e){
return value;
}
}
var checkColumn=new Ext.grid.CheckColumn({
header:"",
dataIndex:"ck",
width:5,
sortable:false,
menuDisabled:true
});
var vchFileGridCM=new Ext.grid.ColumnModel({
defaults:{
sortable:false
},
columns:[
checkColumn,
{
header:"憑證名稱",
dataIndex:"vchType",
width:110,
renderer: setImageFileType //setImageFileType 某function
},
{
header:"流水號",
dataIndex:"cltseq",
width:70,
menuDisabled:true
},{
id:"vchId",
header:"vchId",
dataIndex:"vchId",
hidden:true
}]
});
var westVchGridPanel=new Ext.grid.EditorGridPanel({
store:vchGridStore,//數據來源
cm:vchFileGridCM,//複選框
sm:new Ext.grid.RowSelectionModel({singleSelect:true}),//只能進行單選
width:312,
height:385,
title:"憑證信息",
frame:false,
plugins:checkColumn,
clickToEdit:2,
border:false,
split:true,
columnLines:true,
region:"west",
collapsible:true,
enableDragDrop:true,
loadMask:{msg:"加載數據中,請稍候..."},
trackMouseOver:true,
viewConfig:{
scrollOffset:0,
forceFit:true
}
});
//南邊面板及佈局
var dsTradeGridData={
dsTradeRows:[]
};
var dsTradeGridCM=new Ext.grid.ColumnModel({
defaults:{
sortable:false
},
columns:[
{
header:"流水號",
dataIndex:"cltSeq",
width:40,
menuDisabled:true,
sortable:true
},
{
header:"金額",
dataIndex:"txnAmt",
width:50,
menuDisabled:true,
sortable:true
},{
id:"pkId",
header:"pkId",
dataIndex:"pkId",
hidden:true
}
]
});
var dsTradeGridStore=new Ext.data.Store({
autoDestroy:true,
proxy:new Ext.data.MemoryProxy(dsTradeGridData),
reader:new Ext.data.JsonReader({
idProperty:"pkId",
root:"dsTradeRows",
totalProperty:"results",
fields:[{name:"cltSeq",type:"string"},{name:"txnAmt",type:"string"},{name:"txnCde",type:"string"},{name:"accNo",type:"string"}]
})
});
var dsTradeGrid=new Ext.grid.EditorGridPanel({
store:dsTradeGridStore,
cm:dsTradeGridCM,
sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
width:800,
height:150,
title:"流水信息",
frame:false,
clicksToEdit:2,
border:false,
columnLines:true,
region:"west",
split:true,
loadMask:true,
trackMouseOver:true,
viewConfig:{
scrollOffset:0,
forceFit:true
}
});
dsTradeGridStore.load({
callback:function(){
}
});
var dsTradeNumLabel=new Ext.form.Label({
//anchor:"100%",
html:setFontSize("流水號", 2),
x:15,
y:5
});
var dsTradeNumField=new Ext.form.TextField({
//anchor:"98%",
x:70,
y:5,
width:160
});
var amountLabel=new Ext.form.Label({
html:setFontSize("金額", 2),
x:15,
y:30
});
var amountField=new Ext.form.TextField({
anchor:"98%",
x:70,
y:30,
width:160
});
var accountLabel=new Ext.form.Label({
html:setFontSize("帳號",2),
x:15,
y:55
});
var accountField=new Ext.form.TextField({
anchor:"98%",
x:70,
y:55,
width:160
});
var searchDSTradeButton=new Ext.Button({
anchor:"98%",
text:setFontSize("查詢流水",2),
x:190,
y:95
});
searchDSTradeButton.on("click",function(){
//loadServerDSTrades();
});
var sourthTradePanel_R=new Ext.Panel({
title:"請輸入憑證信息",
anchor:"100%",
width:250,
height:150,
layout:"absolute",
region:"center",
items:[
dsTradeNumLabel,amountLabel,dsTradeNumField,amountField,accountLabel,accountField,searchDSTradeButton
]
});
var sourthTradePanel=new Ext.Panel({
width:800,
height:180,
layout:"border",
region:"south",
split:true,
items:[dsTradeGrid,sourthTradePanel_R]
});
var submitButton=new Ext.Button({
text:setFontSize("提交",2),
x:700,
style:{
marginLeft:'50px'
},
// width:300,
// height:150,
y:5
});
submitButton.on("click",function(){
});
var insertExceptionBillButton=new Ext.Button({
text:setFontSize("異常處理",2),
style:{
marginLeft:'60px'
},
x:500,
y:5
});
insertExceptionBillButton.on("click",function(){
});
var gouduiButton=new Ext.Button({
text:setFontSize("勾對",2),
// width:300,
// height:150,
style:{
marginLeft:'70px'
},
x:600,
y:5
});
gouduiButton.on("click",function(){
});
//北邊按鈕面板
var northButtonPanel=new Ext.Panel({
width:800,
height:35,
layout:"absolute",
region:"north",
items:[insertExceptionBillButton,gouduiButton,submitButton]
});
//設置面板,及佈局
var ycyhCheckPanel=new Ext.Panel({
id:"cyp",
title:"信息覈對",
width:800,
height:600,
layout:"border",
region:"center",
renderTo:"ycyhCheckPanel",
items:[northButtonPanel,sourthTradePanel,westVchGridPanel,eastImagePanel]
});
//設置整個面板的可見區域
var ycyhCheckViewport=new Ext.Viewport({
width:800,
height:600,
layout:"border",
items:[ycyhCheckPanel]
});
ycyhCheckPanel.getEl().center();
ycyhCheckPanel.focus();
// ycyhCheckPanel.render();
});json
3:這個專門學的一個grid中的Store類,其實這個才真正是學Ext入手的第一個例子。mvc
學這個須要作如下步驟:eclipse
(1):eclipse下建個web工程,在WwebContent下新建個js文件夾用來存放ext的插件。jsp
(2):新建個本身用的文件夾,該文件夾下建三個文件分別是:xx.js,xx.jsp,xxx.xmlide
其中xx.xml是用來存放數據的,xx.jsp是用來進行展示的,xx.js是用來控制的,這個就有點體現了MVC的思想,OO思想大部分都蘊含着MVC的思想.
(3)mvc中的內容
(a):xx.js的內容
Ext.onReady(function(){
var ds=new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'/tests/extlx/getUserList.xml'}),
reader:new Ext.data.XmlReader({
record:'item',
id:'ID',
totalRecords:"recCount"
},
['Name','bIsAdministrator','bIsActive','tsDateLastLogin'])
});
ds.on('load',function(storeObj,recordList,paramsObj){
alert('getUserList.xml中的記錄加載完畢\n當前取得的記錄數:'+storeObj.getCount());
});
ds.load({params:{start:0,limit:25}});
});
(b):xx.xml的內容:
<userList>
<recCount>99</recCount>
<item>
<ID>2350</ID>
<Name>燚</Name>
<bisAdministrator>0</bisAdministrator>
<bIsActive>1</bIsActive>
<tsDateLastLogin>2007-05-01T14:34:57</tsDateLastLogin>
</item>
<item>
<ID>2351</ID>
<Name>炎 炎</Name>
<bisAdministrator>0</bisAdministrator>
<bIsActive>1</bIsActive>
<tsDateLastLogin>2007-05-01T14:34:23</tsDateLastLogin>
</item>
</userList>
(C):xx.jsp
jsp就是用來引入js腳本的。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/extjs3.1.1/resources/css/ext-all.css"/>
<script type="text/javascript"
src="<%=request.getContextPath()%>/js/extjs3.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/extjs3.1.1/ext-all.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/extlx/extlx.js"></script>
</head>
<body>
</body>
</html>
其實我寫的不算是博客,就是想記點東西而已,能對別人有幫助的話,我很開心,沒幫助的話 我本身當練習。有問題你們能夠多多指教。