Extjs는 각 구성요소의 인스턴스 코드를 별도로 정의합니다_extjs

온라인에서 본 예에는 참조용으로 복사된 구성 요소 정의가 포함되어 있습니다.

코드 복사 코드는 다음과 같습니다.

Ext.onReady(function(){
var dtCategory=[
['all','所有种类'],
['1','Beverages'],
['2','조미료'],
['3','과자'],
['4','유제품'],
['5','곡물/곡류 '],
['6','고기/가금류'],
['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:"请选择商product种类...",
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',
항목:[
'商품种类：',
cbCategory,
'-',
'商품명称：',
tfName,
btnSearch ,
'->',
btnHelp
]
});
var pnNorth=new Ext.Panel({
id:'pnNorth',
지역:'north',
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:"产productname称",dataIndex:"ProductName",sortable:true},
{header:"产품种类",dataIndex:"CategoryName",sortable:true},
{header:"单价",dataIndex:"UnitPrice",sortable:true},
{header:"是否停产",dataIndex:"단종",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:"商product信息",
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:'商product信息',
autoHeight:true,
items:[
new Ext. 패널({
id:'pnProductRowOne',
border:false,
bodyStyle:'padding-top:10px;',
레이아웃:'column',
항목:[
new Ext.Panel({
columnWidth:.5,
border:false,
layout:'form',
labelWidth:60,
labelAlign:'right',
항목:[
{
xtype:'textfield',
id:'ProductName',
name:'ProductName',
fieldLabel:'商productname称',
anchor:' 95%'
}
]
}),
new Ext.Panel({
columnWidth:.25,
border:false,
layout:'form',
labelWidth:60,
labelAlign:'right',
items:[
{
xtype:'radio',
id:'DiscontinuedOneID',
//hiddenName :'단종',
이름:'단종',
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: '단종',
이름:'단종',
선택:true,
inputValue:'0',
boxLabel:'否',
anchor:'95%'
}
]
})
]
}),
new Ext.Panel({
id:'pnProductRowTwo',
border:false,
layout: 'column',
항목:[
new Ext.Panel({
columnWidth:.5,
border:false,
layout:'form',
labelWidth:60,
labelAlign:'right',
항목:[
{
xtype:'textfield',
id:'QuantityPerUnit',
name:'QuantityPerUnit',
fieldLabel :'规格',
anchor:'95%'
}
]
}),
new Ext.Panel({
columnWidth:.5,
border: false,
레이아웃:'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',
항목:[
{
xtype:'textfield',
id:'UnitsInStock',
name:'UnitsInStock',
fieldLabel:'库存weight',
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,
항목:[
new Ext.Panel({
id:'pnCategoryRowOne',
border:false,
bodyStyle:'padding-top:10px;',
레이아웃:'column',
항목:[
new Ext.Panel({
columnWidth:.5,
border:false,
layout:'form',
labelWidth:60,
labelAlign:'right',
항목:[
{
xtype:'textfield',
id:'CategoryName',
name:'CategoryName',
fieldLabel:'商品种类',
anchor :'95%'
},
{
xtype:'textfield',
id:'Description',
name:'Description',
fieldLabel:'商product描述' ,
anchor:'95%'
},
{
xtype:'hidden',
id:'CategoryID',
name:'CategoryID',
fieldLabel :'种类编号'//这个是隐藏的
}
]
}),
new Ext.Panel({
columnWidth:.5,
border:false,
bodyStyle:'padding-left:25px;',
레이아웃:'form',
labelWidth:60,
labelAlign:'right',
항목:[
{
xtype:'box',//
id:'CategoryImage',
너비:172,
높이:120,
autoEl:{
tag:'image',
src:'tempFile/1.png'
}
}
]
})
]
})
]
}; 질문, 이때
id:'tpProduct',
deferredRender:false, // 모든 탭을 처음으로 렌더링할지 여부를 설정하여 탭 패널 높이와 deferredRender 및layoutOnTabChange 속성을 조정할 수 있습니다(기본값은 true)
layoutOnTabChange:true,
//height:300,
//autoTabs:true,
activeTab:0,
border:false,
항목:[
pnProduct,
pnCategory
]
})
var fpProduct=new Ext.FormPanel({//Container as TabPanel
id:'fpProduct',
reader: new Ext. data .JsonReader({
successProperty: 'success',//백그라운드에서 반환된 json의 성공 또는 실패 필드 이름
root: 'info'//반환된 json의 데이터 필드 이름 배경별
},
[
'ProductName',
//'Discontinued',
'QuantityPerUnit',
'UnitPrice',
'UnitsInStock',
'CategoryID',
'CategoryName',
'설명',
'SupplierID'
]
),
items:[
tpProduct
]
})
var winProductInfo=new Ext.Window({
제목:'제품 정보',
너비:450,
높이:300,
레이아웃:'맞춤',
closeAction:'hide' ,
plain:true,//true는 기본 배경이 투명함을 의미하고, false는 기본 배경과 다소 다름을 의미합니다
collapsible:true,//축소 가능 여부
modal:true,//모달 형식인지 여부
items:[
fpProduct
],
buttons:[//Form 버튼
{
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:'Close',
handler:function(){//클릭 시 이벤트 발생
winProductInfo.hide(); >}
}
]
});
// Ext.getCmp('tp').on("tabchange",function(tabPanel,tab){
// Ext . Msg.alert("시스템 프롬프트","탭 제목:" 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({//자동으로 채우려면 로드를 사용하세요. 양식 제어 필드는 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',
지역:'center',
항목:[
grdProduct
]
})
var vp=new Ext.Viewport({
id:'vp',
레이아웃:'테두리',
renderTo:Ext.getBody(),
항목:[
pnNorth,
pnCenter
]
});