Project ExtJS Front-desk development templates

Today, while giving a freshman sophomore class, the project's foreground source code, easy to use later:

<!--js page template-->//This template implementation is all common features, such as drop-down list, time, page Editor, all corresponding to a case, you can imitate the development of other functions. Each of the following points to note that I have labeled, carefully paste, to avoid errors, suggest everyone ctrl+f to the same name, ensure that the property is consistent ha. var ss = null; Ext.onready (function () {Ext.blank_image_url = ' extjs/resources/images/default/s.gif '; Ext.QuickTips.init (); var sm = new Ext.grid.CheckboxSelectionModel (); var smuseableroleinfo = new Ext.grid.CheckboxSelectionModel (); var smchooseroleinfo = new Ext.grid.CheckboxSelectionModel (); keyconvert = function () {if (Event.keycode = = && E Vent.srcElement.type = "button") {Event.keycode = 9;}};/ /！！ Define the entire JSP page display order, display the query form, in the grid, pay attention to the items, these properties such as selectstockinform to ensure that the following one by one corresponds to, available ctrl+f to see which new Ext.viewport ({layout: ' Border ', items: [Selectstockinform,stockingrid]});//!! Page definition Complete//!! Just before the grid list store load data, is our page grid display list,//to Stockinstore as an example, we replace the change to their own definition of store,url, root, Totalproperty, fields changed to their own parameters, Var Stockinstore = new Ext.data.JsonStore ({proxy:new Ext.data.HttpProxy ({//) change to its own action,_ prefix is the struts configuration name, The suffix is the action layer corresponding to the method name URL: ' stockin_querystockin.action '}), the//grid list returns the object collection name, set, GEThe T method corresponds to the collection name root: ' Items_stockin ', the//grid list returns the number of collection bars, the set, get method corresponds to its name totalproperty: ' Totalproperty ', the//grid list corresponds to the object's properties, Note is the Grid object property value, Reference object Entity table fields: [' Pkinid ', ' fkgoodid ', ' innum ', ' indate ', ' Fkinoperatorid ', ' indesc ', ' state ']//autoLoad: False});//The above URL commits the passed parameter, start, limit paging property stockinstore.load ({params: {start:0,limit:20}});//!! Grid list Store loading data complete//!! The user drop-down list store loads data starting with the same as above var userstore = new Ext.data.JsonStore ({URL: "users_queryusers.action", Root: "Items_users", Totalproperty: "Totalproperty", fields: [{name: "id", Mapping: "id"}, {name: "name", Mapping: "Truename"}]}) Userstore . Load ({params: {start:0,limit:100}});//!! User drop-down list store load data end//!! Page to query the form panel start, note Renderto, Title property Modification Selectstockinform = new Ext.form.FormPanel ({title: ' Query Condition ', Renderto: ' Stockin ',// To match the ID of the JSP page div labelalign: ' Right ', buttonalign: ' Center ', Layout: ' Column ', Region: ' North ', frame:true,collapsible:t Rue,defaulttype: ' TextField ', Padding:10,hight:100,items: [{layout: ' column ', xtype: ' FieldSet ', title: ' WarehousingQuery ',//modify to your own titlelabelalign: ' Right ', items: [{///above this {corresponds to the number of panel columns, which is the three columns we see ColumnWidth:. 3,layout: ' form ', Labelwidth: 80,items: [{///above this {corresponding panel row number, for row and column modification, pay attention to {} Delete//also have {} corresponding ",", see Clear is the letter comma Fieldlabel: ' operator ',//type type is drop-down list xtype: ' Combo ', Anchor: ' 80% ',//corresponds to the store that we want to load, the user store to see above Store:userstore,//valuefield and above maping corresponding name consistent Valuefield: "Name", Displayfield: "Name", Mode: ' Local ', Forceselection:true,emptytext: '---Please select-',//to the background of the property, notice to change the name and parameters of their own object hiddenname: ' Stockin.fkinoperatorid ', editable:false,triggeraction: ' All ',//mark this ID is unique (also can not do, here is easy to distinguish), we later use this ID to get the Hiddenname value ID: ' StockIn.fkInOperatorId.show ', allowblank:false//see Clearly, each column ({} at the end) does not ",", Be careful}]},{columnwidth:. 3,layout: ' Form ', Labelwidth:80,items: [{//type type is Text xtype: ' TextField ',//property passed to background, notice to change the name and parameter of its own object name: ' Stockin.fkgoodid ', ID: ' StockIn.fkGoodId.show ', Fieldlabel: ' Commodity name ', Allowblank:true,anchor: ' 80% '}]},{columnwidth:. 3,layout: ' Form ', Labelwidth:80,items: [{//type type is time type xtype: ' Datefield ', Fieldlabel: ' Last Modified date ', ID: 'StockIn.inDate.show ', Name: ' Stockin.indate ',//page display time type format: ' y-m-d ', Editable:false,allowblank:false,anchor: ' 80% '}]}]}],buttons: [{text: ' Query ', iconcls: ' Icon-accept ', cls: ' Right-part ', handler:function () {The corresponding value within//GETCMP is the ID of the above attribute , I use +.show to make a distinction, everyone notice var createdate = ext.getcmp (' stockIn.inDate.show '). GetValue (); if (createdate!= ") {//Go to"-" Handle Createdate=createdate.format (' YMD ');} Stockinstore.proxy = new Ext.data.HttpProxy ({//processing time parameter to be directly by? + attribute parameters to the background, parameter name corresponding to object property URL: ' stockin_selectstockin.action ' + '? stockin.indate= ' +createdate}); Stockinstore.load ({ Params: {start:0,limit:20,//Look at the following code difference Plus. Show and not add ' Stockin.fkgoodid ': ext.getcmp (' stockIn.fkGoodId.show '). GetValue ( ),//pass parameter on start, limit based on the addition of time attributes, note that the last line does not "," ' Stockin.fkinoperatorid ': ext.getcmp (' stockIn.fkInOperatorId.show ') . GetValue ()});}}, '-', {text: ' Reset ', iconcls: ' Icon-reset ', handler:function () {selectStockInForm.form.reset ();},cls: ' Right-part '//,}]});//!! The form panel of the query on the page starts//!! Create a grid for presentation to start with, Stockingrid replace it with its own grid name, notice Renderto change var sTockingrid = new Ext.grid.GridPanel ({renderto: ' Stockin ', Store:stockinstore,sm:sm,id: ' Stockingrid ',//Height:defa Ultheight,region: ' Center ', keys: [{key: 13],fn:keyconvert}],//similar to the header line description of Excel, all parameters are consistent with the store load property, and the property and object entity table names are consistent columns : [SM, {//Hide id attribute, header: ' Pkinid ', dataindex: ' Pkinid ', Hidden:true,sortable:false},{header: ' Product name ', sortable:true,w Idth:150,dataindex: ' Fkgoodid ',//similar to hyperlinks, using javascript: Method name, following the corresponding method to implement Renderer:function (value) {return "<a href=  Javascript:update () title = ' View ' > ' + value + ' </a> '}//Note here is also at the end of ","}, {header: ' Quantity of Goods ', Sortable:true,width: 100,dataindex: ' Innum '}, {header: ' Inbound Time ', Sortable:true,width:100,dataindex: ' Indate '}, {header: ' operator ', sortable: True,width:100,dataindex: ' Fkinoperatorid '}, {header: ' description ', Sortable:true,width:100,dataindex: ' Indesc '}],//list of functions above Can option Tbar: [{text: ' Inbound registration ', tooltip: ' Inbound registration ', ICONCLS: ' Icon-add ', handler:function () {//These previous video spoke, do not introduce AddForm.form.reset () ; wintitle = "warehousing registration"; Addwin.settitle (Wintitle); Addwin.show ();}, '-', {text: ' Modify Information ', ToolTip: ' Modify selected registration information ', ICONCLS: ' Icon-edit ', handler:function () {///and above super Link consistent, point to Method name Update (),}}, '-', {text: ' delete message ', tooltip: ' Delete selected registration record ', Iconcls: ' Icon-del ', handler:function () {_record = Sto Ckingrid.getselectionmodel (). Getselections (); flag = Stockingrid.getselectionmodel (). getselected (); if (_ Record.length = = 0) {Ext.Msg.alert (' warning ', ' Please select the record you want to delete! ');} else {Ext.MessageBox.confirm (' Confirm delete ', ' Are you sure you want to delete this record? ', function (BTN) {if (btn = = "Yes") {var jsondata = "";//Pkinid stitching string for the record to be deleted in action, "," Split for (var i = 0; i < _recor D.length; i++) {ss = _record[i].get ("Pkinid"), if (i = = 0) {jsondata = Jsondata + ss;} else {jsondata = Jsondata + "," + SS;}} Ext.Ajax.request ({//corresponding to the Delete method URL under submit *_: "Stockin_delstockin.action", params: {//stitching parameter to be passed, string type Deldata:jsondata}, Success:function (from, action) {stockinstore.reload (); Ext.Msg.alert (' Success ', ' delete success! },failure:function (form, action) {Ext.Msg.alert (' failed ', ' delete failed! });}}}],bbar: [{//paging implementation, loading the previous store, use the location wildcard xtype: ' Paging ', pagesize:20,//the storestore:stockinstore,displayinfo:true,displaymsg that corresponds to the grid list: ' Show the {0} bar to {1} records, total {2} bar ', Emptymsg: ' No Record '}]});//!! Create a grid end//!! for presentation To convert the ID to name, we store the name directly in the database, so the method comments off//function?fishname (val) {?? Return?fishstore.queryby (function (rec) {??? Return?rec.data.id?==?val;? //?}). Itemat (0). data.name;? //}//!! Add a window containing the added form form AddForm, the name does not change Addwin = new Ext.window ({layout: ' form ', WIDTH:650,HEIGHT:450,MODAL:TRUE,RESIZABLE:FA Lse,plain:true,closable:false,items:addform});//!! Through the window, open the form, no data is loaded in advance, which is the difference from the modified var addform = new Ext.formpanel ({labelwidth:75,labelalign: ' Right ', Frame:true,bodystyle: ' padding:5px 5px 0 ', Width:640,height:420,waitmsgtarget:true,items: [{//The following properties and the previous query form, note the modification of the property name, He's going backstage. Attribute name layout: ' column ', xtype: ' FieldSet ', title: ' Inbound Information ', items: [{columnWidth:. 5,layout: ' Form ', labelwidth:80,i TEMs: [{xtype: ' TextField ', Name: ' Stockin.fkgoodid ',//The Ajax used to pass the reference, so the ID is not useful,. Add is just the difference between the function ID: ' StockIn.fkGoodId.add ', FieldlabEl: ' Commodity name ', Allowblank:false,anchor: ' 100% '},{xtype: ' TextField ', Name: ' Stockin.innum ', id: ' StockIn.inNum.add ', field Label: ' Quantity of Goods ', Allowblank:false,anchor: ' 100% '}]}]},{layout: ' column ', xtype: ' FieldSet ', title: ' Remarks ', items: [{col  Umnwidth:. 9,layout: ' form ', Labelwidth:100,items: [{//type type for Web page editor type xtype: ' HTMLEditor ', Name: ' Stockin.indesc ', ID: ' StockIn.inDesc.add ', Fieldlabel: ' Description ', Allowblank:false,anchor: ' 100% '}]}]}],buttons: [{text: ' Save ', Iconcls: ' Icon-s Ave ', handler:function () {if (AddForm.form.isValid ()) {addForm.form.submit ({url: ' stockin_addstockin.action ', Success:function (from, action,success) {stockinstore.reload (); Ext.Ghost.msg (' Save succeeded ', ' Add new inbound record successfully! '); Addwin.hide ();},failure:function (form, action,success) {Ext.Ghost.msg (' Save failed ', ' information filled out incorrectly, or server not responding, please try Again ');},waitmsg : ' Saving data, later ... '}); else {Ext.Ghost.msg (' message ', ' please complete and submit again! ')}}, '-', {text: ' Cancel ', Iconcls: ' Icon-reset ', handler:function () {ADDFORM.FORM.R ESET (); Addwin.hide ();},cls: ' Right-part '//,}]});//！！ Complete the Add Window function//!! JavaScript Hyperlink Method update = function () {var _record = Stockingrid.getselectionmodel (). getselected (); var flag = Stockingrid.getselectionmodel (). Getselections (); if (flag.length = = 1) {//Get the property value of a row in the grid list, _record.get () to get the corresponding value, and set to update* make a difference, updateform to use, note and Grid properties consistent ext.getcmp ("Updatepkinid"). SetValue (_record.get ("Pkinid")); EXT.GETCMP ("Updatefkgoodid"). SetValue (_record.get ("Fkgoodid")); EXT.GETCMP ("Updateinnum"). SetValue (_record.get ("Innum")); EXT.GETCMP ("Updateindesc"). SetValue (_record.get ("Indesc")); wintitle = "Modify inbound information"; Updatewin.settitle (Wintitle); Updatewin.show (); Updateform.getform (). Load (); ElseExt.Msg.alert (' Error ', ' Please select a storage to edit! ');};/ /！！ Complete JavaScript Hyperlink method//!! Modify the window, containing the modified form form UpdateForm, the name does not change, the above JavaScript hyperlink method to get the form initial value Updatewin = new Ext.window ({layout: ' form ', width:650, Height:450,modal:true,resizable:false,plain:true,closable:false,items:updateform});//!! Through the window, open the form, the data needs to be loaded in advance, by the window to complete var updateform = new Ext.formpanel ({labelwidth:75,labelalign: ' Right ', frame:trUe,bodystyle: ' padding:5px 5px 0 ', Width:640,height:420,waitmsgtarget:true,items: [{//The following properties and queries, one thing is the attribute ID to and JAVASCRI The PT hyperlink method defines the same parameter name, which is update*layout: ' column ', xtype: ' FieldSet ', title: ' Modify Information ', items: [{columnWidth:. 5,layout: ' Form ' , Labelwidth:80,items: [{//suggest that everyone, like me, put the original sticky, than against the use, the Name property is passed to the background of the names, pay attention to the difference between//ext.getcmp ("Updatepkinid"). SetValue (_ Record.get ("Pkinid")),//ext.getcmp ("Updatefkgoodid"). SetValue (_record.get ("Fkgoodid"));//EXT.GETCMP (" Updateinnum "). SetValue (_record.get (" Innum ")),//ext.getcmp (" Updateindesc "). SetValue (_record.get (" Indesc ")); name : ' Stockin.pkinid ', id: ' Updatepkinid ', xtype: ' Hidden '},{xtype: ' TextField ', Name: ' Stockin.fkgoodid ', id: ' Updatefkgoo Did ', Fieldlabel: ' Commodity name ', Allowblank:false,anchor: ' 100% '},{xtype: ' TextField ', Name: ' Stockin.innum ', id: ' Updateinnum ', Fieldlabel: ' Quantity of Goods ', Allowblank:false,anchor: ' 100% '}]}]},{layout: ' column ', xtype: ' FieldSet ', title: ' Description ', items : [{columnWidth:. 9,layout: ' form ', Labelwidth:100,items: [{xtype : ' HTMLEditor ', Name: ' Stockin.indesc ', id: ' Updateindesc ', Fieldlabel: ' Description ', Allowblank:false,anchor: ' 100% '}]}]}],but  Tons: [{text: ' Save ', Iconcls: ' Icon-save ', handler:function () {if (UpdateForm.form.isValid ()) {UpdateForm.form.submit ( {url: ' stockin_updatestockin.action ', success:function (from, action,success) {stockinstore.reload (); Ext.Ghost.msg (' Save succeeded ', ' Modify information successfully! '); Updatewin.hide ();},failure:function (form, action,success) {Ext.Ghost.msg (' Save failed ', ' message filled out incorrectly, or server not responding, try Again ');}, Waitmsg: ' Saving data, later ... '}); else {Ext.Ghost.msg (' message ', ' please complete and submit again! ')}}, '-', {text: ' Cancel ', Iconcls: ' Icon-reset ', handler:function () {updateform.for M.reset (); Updatewin.hide ();},cls: ' Right-part '//,}]});//!!  Finish modifying the form})

Project ExtJS Front-desk development templates