Extjs define the instance code of each component separately _ extjs-js tutorial

The definition of Extjs component shows an instance on the Internet, so I copied it and used it later. Now I want to share it with you, if you are interested, do not miss an example on the Alibaba Cloud website, which contains a copy of the definition of the component for your reference:

The Code is as follows:

Ext. onReady (function (){
Var dtCategory = [
['All', 'all category'],
['1', 'beverages '],
['2', 'conditions'],
['3', 'confections '],
['4', 'dairy products'],
['5', 'grains/certificates'],
['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: "select product type ...",
Editable: false,
AllowBlank: false,
BlankText: "product type is required ",
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 :[
'Item type :',
CbCategory,
'-',
'Item 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 is used as a hidden column and is 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 type", dataIndex: "CategoryName", sortable: true },
{Header: "unit price", dataIndex: "UnitPrice", sortable: true },
{Header: "Discontinued", dataIndex: "Discontinued", sortable: true },
{Header: "type", dataIndex: "QuantityPerUnit", sortable: true },
{Header: "supplier", dataIndex: "CompanyName", sortable: true}
]);
Var pgtbProduct = new Ext. PagingToolbar ({
Id: "pgtbProduct ",
DisplayInfo: true,
EmptyMsg: "No data to display! ",
DisplayMsg: "currently {0} -- {1}, {2} pieces of data ",
Store: stProduct,
PageSize: 10
});
Var grdProduct = new Ext. grid. GridPanel ({
Id: "grdProduct ",
Title: "product 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: 'item 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: 'item name ',
Anchor: '000000'
}
]
}),
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: 'Stop selling ',
BoxLabel: 'yes ',
Anchor: '000000'
}
]
}),
New Ext. Panel ({
ColumnWidth:. 25,
Border: false,
Layout: 'form ',
LabelWidth: 60,
LabelAlign: 'right ',
Items :[
{
Xtype: 'Radio ',
Id: 'discontinuedtwid ',
// HiddenName: 'discontinued ',
Name: 'discontinued ',
Checked: true,
InputValue: '0 ',
BoxLabel: 'no ',
Anchor: '000000'
}
]
})
]
}),
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: '000000'
}
]
}),
New Ext. Panel ({
ColumnWidth:. 5,
Border: false,
Layout: 'form ',
LabelWidth: 60,
LabelAlign: 'right ',
Items :[
{
Xtype: 'textfield ',
Id: 'unitprice ',
Name: 'unitprice ',
FieldLabel: 'unit price ',
Anchor: '000000'
}
]
})
]
}),
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: '000000'
}
]
})
,
New Ext. Panel ({
ColumnWidth:. 5,
Border: false,
Layout: 'form ',
LabelWidth: 60,
LabelAlign: 'right ',
Items :[
{
Xtype: 'combo ',
Id: 'codecname ',
// Name: 'commp anyname ',
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: '000000'
}
]
})
]
})
]
});
Var pnCategory = new Ext. Panel ({
Id: 'pncategory ',
Title: 'product-related category 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: 'item category ',
Anchor: '000000'
},
{
Xtype: 'textfield ',
Id: 'description ',
Name: 'description ',
FieldLabel: 'item description ',
Anchor: '000000'
},
{
Xtype: 'ddy ',
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 ({// in many cases, we may place a form in different tabs. To facilitate data submission and loading, we can place a formpanel on the outermost layer of the tabpanel, but there is a problem with the display, in this case, you can set the tabpanel height, deferredRender, and layoutOnTabChange attributes to adjust them.
Id: 'tpproduct ',
DeferredRender: false, // whether to render all tabs after the first display (true by default)
LayoutOnTabChange: true,
// Height: 300,
// AutoTabs: true,
ActiveTab: 0,
Border: false,
Items :[
PnProduct,
PnCategory
]
});
Var fpProduct = new Ext. FormPanel ({// serves as the TabPanel container
Id: 'fpproduct ',
Reader: new Ext. data. JsonReader ({
SuccessProperty: 'success ', // name of the successful field in the json returned by the background
Root: 'info' // The data field name in the json returned by the background
},
[
'Productname ',
// 'Discontinued ',
'Quantityperunit ',
'Unitprice ',
'Unitsinstock ',
'Categoryid ',
'Categoryname ',
'Description ',
'Supplierid'
]
),
Items :[
TpProduct
]
});
Var winProductInfo = new Ext. Window ({
Title: 'item information ',
Width: 450,
Height: 300,
Layout: 'fit ',
CloseAction: 'hide ',
Plain: true, // true indicates that the subject background is transparent, and false indicates that the subject background is different from the subject background.
Collapsible: true, // whether to contract
Modal: true, // whether it is a mode 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 is being updated ...',
Success: function (){
StProduct. reload ();
Ext. Msg. alert ("system prompt", "submitted successfully! ");
},
Failure: function (){
Ext. Msg. alert ("system prompt", "submission failed! ");
}
});
}
}
},
{
Text: 'close ',
Handler: function () {// event triggered when you click
WinProductInfo. hide ();
}
}
]
});
// Ext. getCmp ('tp '). on ("tabchange", function (tabPanel, tab ){
// Ext. Msg. alert ("system prompt", "Tab title:" + tab. title );
//});
GrdProduct. on ("rowdblclick", function (grid, rowIndex, e ){
Var row = grid. getStore (). getAt (rowIndex). data;
// Ext. Msg. alert ("system prompt", "row:" + rowIndex + "Product ID:" + row. ProductID );
FpProduct. form. load ({// use load to automatically fill in. Note that the form control fields must be consistent with those in json.
Url: 'productinfo. aspx? Type = getProductInfo & productId = '+ row. ProductID,
WaitMsg: 'loading data ...',
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 prompt", "data loading 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
]
});
});