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