Extjs單獨定義各組件的實例代碼

　　網上看到的一個事例其中包含了組件的定義拷貝下來供大家參考

復制代碼 代碼如下:

　　
ExtonReady(function(){
var dtCategory=[
[all所有種類]
[Beverages]
[Condiments]
[Confections]
[Dairy Products]
[Grains/Cereals]
[Meat/Poultry ]
[Produce]
[Seafood]
];
var stCategory=new ExtdataSimpleStore({
fields:[valuetext]
data:dtCategory
});
var cbCategory=new ExtformComboBox({
id:"cbCategory"
store:stCategory
displayField:"text"
valueField:"value"
typeAhead:true
mode:"local"
triggerAction:"all"
emptyText:"請選擇商品種類"
editable:false
allowBlank:false
blankText:"商品種類必須選擇"
autoSelect:true
selectOnFoucus:true
value:
dfval:
});
cbCategorysetValue("all");
var tfName=new ExtformTextField({
id:tfName
});
var btnSearch=new ExtButton({
id:btnSearch
iconCls:btn_search
text:搜索
handler:function(){
stProductload({params:{start:limit:categoryName:ExtgetCmp("cbCategory")getValue()productName:ExtgetCmp("tfName")getValue()}});
}
});
var btnHelp=new ExtButton({
text:幫助
iconCls:btn_help
})
var tb=new ExtToolbar({
id:tb
items:[
商品種類
cbCategory

商品名稱
tfName
btnSearch
>
btnHelp
]
});
var pnNorth=new ExtPanel({
id:pnNorth
region:north
autoHeight:true
items:[
tb
]
});
var url="Defaultaspx";
var stProduct=new ExtdataStore({
id:"st"
proxy:new ExtdataHttpProxy({url:url})
reader:new ExtdataJsonReader({totalProperty:"totalProperty"root:"root"fields:[{name:"ProductID"}{name:"ProductName"}{name:"CategoryName"}{name:UnitPrice}{name:Discontinued}{name:QuantityPerUnit}{name:CompanyName}] })//ProductID作為隱藏列不顯示在gridpanel中
});
stProductload({params:{start:limit:categoryName:ExtgetCmp("cbCategory")getValue()productName:ExtgetCmp("tfName")getValue()}});
var cmProduct=new ExtgridColumnModel([
new ExtgridRowNumberer()
{header:"產品名稱"dataIndex:"ProductName"sortable:true}
{header:"產品種類"dataIndex:"CategoryName"sortable:true}
{header:"單價"dataIndex:"UnitPrice"sortable:true}
{header:"是否停產"dataIndex:"Discontinued"sortable:true}
{header:"規格"dataIndex:"QuantityPerUnit"sortable:true}
{header:"供貨商"dataIndex:"CompanyName"sortable:true}
]);
var pgtbProduct=new ExtPagingToolbar({
id:"pgtbProduct"
displayInfo:true
emptyMsg:"沒有數據要顯示！"
displayMsg:"當前為第{}{}條共{}條數據"
store:stProduct
pageSize:
});
var grdProduct=new ExtgridGridPanel({
id:"grdProduct"
title:"商品信息"
cm:cmProduct
store:stProduct
autoWidth:true
selModel:new ExtgridRowSelectionModel({single:true})
height: screenavailHeight
frame: true
pageSize:
bbar:pgtbProduct
//autoExpandColumn:
loadMask:true
viewConfig:{
forceFit:true
}
});
var stSupplier = new ExtdataStore({
id: "stSupplier"
autoLoad:true
proxy: new ExtdataHttpProxy({ url: "ProductInfoaspx?type=getSupplierInfo" })
reader: new ExtdataJsonReader({ totalProperty: "totalProperty" root: "root" fields: [{ name: "sID" } { name: "cName"}] })
});
var pnProduct=new ExtPanel({
id:pnProduct
title:商品信息
autoHeight:true
items:[
new ExtPanel({
id:pnProductRowOne
border:false
bodyStyle:paddingtop:px;
layout:column
items:[
new ExtPanel({
columnWidth:
border:false
layout:form
labelWidth:
labelAlign:right
items:[
{
xtype:textfield
id:ProductName
name:ProductName
fieldLabel:商品名稱
anchor:%
}
]
})
new ExtPanel({
columnWidth:
border:false
layout:form
labelWidth:
labelAlign:right
items:[
{
xtype:radio
id:DiscontinuedOneID
//hiddenName:Discontinued
name:Discontinued
inputValue:
fieldLabel:是否停售
boxLabel:是
anchor:%
}
]
})
new ExtPanel({
columnWidth:
border:false
layout:form
labelWidth:
labelAlign:right
items:[
{
xtype:radio
id:DiscontinuedTwoID
//hiddenName:Discontinued
name:Discontinued
checked:true
inputValue:
boxLabel:否
anchor:%
}
]
})
]
})
new ExtPanel({
id:pnProductRowTwo
border:false
layout:column
items:[
new ExtPanel({
columnWidth:
border:false
layout:form
labelWidth:
labelAlign:right
items:[
{
xtype:textfield
id:QuantityPerUnit
name:QuantityPerUnit
fieldLabel:規格
anchor:%
}
]
})
new ExtPanel({
columnWidth:
border:false
layout:form
labelWidth:
labelAlign:right
items:[
{
xtype:textfield
id:UnitPrice
name:UnitPrice
fieldLabel:單價
anchor:%
}
]
})
]
})
new ExtPanel({
id:pnProductRowThree
border:false
layout:column
items:[
new ExtPanel({
columnWidth:
border:false
layout:form
labelWidth:
labelAlign:right
items:[
{
xtype:textfield
id:UnitsInStock
name:UnitsInStock
fieldLabel:庫存量
anchor:%
}
]
})

new ExtPanel({
columnWidth:
border:false
layout:form
labelWidth:
labelAlign:right
items:[
{
xtype:combo
id:CommpanyName
//name:CommpanyName
hiddenName:SupplierID
fieldLabel:供貨商
displayField: cName
valueField: sID
mode: local
typeAhead: true
triggerAction: "all"
editable: false
allowBlank: false
autoSelect: true
selectOnFoucus: true
store: stSupplier
anchor:%
}
]
})
]
})
]
});
var pnCategory=new ExtPanel({
id:pnCategory
title:商品相關種類信息
autoHeight:true
items:[
new ExtPanel({
id:pnCategoryRowOne
border:false
bodyStyle:paddingtop:px;
layout:column
items:[
new ExtPanel({
columnWidth:
border:false
layout:form
labelWidth:
labelAlign:right
items:[
{
xtype:textfield
id:CategoryName
name:CategoryName
fieldLabel:商品種類
anchor:%
}
{
xtype:textfield
id:Description
name:Description
fieldLabel:商品描述
anchor:%
}
{
xtype:hidden
id:CategoryID
name:CategoryID
fieldLabel:種類編號//這個是隱藏的
}
]
})
new ExtPanel({
columnWidth:
border:false
bodyStyle:paddingleft:px;
layout:form
labelWidth:
labelAlign:right
items:[
{
xtype:box//
id:CategoryImage
width:
height:
autoEl:{
tag:image
src:tempFile/png
}
}
]
})
]
})
]
});
var tpProduct=new ExtTabPanel({//很多時候我們可能是一個表單放在不同的tab中為了方便提交和加載數據可以在tabpanel最外層放一個 formpanel但是顯示就有問題這個時候可以通過設置tabpanel高度和deferredRenderlayoutOnTabChange 兩個屬性來調整
id:tpProduct
deferredRender:false//是否第一次顯示就渲染所有tab（默認為true）
layoutOnTabChange:true
//height:
//autoTabs:true
activeTab:
border:false
items:[
pnProduct
pnCategory
]
});
var fpProduct=new ExtFormPanel({//作為TabPanel的容器
id:fpProduct
reader: new ExtdataJsonReader({
successProperty: success//後台返回的json中成功與否的字段名稱
root: info//後台返回的json中數據字段名稱
}
[
ProductName
//Discontinued
QuantityPerUnit
UnitPrice
UnitsInStock
CategoryID
CategoryName
Description
SupplierID
]
)
items:[
tpProduct
]
});
var winProductInfo=new ExtWindow({
title:商品信息
width:
height:
layout:fit
closeAction:hide
plain:true//true則主體背景透明false則和主體背景有些差別
collapsible:true//是否可收縮
modal:true//是否為模式窗體
items:[
fpProduct
]
buttons:[//窗體按鈕
{
text:提交
handler:function(){
if(fpProductgetForm()isValid()){
var record=grdProductgetSelectionModel()getSelected();
fpProductgetForm()submit({
method:post
url:ProductInfoaspx?type=updateProductInfo&productId=+recordget("ProductID")
waitMsg:數據更新中
success:function(){
stProductreload();
ExtMsgalert("系統提示""提交成功！");
}
failure:function(){
ExtMsgalert("系統提示""提交失敗！");
}
});
}
}
}
{
text:關閉
handler:function(){//點擊時觸發的事件
winProductInfohide();
}
}
]
});
// ExtgetCmp(tp)on("tabchange"function(tabPaneltab){
// ExtMsgalert("系統提示""Tab標題"+tabtitle);
// });
grdProducton("rowdblclick"function(gridrowIndexe){
var row=gridgetStore()getAt(rowIndex)data;
//ExtMsgalert("系統提示""行"+rowIndex+" 產品ID"+rowProductID);
fpProductformload({//利用load自動填充注意表單控件字段一定要和json中一致
url:ProductInfoaspx?type=getProductInfo&productId=+rowProductID
waitMsg:數據加載中
success:function(){
//alert("tempFile/"+rowCategoryName+"png");
if(rowDiscontinued=="是"){
ExtgetCmp(DiscontinuedOneID)setValue(true);
}else{
ExtgetCmp(DiscontinuedTwoID)setValue(true);
}
ExtgetCmp(CategoryImage)getEl()domsrc="tempFile/"+rowCategoryName+"png";
}
failure:function(){
ExtMsgalert("系統提示""數據加載失敗！");
}
});
winProductInfoshow();
});
var pnCenter=new ExtPanel({
id:pnCenter
region:center
items:[
grdProduct
]
});
var vp=new ExtViewport({
id:vp
layout:border
renderTo:ExtgetBody()
items:[
pnNorth
pnCenter
]
});
});

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19963.html