A case on the Web, which contains a copy of the definition of the component for your reference:
Copy Code code as follows:
Ext.onready (function () {
var dtcategory=[
[' All ', ' all kinds '],
[' 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: "Please choose the type of product ...",
Editable:false,
Allowblank:false,
Blanktext: "The type of commodity must be selected",
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: ' Search ',
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: ' Help ',
Iconcls: ' Btn_help '
})
var tb=new ext.toolbar ({
ID: ' TB ',
items:[
' Product Category: ',
Cbcategory,
'-',
' Product Name: ',
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 as a hidden column, not displayed in 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: "Product Name", Dataindex: "ProductName", sortable:true},
{header: "Product category", Dataindex: "CategoryName", sortable:true},
{header: "Unit Price", Dataindex: "UnitPrice", sortable:true},
{header: "Whether discontinued", Dataindex: "Discontinued", sortable:true},
{header: "Spec", Dataindex: "QuantityPerUnit", sortable:true},
{header: "Supplier", Dataindex: "CompanyName", sortable:true}
]);
var pgtbproduct=new ext.pagingtoolbar ({
ID: "Pgtbproduct",
Displayinfo:true,
Emptymsg: "No data to show!" ",
Displaymsg: "Currently {0}--{1}, total {2} piece of data",
Store:stproduct,
Pagesize:10
});
var grdproduct=new Ext.grid.GridPanel ({
ID: "Grdproduct",
Title: "Commodity Information",
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: ' Commodity Information ',
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: ' Product name ',
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: ' Whether to be discontinued ',
Boxlabel: ' Yes ',
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: ' No ',
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: ' Spec ',
Anchor: ' 95% '
}
]
}),
New Ext.panel ({
Columnwidth:.5,
Border:false,
Layout: ' Form ',
Labelwidth:60,
LabelAlign: ' Right ',
items:[
{
Xtype: ' TextField ',
ID: ' UnitPrice ',
Name: ' UnitPrice ',
Fieldlabel: ' Unit price ',
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: ' Inventory ',
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: ' Supplier ',
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: ' Commodity-related kind of information ',
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: ' Types of goods ',
Anchor: ' 95% '
},
{
Xtype: ' TextField ',
ID: ' Description ',
Name: ' Description ',
Fieldlabel: ' Description of goods ',
Anchor: ' 95% '
},
{
Xtype: ' Hidden ',
ID: ' CategoryID ',
Name: ' CategoryID ',
Fieldlabel: ' Category number '//this is hidden.
}
]
}),
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 ({//many times we may be a form placed in a different tab, in order to facilitate the submission and loading of data can be placed in the TabPanel outermost layer of a formpanel, but the display is a problem, This time can be adjusted by setting TabPanel height and Deferredrender, layoutontabchange two properties.
ID: ' Tpproduct ',
deferredrender:false,//whether to render all tabs the first time it is displayed (default is True)
Layoutontabchange:true,
HEIGHT:300,
Autotabs:true,
activetab:0,
Border:false,
items:[
Pnproduct,
Pncategory
]
});
var fpproduct=new ext.formpanel ({//) as a container for TabPanel
ID: ' Fpproduct ',
Reader:new Ext.data.JsonReader ({
Successproperty: ' Success ',//Background returns the field name of the success in JSON
Root: ' info '//background returned in JSON, data field name
},
[
' ProductName ',
' Discontinued ',
' QuantityPerUnit ',
' UnitPrice ',
' UnitsInStock ',
' CategoryID ',
' CategoryName ',
' Description ',
' SupplierID '
]
),
items:[
Tpproduct
]
});
var winproductinfo=new ext.window ({
Title: ' Commodity Information ',
WIDTH:450,
HEIGHT:300,
Layout: ' Fit ',
Closeaction: ' Hide ',
Plain:true,//true the body background is transparent, and false is somewhat different from the main background
Whether the collapsible:true,//can shrink
modal:true,//is a modal form
items:[
Fpproduct
],
buttons:[//Form button
{
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: ' Data update ... ',
Success:function () {
Stproduct.reload ();
Ext.Msg.alert ("System Prompt", "submit successfully!") ");
},
Failure:function () {
Ext.Msg.alert ("System Prompt", "Commit failed!") ");
}
});
}
}
},
{
Text: ' Close ',
Handler:function () {//events triggered when clicked
Winproductinfo.hide ();
}
}
]
});
EXT.GETCMP (' TP '). On ("Tabchange", function (Tabpanel,tab) {
Ext.Msg.alert ("System Prompts", "tab title:" +tab.title);
// });
Grdproduct.on ("Rowdblclick", function (grid,rowindex,e) {
var row=grid.getstore (). GetAt (RowIndex). data;
Ext.Msg.alert ("System hint", "line:" +rowindex+ "Product ID:" +row. ProductID);
FpProduct.form.load ({///load Auto Fill, note form control fields must be consistent with JSON
URL: ' productinfo.aspx?type=getproductinfo&productid= ' +row. ProductID,
WAITMSG: ' Data loading ... ',
Success:function () {
Alert ("tempfile/" +row. categoryname+ ". png");
if (row. discontinued== "yes") {
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 ("System hint", "Data load failed!") ");
}
});
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
]
});
});
