ExtJS to define individual component instance code _extjs

Source: Internet
Author: User
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
]
});
});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.