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 
] 
}); 
});