Extjs单独定义各组件的实例代码

网上看到的一个事例，其中包含了组件的定义拷贝下来供大家参考：
复制代码代码如下:
Ext.onReady（function（）{
var dtCategory=[
["all","所有种类"],
["1","Beverages"],
["2","Condiments"],
["3","Confections"],
["4","Dairy Products"],
["5","Grains/Cereals"],
["6","Meat/Poultry "],
["7","Produce"],
["8","Seafood"]
];
var stCategory=new Ext.data.SimpleStore（{
fields:["value","text"],
data:dtCategory
}）;
var cbCategory=new Ext.form.ComboBox（{
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:""
}）;
cbCategory.setValue（"all"）;
var tfName=new Ext.form.TextField（{
id:"tfName"
}）;
var btnSearch=new Ext.Button（{
id:"btnSearch",
iconCls:"btn_search",
text:"搜索",
handler:function（）{
stProduct.load（{params:{start:0,limit:10,categoryName:Ext.getCmp（"cbCategory"）.getValue（）,productName:Ext.getCmp（"tfName"）.getValue（）}}）;
}
}）;
var btnHelp=new Ext.Button（{
text:"帮助",
iconCls:"btn_help"
}）
var tb=new Ext.Toolbar（{
id:"tb",
items:[
"商品种类：",
cbCategory,
"-",
"商品名称：",
tfName,
btnSearch,
"->",
btnHelp
]
}）;
var pnNorth=new Ext.Panel（{
id:"pnNorth",
region:"north",
autoHeight:true,
items:[
tb
]
}）;
var url="Default.aspx";
var stProduct=new Ext.data.Store（{
id:"st",
proxy:new Ext.data.HttpProxy（{url:url}）,
reader:new Ext.data.JsonReader（{totalProperty:"totalProperty",root:"root",fields:[{name:"ProductID"},{name:"ProductName"},{name:"CategoryName"},{name:"UnitPrice"},{name:"Discontinued"},{name:"QuantityPerUnit"},{name:"CompanyName"}] }）//ProductID作为隐藏列，不显示在gridpanel中
}）;
stProduct.load（{params:{start:0,limit:10,categoryName:Ext.getCmp（"cbCategory"）.getValue（）,productName:Ext.getCmp（"tfName"）.getValue（）}}）;
var cmProduct=new Ext.grid.ColumnModel（[
new Ext.grid.RowNumberer（）,
{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 Ext.PagingToolbar（{
id:"pgtbProduct",
displayInfo:true,
emptyMsg:"没有数据要显示！",
displayMsg:"当前为第{0}--{1}条，共{2}条数据",
store:stProduct,
pageSize:10
}）;
var grdProduct=new Ext.grid.GridPanel（{
id:"grdProduct",
title:"商品信息",
cm:cmProduct,
store:stProduct,
autoWidth:true,
selModel:new Ext.grid.RowSelectionModel（{single:true}）,
height: screen.availHeight-190,
frame: true,
pageSize:20,
bbar:pgtbProduct,
//autoExpandColumn:6,
loadMask:true,
viewConfig:{
forceFit:true
}
}）;
var stSupplier = new Ext.data.Store（{
id: "stSupplier",
autoLoad:true,
proxy: new Ext.data.HttpProxy（{ url: "ProductInfo.aspx？type=getSupplierInfo" }）,
reader: new Ext.data.JsonReader（{ totalProperty: "totalProperty", root: "root", fields: [{ name: "sID" }, { name: "cName"}] }）
}）;
var pnProduct=new Ext.Panel（{
id:"pnProduct",
title:"商品信息",
autoHeight:true,
items:[
new Ext.Panel（{
id:"pnProductRowOne",
border:false,
bodyStyle:"padding-top:10px;",
layout:"column",
items:[
new Ext.Panel（{
columnWidth:.5,
border:false,
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"textfield",
id:"ProductName",
name:"ProductName",
fieldLabel:"商品名称",
anchor:"95%"
}
]
}）,
new Ext.Panel（{
columnWidth:.25,
border:false,
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"radio",
id:"DiscontinuedOneID",
//hiddenName:"Discontinued",
name:"Discontinued",
inputValue:"1",
fieldLabel:"是否停售",
boxLabel:"是",
anchor:"95%"
}
]
}）,
new Ext.Panel（{
columnWidth:.25,
border:false,
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"radio",
id:"DiscontinuedTwoID",
//hiddenName:"Discontinued",
name:"Discontinued",
checked:true,
inputValue:"0",
boxLabel:"否",
anchor:"95%"
}
]
}）
]
}）,
new Ext.Panel（{
id:"pnProductRowTwo",
border:false,
layout:"column",
items:[
new Ext.Panel（{
columnWidth:.5,
border:false,
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"textfield",
id:"QuantityPerUnit",
name:"QuantityPerUnit",
fieldLabel:"规格",
anchor:"95%"
}
]
}）,
new Ext.Panel（{
columnWidth:.5,
border:false,
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"textfield",
id:"UnitPrice",
name:"UnitPrice",
fieldLabel:"单价",
anchor:"95%"
}
]
}）
]
}）,
new Ext.Panel（{
id:"pnProductRowThree",
border:false,
layout:"column",
items:[
new Ext.Panel（{
columnWidth:.5,
border:false,
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"textfield",
id:"UnitsInStock",
name:"UnitsInStock",
fieldLabel:"库存量",
anchor:"95%"
}
]
}）
,
new Ext.Panel（{
columnWidth:.5,
border:false,
layout:"form",
labelWidth:60,
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:"95%"
}
]
}）
]
}）
]
}）;
var pnCategory=new Ext.Panel（{
id:"pnCategory",
title:"商品相关种类信息",
autoHeight:true,
items:[
new Ext.Panel（{
id:"pnCategoryRowOne",
border:false,
bodyStyle:"padding-top:10px;",
layout:"column",
items:[
new Ext.Panel（{
columnWidth:.5,
border:false,
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"textfield",
id:"CategoryName",
name:"CategoryName",
fieldLabel:"商品种类",
anchor:"95%"
},
{
xtype:"textfield",
id:"Description",
name:"Description",
fieldLabel:"商品描述",
anchor:"95%"
},
{
xtype:"hidden",
id:"CategoryID",
name:"CategoryID",
fieldLabel:"种类编号"//这个是隐藏的
}
]
}）,
new Ext.Panel（{
columnWidth:.5,
border:false,
bodyStyle:"padding-left:25px;",
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"box",//
id:"CategoryImage",
width:172,
height:120,
autoEl:{
tag:"image",
src:"tempFile/1.png"
}
}
]
}）
]
}）
]
}）;
var tpProduct=new Ext.TabPanel（{//很多时候我们可能是一个表单放在不同的tab中，为了方便提交和加载数据可以在tabpanel最外层放一个formpanel，但是显示就有问题，这个时候可以通过设置tabpanel高度和deferredRender、layoutOnTabChange两个属性来调整
id:"tpProduct",
deferredRender:false,//是否第一次显示就渲染所有tab（默认为true）
layoutOnTabChange:true,
//height:300,
//autoTabs:true,
activeTab:0,
border:false,
items:[
pnProduct,
pnCategory
]
}）;
var fpProduct=new Ext.FormPanel（{//作为TabPanel的容器
id:"fpProduct",
reader: new Ext.data.JsonReader（{
successProperty: "success",//后台返回的json中成功与否的字段名称
root: "info"//后台返回的json中，数据字段名称
},
[
"ProductName",
//"Discontinued",
"QuantityPerUnit",
"UnitPrice",
"UnitsInStock",
"CategoryID",
"CategoryName",
"Description",
"SupplierID"
]
）,
items:[
tpProduct
]
}）;
var winProductInfo=new Ext.Window（{
title:"商品信息",
width:450,
height:300,
layout:"fit",
closeAction:"hide",
plain:true,//true则主体背景透明，false则和主体背景有些差别
collapsible:true,//是否可收缩
modal:true,//是否为模式窗体
items:[
fpProduct
],
buttons:[//窗体按钮
{
text:"提交",
handler:function（）{
if（fpProduct.getForm（）.isValid（））{
var record=grdProduct.getSelectionModel（）.getSelected（）;
fpProduct.getForm（）.submit（{
method:"post",
url:"ProductInfo.aspx？type=updateProductInfo&productId="+record.get（"ProductID"）,
waitMsg:"数据更新中...",
success:function（）{
stProduct.reload（）;
Ext.Msg.alert（"系统提示","提交成功！"）;
},
failure:function（）{
Ext.Msg.alert（"系统提示","提交失败！"）;
}
}）;
}
}
},
{
text:"关闭",
handler:function（）{//点击时触发的事件
winProductInfo.hide（）;
}
}
]
}）;
// Ext.getCmp（"tp"）.on（"tabchange",function（tabPanel,tab）{
// Ext.Msg.alert（"系统提示","Tab标题："+tab.title）;
// }）;
grdProduct.on（"rowdblclick",function（grid,rowIndex,e）{
var row=grid.getStore（）.getAt（rowIndex）.data;
//Ext.Msg.alert（"系统提示","行："+rowIndex+" 产品ID："+row.ProductID）;
fpProduct.form.load（{//利用load自动填充，注意表单控件字段一定要和json中一致
url:"ProductInfo.aspx？type=getProductInfo&productId="+row.ProductID,
waitMsg:"数据加载中...",
success:function（）{
//alert（"tempFile/"+row.CategoryName+".png"）;
if（row.Discontinued=="是"）{
Ext.getCmp（"DiscontinuedOneID"）.setValue（true）;
}else{
Ext.getCmp（"DiscontinuedTwoID"）.setValue（true）;
}
Ext.getCmp（"CategoryImage"）.getEl（）.dom.src="tempFile/"+row.CategoryName+".png";
},
failure:function（）{
Ext.Msg.alert（"系统提示","数据加载失败！"）;
}
}）;
winProductInfo.show（）;
}）;
var pnCenter=new Ext.Panel（{
id:"pnCenter",
region:"center",
items:[
grdProduct
]
}）;
var vp=new Ext.Viewport（{
id:"vp",
layout:"border",
renderTo:Ext.getBody（）,
items:[
pnNorth,
pnCenter
]
}）;
}）;