Checkbox to use with RadioGroup

To use Checkbox with RadioGroup

Yes! Is not the Checkbox Checkbox and RadioGroup and Radio.

Ex provides Checkbox and Radio, in the control group the same name, such as the gender of men and women both use sex as a Radio control name, findField method can only access the first control, setValue can only set the first control This resulted in using the Form's Load if you want to load the edit form data or edit data with SetValues loading problems. To solve this problem, the first method is to define the name of the different controls; second method is to control the same name, in the loading manual editing data processing control state. The first method of the Checkbox problem is not too much, because no correlation between the Checkbox. Radio is different, however, is associated with each other, such as male sex selection, and that women should not choose for the state, the same in the name will be processed automatically, without writing extra code, but the names are different, they have to go through the check event modify the state of other controls. The second method there is problem, Checkbox same name, to get control after the first control is difficult, and difficult to deal with. For these reasons, the author and the practice is to use a different name Checkbox definition method, Radio Official Forums Ext User vtswingkid use development Ext.ux.RadioGroup extension instead of.

Ext.ux.RadioGroup in the download address is: http://extjs.com/forum/showthread.php?t=23250.

Checkbox must be used in the definition ColumnLayout, the first column labeled controls, the follow-up out of the control is hidden label. If not, will be difficult to achieve custom Checkbox alignment. Ext.ux.RadioGroup the same time the expansion has been handling the issue of alignment, so do not like to use Checkbox as ColumnLayout.

The main configuration parameters Checkbox see Table 1.

Table 1 Checkbox main configuration parameters

Configuration parameters

Description

boxLabel

After the display of text in the box

checked

Value is true that the initial state has been selected, false is that no election, the default value is false

disabled

Value is true that the initial state for the Prohibition of the Use, false is that you can use the default value is false

fieldLabel

Control Label

hideLabel

Hide the true value of that label, false is displayed, the default value is true

labelSeparator

Label delimiter

inputValue

Checkbox value of the actual submission. If you do not set the value, regardless of why the value set the value, Checkbox values are presented as the "on",

msgTarget

Error message display location, the default value is qtip, detailed information, see Form validation and error information display section

name

Name of the control

readOnly

Value of true indicates the initial state for the read-only, false, said writable, the default value is false, is not recommended to use the value is set read-only, because the settings do not allow further changes, if you want to set read-only attribute, please refer to the Chapter 7 of the plug-a read-only edit control

tabIndex

Keyboard tab key to move the index

The main configuration parameters Ext.ux.RadioGroup See Table 2.

Table 2 Ext.ux.RadioGroup main configuration parameters

Configuration parameters

Description

fieldLabel

Control Label

name

Name of the control

horizontal

Radio option value of true indicates the level of arrangement, false, said vertically, the default value is false

radios

Radio consisting of an array of options

radios subkey configuration: value

Official Radio option value

radios subkey configuration: checked

Value of true is that it has selected, false is that no election, the default value is false

radios subkey configuration: boxLabel

In a single text box after the show

Checkbox to use with RadioGroup see examples:

<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd">

<html debug='true'>

<head>

<title> Checkbox and RadioGroup example </ title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />

<script type="text/javascript" src="../lib/ext/ext-base.js"> </ script>

<script type="text/javascript" src="../lib/ext/ext-all.js"> </ script>

<script type="text/javascript" src="../lib/ext/radiogroup.js"> </ script>

<script type="text/javascript" src="../lib/ext/locale/ext-lang-zh_CN.js"> </ script>

<style>

</ Style>

</ Head>

<body>

<h1> Chapter 4 Checkbox and RadioGroup example </ h1>

<br />

<div>

<p>

<div> </ div> <br>

<div> perform action: </ div>

<textarea rows="10"> </ textarea>

</ P>

<br />

</ Div>

<script>

var app = ();

