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>

分类:Web 时间:2010-08-08 人气:294
分享到:
blog comments powered by Disqus

相关文章

  • April 16 Ext.TreePanel basic configuration parameters 2010-04-16

    TreePanel basic configuration parameters: / / TreePanel configuration parameters 1.animate: true / / expand, shrink animation, false, then there is no animation 2.autoHeight: true / / auto height, defaults to false 3.enableDrag: true / / tree node ca

  • Linux vsftpd.conf configuration parameters 2010-03-09

    vsftpd.conf configuration parameters configure vsftp with detailed finishing the last few days took a long time did not make things right, and now finally realized I wanted, and the following is accumulated during the configuration files on some of t

  • Sybase configuration parameters 2010-03-25

    Sybase configuration parameters sp_configure 'max online engines', 4 go - Configure the number of boot cpu sp_configure 'number of engines at startup', 4 go - Configure the maximum amount of memory sp_configure 'max memory', 2097151 go - The largest

  • All configuration parameters fckeditor 2010-04-25

    Download the complete program, the first on the program to delete unnecessary stuff. Any file names or folder names preceded by "_" The file or folder can be deleted, these files are examples of documentation or document. In addition,. / Lang fo

  • DB2 system commands and configuration parameters Daquan 2010-07-28

    Includes four parts, namely: 1, DB2 system commands dasauto - DB2 Administration Server automatically starts dascrt - Create DB2 Administration Server dasdrop - remove the DB2 Administration Server dasmigr - DB2 administration server migration dasupd

  • MySql configuration parameters 2011-04-13

    Mysql configuration parameters are complete instructions 1. Back_log MySQL may specify the number of connections. When MySQL is the main thread in a very short period of time to get a lot of connection requests, the parameters work, the main thread a

  • RMAN configuration parameters 2011-08-29

    Transfer: http://hi.baidu.com/ywz1029/blog/item/1822c091d485b184a977a4d1.html RMAN in Oracle 9i is configured to use RMAN> show all; RMAN configuration parameters can be displayed as: CONFIGURE RETENTION POLICY TO REDUNDANCY 1; # default CONFIGURE BA

  • c3p0 connection pool configuration parameters description 2011-09-20

    <c3p0-config> <default-config> <! - When the connection pool c3p0 connection run out to get the number of connections at one time. Default: 3 -> <property name="acquireIncrement"> 3 </ property> <! - Define a new

  • Java Virtual Machine (JVM) configuration parameters 2009-04-12

    1. Java VM Running on the linux platform on the JVM will be read / etc/sysconfig/i18n to determine the parameters in the output stream of the encoding, if the process of installing the linux system does not select English, JVM will not be able to dat

  • Hibernate configuration parameters in the hibernate.hbm2ddl.auto 2010-04-07

    Hibernate in hibernate.hbm2ddl.auto configuration parameters have the following optional values validate loaded hibernate, verify that create the database table structure create for each load hibernate, re-create the database table structure create-d

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 黔ICP备15002463号-1

processed in 0.339 (s). 12 q(s)