Use of ExtJs radiogroup, extjsradiogroup
/*** Detailed management of payment channels ** @ param {} * title * @ param {} * record * @ param {} * readonly * @ param {} * store */function showConnCfgDetail (title, record, store) {var secondForm = new Ext. form. formPanel ({region: 'center', collapsible: false, border: true, labelWidth: 60, // tag width autoScroll: true, labelAlign: 'right ', // label alignment bodyStyle: 'padding: 5 5 0', // the margin buttonAlign: 'center' for form elements and form panels, and height: Adjust E Nt. body. clientHeight-400, items: [{layout: 'column', xtype: 'fieldset', title: 'Basic information', anchor: '123', autoHeight: true, border: true, items: [{columnWidth :. 33, layout: 'form', labelWidth: 120, // defaultType: 'textfield ', border: false, items: [{fieldLabel: 'Channel connection id', name: 'connid', xtype: 'textfield ', // set to the type of the text input box readOnly: true, anchor: '20140901'}, new Ext. form. comboBox ({hiddenName: 'C OnnType ', fieldLabel: 'Connection type', triggerAction: 'all', store: CONNTYPEStore, displayField: 'text', valueField: 'value', mode: 'local', forceSelection: true, // The selected content must be the Sub-item editable: false, typeAhead: true, resizable: true, anchor: '000000'}), {fieldLabel: 'url encoding ', // tag xtype: 'textfield ', name: 'charset', // name: the backend can use this attribute to set the value to anchor: '6666661'}, {fieldLabel: 'replace connection id', // tag xtype: 'textfield', name: 'Replace id', // name: the backend determines anchor: '000000' based on this name attribute, {fieldLabel: 'Connection timeout time', // tag xtype: 'textfield ', name: 'conntimeout', // name: the backend determines anchor: '000000' based on this name attribute, {fieldLabel: 'operator', name: 'operid', xtype: 'textfield', // set it to readOnly: true, anchor: '000000'}]}, {columnWidth :. 33, layout: 'form', labelWidth: 120, // defaultType: 'textfield ', border: false, items: [{fieldLabel: 'canal Dao Code', name: 'channelcode', xtype: 'textfield ', // set to the type of the text input box readOnly: true, anchor: '000000'}, {fieldLabel: 'Access method', xtype: 'radiogroup', columns: 2, items: [{boxLabel: "SOCKET", id: 'protocoltype0', name: "protocolType", inputValue: "0" },{ boxLabel: "HTTP", id: 'coltype1', name: "protocolType", inputValue: "1"}] },{ fieldLabel: 'activate use', xtype: 'radiogroup', columns: 2, items: [{boxLabel: "Not activated", id: 'actived0', name: "actived", inputValue: "0"}, {boxLabel: "activated", id: 'actived1', name: "actived", inputValue: "1"}]}, {fieldLabel: 'whether auto-population is activated ', xtype: 'radiogroup', columns: 2, items: [{boxLabel: "activation", name: "resumeActived", id: 'resumeactived1', inputValue: "1" },{ boxLabel: "Not activated", id: 'resumeactived0', name: "resumeActived", inputValue: "0"}]}, {fieldLabel: 'read timeout time', name: 'readtim Eout', xtype: 'textfield ', // set it to the text input box type anchor: '000000'}, {fieldLabel: 'Operation time', // tag xtype: 'datefield ', name: 'opdate', // name: the backend uses the format: 'Y-m-d H: I: s' value based on this name attribute, // format the date readOnly: true, anchor: '000000'}]}, {columnWidth :. 33, layout: 'form', labelWidth: 150, // defaultType: 'textfield ', border: false, items: [{fieldLabel: 'Connection name', name: 'connname', xtype: 'textfield ', // set it to the text input box type anchor: '000000'}, {fieldLabel: 'whether or not the same channel type prevails ', xtype: 'radiogroup', columns: 2, items: [{boxLabel: "Yes", id: 'priority0', name: "priority", inputValue: "Y" },{ boxLabel: "no", id: 'priority1', name: "priority", inputValue: "N"}] },{ fieldLabel: 'replenishment method ', xtype: 'radiogroup', columns: 2, items: [{boxLabel: "true complement", name: "resumeType", id: 'resumetype1', inputValue: "1" },{ boxLabel: "false complement", name: "resumeType ", Id: 'resumetype0', inputValue: "0"}]}, {fieldLabel: 'Gateway type sharding ', xtype: 'radiogroup', columns: 2, items: [{boxLabel: "Yes", name: "connTypeDetachable", id: 'conntypedetachable0', inputValue: "Y"}, {boxLabel: "no", name: "connTypeDetachable ", id: 'conntypedetachable1', inputValue: "N"}]}, {fieldLabel: 'Refund of service fees upon return ', xtype: 'radiogroup', columns: 2, items: [{boxLabel: "", name: "is_refund_with_fee ", Id: 'Is _ refund_with_fee0', inputValue:" 0 "}, {boxLabel:" Not returned ", name:" is_refund_with_fee ", id: 'Is _ refund_with_fee1 ', inputValue: "1"}]}, {fieldLabel: 'Channel rate', name: 'feerate', xtype: 'textfield ', // set it to the text input box type anchor: '20140901'}]}, {layout: 'column', xtype: 'fieldset', title: 'sequence name, address, description', anchor: '20160301 ', autoHeight: true, border: true, items: [{columnWidth: 1, layout: 'form', labelWidth: 130, // Tag width defaultType: 'textfield', border: false, items: [{fieldLabel: 'Channel payment order sequence name', name: 'chnl _ ord_no_seqname', xtype: 'textfield', // set it to the text input box type anchor: '000000'}, {fieldLabel: 'Channel payment connection url', name: 'connurl', xtype: 'textfield ', // set it to the text input box type anchor: '000000'}, {fieldLabel: 'Channel query connection url', name: 'connqueryurl', xtype: 'textfield ', // set it to the text input box type anchor: '000000'}, new Ext. form. textArea ({fieldLabel: "Description ", Name: 'description', labelSepartor: ', labelWidth: 60, width: '000000'})]}, {layout: 'column', xtype: 'fieldset', title: 'account information', anchor: '000000', autoHeight: true, border: true, items: [{columnWidth :. 5, layout: 'form', labelWidth: 220, // defaultType: 'textfield ', border: false, items: [{fieldLabel: 'virtual financial company Payment Exchange (principal) ', name: 'vtl _ sf_payee_prcpl_acct', xtype: 'textfield ', // set it to the text input box type anc Hor: '000000'}, {fieldLabel: 'virtual financial company payment revenue (principal) ', name: 'vtl _ sf_fi_prcpl_acct', xtype: 'textfield ', // set it to the text input box type anchor: '000000'}, {fieldLabel: 'virtual bank payment transactions (bank accounting service fee) ', name: 'vtl _ bk_fo_fee_acct', xtype: 'textfield', // set it to the text input box type anchor: '000000'}, {fieldLabel: 'payment service fee (internal accounting service fee) ', name: 'sf _ fi_fee_acct ', xtype: 'textfield ', // set it to the text input box type anchor: '000000'}]}, {columnWidth :. 5, layout: 'form', labelWidth: 220, // tag width defaultType: 'textfield', border: false, items: [{fieldLabel: 'virtual bank payment transaction (principal) ', name: 'vtl _ bk_fo_prcpl_acct ', xtype: 'textfield', // set to text input box type anchor: '000000'}, {fieldLabel: 'virtual payment service fee (bank accounting service fee) ', name: 'vtl _ sf_fo_fee_acct ', xtype: 'textfield', // set it to the text input box type anchor: '000000'}, {fieldLabel: 'Financial company's normal payment income (principal) ', name: 'sf _ fi_prcpl_acct', xtype: 'textfield ', // set it to the text input box type anchor: '123 '},{ FieldLabel: 'Financial company transitional return payment income (principal) ', name: 'sf _ rfd_fi_prcpl_acct', xtype: 'textfield ', // set it to text input box type anchor: '000000'}]}); // initialization form initForm (title, secondForm, record, function (sWindow) {if (! SecondForm. form. isValid () {Ext. messageBox. alert ("prompt", "Please enter the correct data"); return;} var protocolType = secondForm. getForm (). getValues () ['protocoltype']; var actived = secondForm. getForm (). getValues () ['actived']; var resumeActived = secondForm. getForm (). getValues () ['resumeactived']; var priority = secondForm. getForm (). getValues () ['priority ']; var resumeType = secondForm. getForm (). getValues () ['resumable']; var con NTypeDetachable = secondForm. getForm (). getValues () ['conntypedetachable']; var is_refund_with_form = secondForm. getForm (). getValues () ['is _ refund_with_fee ']; Ext. msg. confirm ("prompt", "Are you sure you want to save? ", Function (btn) {if (btn =" yes ") {secondForm. getForm (). submit ({url: 'connworkflow manage. do? ReqCode = updateconn1_mangeinfo ', waitTitle:' submitting ....... ', method: 'post', params: {protocolType: protocolType, actived: actived, resumeActived: resumeActived, priority: priority, resumeType: resumeType, connTypeDetachable: priority, priority: priority }, success: function (form, action) {Ext. msg. hide (); if (action. result. success) {Ext. msg. alert ('hprompt ', action. result. msg); SWindow. close (); store. reload ();} else {Ext. msg. alert ('hprompt ', action. result. msg); Ext. msg. hide (); store. reload () ;}, failure: function (form, action) {Ext. msg. hide (); store. reload (); Ext. msg. alert ('hprompt ', action. result. msg) ;}};}}) ;});/** initialization form */function initForm (title, secondForm, record, saveFun) {// initialize if (record! = Null) {secondForm. getForm (). loadRecord (record);} // Add button secondForm. addButton ({text: 'save', id: 'save _ click', iconCls: 'accepticon ', handler: function () {saveFun (sWindow) ;}}); secondForm. addButton ({text: 'reset ', iconCls: 'tbar _ synchronizeIcon', handler: function () {secondForm. getForm (). reset (); setValuetoForm () ;}}); secondForm. addButton ({text: 'close', iconCls: 'deletecon ', handler: function () {sWindow. Close () ;}}); uiGrantFree (); var sWindow = new Ext. window ({title: '<span style = "font-weight: bold">' + title + '</span>', // Window title layout: 'fit ', // set the window layout mode width: document. body. clientWidth-100, // The window width, such as height: 650, closable: false, // whether closeAction: 'hide 'can be disabled, // maximizable: false, // set whether border: false can be maximized, // set resizable: false, constrain: true, titleCollapse: true, animateTarget: Ex T. getBody (), autoScroll: false, modal: true, buttonAlign: 'right', items: [secondForm], buttons: []}); sWindow. show ();} if (record! = Null) {setValuetoForm ();} function setValuetoForm () {var protocolType = record. get ('protocoltype'); var actived = record. get ('actived'); var resumeActived = record. get ('resumed'); var priority = record. get ('priority '); var resumeType = record. get ('resumable'); var connTypeDetachable = record. get ('conntypedetachable'); var is_refund_with_records = record. get ('is _ refund_with_fee '); if (protocolType = "0") {Ext. getCmp ('protocoltype0 '). setValue (protocolType);} else if (protocolType = "1") {Ext. getCmp ('protocoltype1 '). setValue (protocolType);} if (actived = "0") {Ext. getCmp ('actived0 '). setValue (actived);} else if (actived = "1") {Ext. getCmp ('actived1 '). setValue (actived);} if (resumeActived = "0") {Ext. getCmp ('resumed0 '). setValue (resumeActived);} else if (resumeActived = "1") {Ext. getCmp ('resumed1 '). setValue (resumeActived);} if (priority = "Y") {Ext. getCmp ('priority0 '). setValue (priority);} else if (priority = "N") {Ext. getCmp ('priority1 '). setValue (priority);} if (resumeType = "0") {Ext. getCmp ('resumetype0 '). setValue (resumeType);} else if (resumeType = "1") {Ext. getCmp ('resumetype1 '). setValue (resumeType);} if (connTypeDetachable = "Y") {Ext. getCmp ('conntypedetachable0 '). setValue (connTypeDetachable);} else if (connTypeDetachable = "N") {Ext. getCmp ('conntypedetachable1 '). setValue (connTypeDetachable);} if (is_refund_with_future = "0") {Ext. getCmp ('is _ refund_with_fee0 '). setValue (is_refund_with_fee);} else if (is_refund_with_fee = "1") {Ext. getCmp ('is _ refund_with_fee1 '). setValue (is_refund_with_fee );}}}
For the radiogroup selection problem in extjs, the change event is used, but the alert () test will appear twice each time you click
The change event has the following four parameters. The first parameter returns the radio object you clicked. You can set the id in each radio, or itemId to identify which vertex has arrived, and then determine whether the operation is required.
Simply setting an alert will trigger the checked and unchecked events once, as you said.
Ext. form. field. Field this,
Object newValue,
Object oldValue,
Object eOpts
ExtJs radiogroup selected
The API has an event like this: change: (Ext. form. RadioGroup this, Ext. form. Radio checked ),
The second parameter should be the value you want,
I don't have an ExtJs environment, so I can't test it. You can try it yourself.