Ext.onReady (function () (

var frm = new Ext.form.FormPanel ((

applyTo: "form1",

autoHeight: true,

width: 860,

height: 300,

frame: true,

labelWidth: 80,

labelSeparator :":",

title: 'Checkbox and RadioGroup example'

items: [

(Layout: 'column', border: false, items: [

(ColumnWidth: .5, layout: 'form', border: false, items: [

(Xtype: 'fieldset', title: 'control were different', height: 110, items: [

(Layout: 'column', border: false, items: [

(ColumnWidth: .5, layout: 'form', border: false, items: [

(Xtype: 'checkbox', fieldLabel: 'role', boxLabel: 'System Administrator', name: 'role1', anchor: '100% ')

]),

(ColumnWidth: .25, layout: 'form', border: false, items: [

(Xtype: 'checkbox', hideLabel: true, boxLabel: 'manager', name: 'role2', anchor: '100% ')

]),

(ColumnWidth: .25, layout: 'form', border: false, items: [

(Xtype: 'checkbox', hideLabel: true, boxLabel: 'normal users', name:' role3 ', anchor: '100%')

])

]),

(Layout: 'column', border: false, items: [

(ColumnWidth: .3, layout: 'form', border: false, items: [

(Xtype: 'button', text: 'select "System Administrator"', scope: this,

handler: function () (

frm.form.findField ('role1'). setValue ('true');

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.findField ('role1'). SetValue ('true') \ n";

)

)

]),

(ColumnWidth: .4, layout: 'form', border: false, items: [

(Xtype: 'button', text: 'do not select "System Administrator"', scope: this,

handler: function () (

frm.form.findField ('role1'). setValue ('false');

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.findField ('role1'). SetValue ('false') \ n";

)

)

])

(ColumnWidth: .3, layout: 'form', border: false, items: [

(Xtype: 'button', text: 'select the "Manager"', scope: this,

handler: function () (

frm.form.findField ('role2'). setValue ('true');

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.findField ('role2'). SetValue ('true') \ n";

)

)

])

]),

(Layout: 'column', border: false, items: [

(ColumnWidth: .3, layout: 'form', border: false, items: [

(Xtype: 'button', text: 'do not select "Manager"', scope: this,

handler: function () (

frm.form.findField ('role2'). setValue ('false');

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.findField ('role2'). SetValue ('false') \ n";

)

)

]),

(ColumnWidth: .4, layout: 'form', border: false, items: [

(Xtype: 'button', text: 'select the "ordinary user"', scope: this,

handler: function () (

frm.form.findField ('role3'). setValue ('true');

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.findField ('role3'). SetValue ('true') \ n";

)

)

]),

(ColumnWidth: .3, layout: 'form', border: false, items: [

(Xtype: 'button', text: 'do not choose to "ordinary users"', scope: this,

handler: function () (

frm.form.findField ('role3'). setValue ('false');

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.findField ('role3'). SetValue ('false') \ n";

)

)

])

])

])

]),

(ColumnWidth: .5, bodyStyle: 'padding: 0 0 0 5px', layout: 'form', border: false, items: [

(Xtype: 'fieldset', title: 'control were the same', height: 110, items: [

(Layout: 'column', border: false, items: [

(ColumnWidth: .5, layout: 'form', border: false, items: [

(Xtype: 'checkbox', fieldLabel: 'the role of 2', boxLabel: 'System Administrator', name: 'role', anchor: '90% ', inputValue: "System Administrator")

]),

(ColumnWidth: .25, layout: 'form', border: false, items: [

(Xtype: 'checkbox', hideLabel: true, boxLabel: 'manager', name: 'role', anchor: '90% ', inputValue: "manager")

]),

(ColumnWidth: .25, layout: 'form', border: false, items: [

(Xtype: 'checkbox', hideLabel: true, boxLabel: 'normal users', name:' role ', anchor: '90%', inputValue: "ordinary users")

])

]),

(Layout: 'column', border: false, items: [

(ColumnWidth: .3, layout: 'form', border: false, items: [

(Xtype: 'button', text: 'findField ("role")', scope: this,

handler: function () (

var obj = frm.form.findField ('role');

Ext.get ('op'). Dom.value + = "implementation: var obj = frm.form.findField ('role') \ n" +

'Obj.inputValue:' + obj.inputValue + '\ n';

)

)

]),

(ColumnWidth: .4, layout: 'form', border: false, items: [

(Xtype: 'button', text: "setValue ('true')", scope: this,

handler: function () (

frm.form.findField ('role'). setValue ('true');

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.findField ('role'). SetValue ('true') \ n";

)

)

]),

(ColumnWidth: .3, layout: 'form', border: false, items: [

(Xtype: 'button', text: "setValue ('false')", scope: this,

handler: function () (

frm.form.findField ('role'). setValue ('false');

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.findField ('role'). SetValue ('false') \ n";

)

)

])

])

])

])

]),

(Xtype: 'fieldset', title: 'RadioGroup', height: 60, items: [

(Layout: 'column', border: false, items: [

(ColumnWidth: .3, layout: 'form', border: false, items: [

(Xtype: 'ux-radiogroup',

fieldLabel: 'sex'

name: 'sex',

horizontal: true,

radios: [(

value: 'M',

checked: true,

boxLabel: 'M'

), (

value: 'F'

boxLabel: 'F'

)]

)

]),

(ColumnWidth: .3, layout: 'form', border: false, items: [

(Xtype: 'button', text: "setValue ('M')", scope: this,

handler: function () (

frm.form.findField ('sex'). setValue ('M');

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.findField ('sex'). SetValue ('M') \ n";

)

)

]),

(ColumnWidth: .3, layout: 'form', border: false, items: [

(Xtype: 'button', text: "setValue ('F')", scope: this,

handler: function () (

frm.form.findField ('sex'). setValue ('F');

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.findField ('sex'). SetValue ('F') \ n";

)

)

])

])

]),

(Layout: 'column', border: false, items: [

(ColumnWidth: .5, layout: 'form', border: false, items: [

(Xtype: 'button', text: "form.setValues ((role1: true, role: true, sex: 'M'})", scope: this,

handler: function () (

frm.form.setValues ((role1: true, role: true, sex: 'M'));

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.setValues ((role1: true, role: true, sex: 'M')) \ n";

)

)

]),

(ColumnWidth: .5, layout: 'form', border: false, items: [

(Xtype: 'button', text: "form.getValues ()", scope: this,

handler: function () (

Ext.get ('op'). Dom.value + = "the implementation of: frm.form.getValues () \ n"

+ 'Results:' + Ext.encode (frm.form.getValues ())+' \ n ';

)

)

])

])

],

buttons: [(

text: 'Save'

scope: this,

handler: function () (

if (frm.form.isValid ()) (

frm.form.doAction ('submit', (

url: 'form.ashx',

method: 'post',

params:'',

success: function (form, action) (

Ext.Msg.alert ('action', action.result.data);

)

failure: function () (

/ / Ext.Msg.alert ('action', 'Save failed!');

)

));

)

)

), (

text: 'cancel'

scope: this,

handler: function () (frm.form.reset ();)

)]

));

))

