網路上看到的一個事例，其中包含了組件的定義拷貝下來供大家參考：
Ext.onReady(function(){
var dtCategory=[
['all','所有種類'],
['1','飲料'],
['2','調味品'],
['3','糖果'],
['4','乳製品'],
['5','穀粒/穀物'],
['6','肉類/家禽'],
['7','農產品'],
['8','海鮮']
]; >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",
typeAhead:true,
mode:" localcal> ",
triggerAction:"全部",
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',
區:'北',
autoHeight:true,
項目:[
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:"產品名稱",sortable:true},
{header:"產品種類",dataIndex:"CategoryName",sortable:true},
{header:"單價",dataIndex:"UnitPrice",sortable:true},
{header:"是否停產",dataIndex:"已停產",sortable:true},
{header:"規格" ,dataIndex:"QuantityPerUnit",sortable:true},
{header:"供貨商",dataIndex:"公司名稱",可排序: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,
cm:cmProduct,
store:stProduct,
cm:cmProduct,
store:stProduct,
LautoWidth: true,
selModel:new Ext.grid.RowSelectionModel({single:true}),
高度: screen.availHeight-190,
frame: true,
pageSize:20,
bbarame: true,
pageSize:20,
bbar :pgtbProduct,
//autoExpandColumn:6,
loadMask:true,
viewConfig:{
forceFit:true
}
}); data.Store({; : "stSupplier",
autoLoad:true,
代理: 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{
id :'pnProductRowOne',
邊框:false,
bodyStyle:'padding-top:10px;',
佈局:'列',
項目:[
new Ext.Panel({
columnWidth:.5,
border:false,
layout:'form',
labelWidth:60,
labelAlign:'right',
items:[
{elAlign:'right',
items:[
{
{
{
xtype:'textfield',
id:'產品名稱',
name:'產品名稱',
fieldLabel:'商品名稱',
anchor:' 95%'
}
]
}),
new Ext.Panel({
columnWidth:.25,
邊框:false,
佈局:'表單',
labelWidth: 60,
labelAlign:'右',
items:[
{
xtype:'radio',
id:'DiscontinuedOneID',
//hiddenName :'已停售',
name:'已停售',
inputValue:'1',
fieldLabel:'是否停售',
boxLabel:'是',
anchor:'95 % '
}
]
}),
new Ext.Panel({
columnWidth:.25,
邊框:false,
佈局:'表單',
邊框:false,
佈局:'表單',
labelWidth:60,
labelAlign:'右',
items:[
{
xtype:'radio',
id:'DiscontinuedTwoID',
//hiddenName: '/已停止',
name:'已停止',
checked:true,
inputValue:'0',
boxLabel:'否',
anchor:'95%'
}
]
})
]
}),
new Ext.Panel({
id:'pnProductRowTwo',
邊框:false,
佈局: '列',
items:[
new Ext.Panel({
columnWidth:.5,
邊框:false,
佈局:'表單',
labelWidth:60 ,
labelAlign:'右',
項目:[
{
xtype:'textfield',
id:'QuantityPerUnit',
名稱:'QuantityPerUnit',
fieldLabel :'規格',
anchor:'95%'
}
]
}),
new Ext.Panel({
columnWidth:.5,
邊框: false,
layout:'form',
labelWidth:60,
labelAlign:'right',
items:[
{
xtype:'textfield',
id :'UnitPrice',
name:'UnitPrice',
fieldLabel:'單價',
anchor:'95%'
}
]
})
]
}),
new Ext.Panel({
id:'pnProductRowThree',
邊框:false,
佈局:'列',
項目:[
new Ext .Panel({
columnWidth:.5,
邊框:false,
佈局:'表單',
labelWidth:60,
labelAlign:'右',
項目: [
{
xtype:'textfield',
id:'UnitsInStock',
name:'UnitsInStock',
fieldLabel:'庫存量',
anchor:'95% '
}
]
})
,
new Ext.Panel({
columnWidth:.5,
邊框:false,
佈局:'表單' ,
labelWidth:60,
labelAlign:'右',
items:[
{
xtype:'combo',
id:'CompanyName',
//名稱:'CompanyName',
hiddenName:'SupplierID',
fieldLabel:'供貨商',
displayField: 'cName',
valueField: 'sID',
mode: '本地',
typeAhead: true,
triggerAction: "all",
可編輯: false,
allowBlank: false,
autoSelect: true,
selectFoulectFoual: true
store : stSupplier,
錨:'95%'
}
]
})
]
})
]
});
var pnCategory=new Ext.Panel({
id:'pnCategory',
title:'商品相關種類資訊',
autoHeight:true,
items:[
new Ext.Panel( {
id:'pnCategoryRowOne',
邊框:false,
bodyStyle:'padding-top:10px;',
佈局:'列',
項目:[
new Ext.Panel({
columnWidth:.5,
border:false,
layout:'form',
labelWidth:60,
labelAlign:'right',
items: [
{
xtype:'textfield',
id:'類別名稱',
name:'類別名稱',
fieldLabel:'商品種類',
anchor :' 95%'
},
{
xtype:'textfield',
id:'描述',
name:'描述',
fieldLabel:'商品描述' ,
錨:'95%'
},
{
xtype:'隱藏',
id:'類別ID',
名稱:'類別ID',
fieldLabel :'種類編號'//這個是隱藏的
}
]
}),
new Ext.Panel({
columnWidth:.5,
border:false,
bodyStyle:'padding-left:25px;',
版面:'form',
labelWidth:60,
labelAlign:'right',
專案:[
{
{
項目:[
{
{ 項目:[ { { >xtype:'box',// id:'CategoryImage', 寬度:172, 高度:120, autoEl:{ 標籤:'圖片', 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. .JsonReader({
successProperty: 'success',//後台返回的json中成功與否的字段名稱
root: 'info'//後台返回的json中，資料字段名稱
},
[
'ProductName',
//'Discontinued',
'QuantityPerUnit',
'UnitPrice',
'UnitsInStock',
'UnitPrice',
'Units '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(){
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"),
waitM:'資料更新中...',
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
]
});
});
