网上看到的一个事例，其中包含了组件的定义拷贝下来供大家参考：
复制代码 代码如下:
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
]
});
});