</ Script>

</ Body>

</ Html>
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Checkbox to use with RadioGroup

  • web developed by a number of issues (java directions)

    Internship soon, and the company give me a number of questions, let me seriously think about. I encountered some problems, some not, I check the information from the Internet, and finally put together some answers to questions, I hope that users be able t

  • ExtJs easy application

    Extjs application required the introduction of extjs in the page style and extjs library file, style file for the resources / css / ext-all.css, extjs the js library file consists of two major, adapter / ext / ext-base.js and ext - all.js, one of ext-base

  • Project diary -20090303

    A new project started, from my involvement in the project, has passed two weeks time. I became the project's technical manager, I think from today onwards, the daily program and record ideas for future projects to do reference. The past two weeks ...

  • Ext JS paging

    Reprint please specify the source, thank you. Recent look at Ext JS, Writing using ExtJS for a paging procedure, the background is the jsp code. ExtJS code: Ext.onReady (function () ( var sm = new Ext.grid.CheckboxSelectionModel (); var cm = new Ext.grid.

  • Ext2.2 + json + jsp questions to obtain background data - Ajax

    Ext-2.2 in the study, we will first study it usually comes with some examples, today found an example about paging, it is to use php access to json format data, And I found a lot of people online through java access to background data, so I wrote a jsp ac

  • Ext.ux.UploadDialog the use of sample components

    Ext.ux.UploadDialog the use of sample components Effect: Call to create HTML: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> </ title> <link rel="styleshe

  • Hibernate performance tuning (the focus of understanding)

    1. Object Cache: fine-grained, in view of the table Record Level, transparent access, without changing the procedure code can greatly enhance the performance of web applications. ORM object cache is a magic weapon for the victory. 2. The merits of th ...

  • Hibernate's FetchSize and MaxReslut

    Previously EJB to do paging, EJBQL only provide FirstResult and MaxReslut, recently discovered by Hibernate its HQL also provides FetchSize, checked under the API found almost mean, and then found the next line so someone said: setFetchSize is an opt ...

  • extjs development environment set up and practice

    1, download and extract the extjs 2, download eclipse and Eclipse AJAX Toolkit Framework (ATF) I have been accustomed to using eclipse as a development environment, a variety of open-source plugin so that eclipse has all-around performance, operating effi

  • Hibernate configuration parameters hibernate.hbm2ddl.auto

    Hibernate in the configuration file: <properties> <property name="hibernate.hbm2ddl.auto" value="create" /> </ properties> Parameter Description: validate load hibernate, the authentication to create a database t ...

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries