Use of ExtJs radiogroup, extjsradiogroup

Source: Internet
Author: User

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.

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.