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