Extjsは各コンポーネントのインスタンスコードを個別に定義する_extjs

オンラインで見た例。参照のためにコピーされたコンポーネント定義が含まれています:

コードをコピーします コードは次のとおりです:

Ext.onReady(function(){
var dtCategory=[
['all','すべて种类'],
['1','Beverages'],
['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",
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:"製品ID"},{name:"製品名"},{name:"カテゴリ名"},{name:'単価' },{name:'Discontinued'},{name:'QuantityPerUnit'},{name:'CompanyName'}] })//ProductID 作隐藏列，グリッドパネル内に不表示
});
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:"廃止",sortable:true},
{header:"规格",dataIndex:"単位あたりの数量",sortable:true},
{header:"供給商",dataIndex:"会社名",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})、
高さ: screen.availHeight-190、
フレーム: true、
pageSize:20、
bbar :pgtbProduct,
//autoExpandColumn:6,
loadMask:true,
viewConfig:{
forceFit:true
}
}); 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", フィールド: [{ 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',
item:[
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 :'廃止',
name:'廃止',
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: '廃止されました'、
name:'廃止'、
checked:true、
inputValue:'0'、
boxLabel:'否'、
アンカー:'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:'CompanyName',
//name :'CompanyName',
hiddenName:'SupplierID',
fieldLabel:'供給商',
displayField:'cName',
valueField:'sID',
mode:'local '、
typeAhead: true、
triggerAction: "all"、
editable: false、
allowBlank: false、
autoSelect: true、
selectOnFoucus: true、
store : stSupplier,
アンカー:'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',
item:[
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'
}
}
]
})
]
})
]
}; 質問です。現時点では、
id:'tpProduct'、
deferredRender:false、// すべてのタブを初めてレンダリングするかどうかを設定することで、タブパネルの高さと deferredRender プロパティおよびlayoutOnTabChange プロパティを調整できます (デフォルトはtrue)
layoutOnTabChange:true、
//height:300、
//autoTabs:true、
activeTab:0、
border:false、
items:[
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',
'Description',
'SupplierID'
]
),
items:[
tpProduct
]
});
var winProductInfo=new Ext.Window({
title:'製品情報',
width:450,
height:300,
layout:'fit',
closeAction:'hide' ,
plain:true,//true はメインの背景が透明であることを意味し、false はメインの背景とは多少異なることを意味します
collapseible:true,// 縮小可能かどうか
modal:true,//モーダルフォームかどうか
items:[
fpProduct
],
buttons:[//フォームボタン
{
text:'Submit ',
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("システム プロンプト","タブ タイトル:"
// });
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
]
});