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

Ext.onReady(function(){
vardtCategory=[
["all","所有种类"],
["1","Beverages"],
["2","Condiments"],
["3","Confections"],
["4","DairyProducts"],
["5","Grains/Cereals"],
["6","Meat/Poultry"],
["7","Produce"],
["8","Seafood"]
];
varstCategory=newExt.data.SimpleStore({
fields:["value","text"],
data:dtCategory
});
varcbCategory=newExt.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");
vartfName=newExt.form.TextField({
id:"tfName"
});
varbtnSearch=newExt.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()}});
}
});
varbtnHelp=newExt.Button({
text:"帮助",
iconCls:"btn_help"
})
vartb=newExt.Toolbar({
id:"tb",
items:[
"商品种类：",
cbCategory,
"-",
"商品名称：",
tfName,
btnSearch,
"->",
btnHelp
]
});
varpnNorth=newExt.Panel({
id:"pnNorth",
region:"north",
autoHeight:true,
items:[
tb
]
});
varurl="Default.aspx";
varstProduct=newExt.data.Store({
id:"st",
proxy:newExt.data.HttpProxy({url:url}),
reader:newExt.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()}});
varcmProduct=newExt.grid.ColumnModel([
newExt.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}
]);
varpgtbProduct=newExt.PagingToolbar({
id:"pgtbProduct",
displayInfo:true,
emptyMsg:"没有数据要显示！",
displayMsg:"当前为第{0}--{1}条，共{2}条数据",
store:stProduct,
pageSize:10
});
vargrdProduct=newExt.grid.GridPanel({
id:"grdProduct",
title:"商品信息",
cm:cmProduct,
store:stProduct,
autoWidth:true,
selModel:newExt.grid.RowSelectionModel({single:true}),
height:screen.availHeight-190,
frame:true,
pageSize:20,
bbar:pgtbProduct,
//autoExpandColumn:6,
loadMask:true,
viewConfig:{
forceFit:true
}
});
varstSupplier=newExt.data.Store({
id:"stSupplier",
autoLoad:true,
proxy:newExt.data.HttpProxy({url:"ProductInfo.aspx?type=getSupplierInfo"}),
reader:newExt.data.JsonReader({totalProperty:"totalProperty",root:"root",fields:[{name:"sID"},{name:"cName"}]})
});
varpnProduct=newExt.Panel({
id:"pnProduct",
title:"商品信息",
autoHeight:true,
items:[
newExt.Panel({
id:"pnProductRowOne",
border:false,
bodyStyle:"padding-top:10px;",
layout:"column",
items:[
newExt.Panel({
columnWidth:.5,
border:false,
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"textfield",
id:"ProductName",
name:"ProductName",
fieldLabel:"商品名称",
anchor:"95%"
}
]
}),
newExt.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%"
}
]
}),
newExt.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%"
}
]
})
]
}),
newExt.Panel({
id:"pnProductRowTwo",
border:false,
layout:"column",
items:[
newExt.Panel({
columnWidth:.5,
border:false,
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"textfield",
id:"QuantityPerUnit",
name:"QuantityPerUnit",
fieldLabel:"规格",
anchor:"95%"
}
]
}),
newExt.Panel({
columnWidth:.5,
border:false,
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"textfield",
id:"UnitPrice",
name:"UnitPrice",
fieldLabel:"单价",
anchor:"95%"
}
]
})
]
}),
newExt.Panel({
id:"pnProductRowThree",
border:false,
layout:"column",
items:[
newExt.Panel({
columnWidth:.5,
border:false,
layout:"form",
labelWidth:60,
labelAlign:"right",
items:[
{
xtype:"textfield",
id:"UnitsInStock",
name:"UnitsInStock",
fieldLabel:"库存量",
anchor:"95%"
}
]
})
,
newExt.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%"
}
]
})
]
})
]
});
varpnCategory=newExt.Panel({
id:"pnCategory",
title:"商品相关种类信息",
autoHeight:true,
items:[
newExt.Panel({
id:"pnCategoryRowOne",
border:false,
bodyStyle:"padding-top:10px;",
layout:"column",
items:[
newExt.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:"种类编号"//这个是隐藏的
}
]
}),
newExt.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"
}
}
]
})
]
})
]
});
vartpProduct=newExt.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
]
});
varfpProduct=newExt.FormPanel({//作为TabPanel的容器
id:"fpProduct",
reader:newExt.data.JsonReader({
successProperty:"success",//后台返回的json中成功与否的字段名称
root:"info"//后台返回的json中，数据字段名称
},
[
"ProductName",
//"Discontinued",
"QuantityPerUnit",
"UnitPrice",
"UnitsInStock",
"CategoryID",
"CategoryName",
"Description",
"SupplierID"
]
),
items:[
tpProduct
]
});
varwinProductInfo=newExt.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()){
varrecord=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){
varrow=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();
});
varpnCenter=newExt.Panel({
id:"pnCenter",
region:"center",
items:[
grdProduct
]
});
varvp=newExt.Viewport({
id:"vp",
layout:"border",
renderTo:Ext.getBody(),
items:[
pnNorth,
pnCenter
]
});
});