ExtJs之单选及多选框

坚持 

<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
        <script type="text/javascript" src="ExtJs/ext-all.js"></script>
        <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

    <script type="text/javascript">
            Ext.onReady(function(){
                new Ext.form.Panel({
                    title: 'Ext.form.field.Checkbox and Radio Sample',
                    bodyStyle: 'padding: 5 5 5 5',
                    frame: true,
                    height: 150,
                    width: 250,
                    renderTo: 'form',
                    defaults: {
                        labelSeparator: ':',
                        labelWidth: 80,
                        width: 200,
                        labelAlign: 'left'
                    },
                    items: [{
                        xtype: 'radio',
                        name: 'sex',
                        fieldLabel: 'sex',
                        boxLabel: 'male'
                    },{
                        xtype: 'radio',
                        name: 'sex',
                        fieldLabel: 'sex',
                        boxLabel: 'femail'
                    },{
                        xtype: 'checkboxfield',
                        name: 'swim',
                        fieldLabel: 'hobby',
                        boxLabel: 'swim'
                    },{
                        xtype: 'checkboxfield',
                        name: 'walk',
                        fieldLabel: 'hobby',
                        boxLabel: 'walk'
                    }]
                });

                new Ext.form.Panel({
                    title: 'Ext.form.field.Checkbox and Radio Sample',
                    bodyStyle: 'padding: 5 5 5 5',
                    frame: true,
                    height: 200,
                    width: 270,
                    renderTo: 'form1',
                    defaults: {
                        labelSeparator: ':',
                        labelWidth: 50,
                        width: 200,
                        labelAlign: 'left'
                    },
                    items: [{
                        xtype: 'radiogroup',
                        fieldLabel: 'sex',
                        columns: 2,
                        items: [
                            {boxLabel: 'male', name: 'sex', inputValue: 'male'},
                            {boxLabel: 'female', name: 'sex', inputValue: 'female'}
                        ]
                    },{
                        xtype: 'checkboxgroup',
                        fieldLabel: 'hobby',
                        columns: 3,
                        items: [
                            {boxLabel: 'swim', name: 'swim'},
                            {boxLabel: 'walk', name: 'walk'},
                            {boxLabel: 'read', name: 'read'},
                            {boxLabel: 'game', name: 'game'},
                            {boxLabel: 'movie', name: 'movie'}
                        ]
                    }]
                });
            });
    </script>
</head>
<body>
    <div id='form'></div>
        <div id='form1'></div>

</body>
</html>

时间: 2024-07-29 16:04:07

ExtJs之单选及多选框的相关文章

ExtJs 4.2.1 复选框数据项动态加载(更新一下)

最近在做博客项目,后台管理用的是ExtJs4.2.1版本,因为是初学所以在使用的时候也遇到不少的这样或那样的问题,也写了不少这方面的博客,今天要写的博客是关于复选框数据项动态的加载功能,以前也没用过,初次用,不知道怎么动态加载,静态加载很容易,添加itmes就可以了,于是我在网上找找有关这方面的博客,找到一篇,不过遗憾的是,这种方法太糟糕了,不是很方便,于是找到了一个很好的解决方法:   //点击编辑弹出的formpanel var formPanel = new Ext.FormPanel({

Delphi中为TreeView添加单选和复选框

打开电脑,进入Windows操作系统,在资源管理器的左边栏中清楚地显示了系统管理的所有磁盘的信息以及各个磁盘所容纳的文件与文件夹(如图一).这种常见的显示方式是由一个根节点和若干个子节点构成的,这被称为"树形结构".这种树形结构的用途非常广泛,在很多常用软件中都出现过它的身影.Windows中将这种结构封装为"树形控件",即TreeView控件,它与ListView.Button等一样都属于系统自带的通用公共控件.在Delphi中,TreeView也被封装成了VCL

android中的单选和多选框

先展示一下效果图 大致代码如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="fill_parent" 4 android:layout_height="fill_pa

Asp.net MVC视频教程 18 单选与复选框

[hjp2=480,320,true]http://player.youku.com/player.php/Type/Folder/Fid/2416830/Ob/1/Pt/17/sid/XNDU4MzMwODA=/v.swf[/hjp2]     http://v.youku.com/v_playlist/f2416830o1p17.html

Asp.net自定义控件之单选、多选控件_实用技巧

本文实例为大家分享了Asp.net单选.复选框控件的具体实现代码,供大家参考,具体内容如下 将常用的jquery插件封装成控件也是个不错的选择. 先看看效果: 1.新建类库项目,创建数据源类 [Serializable] public class Select2Item { public bool Selected { get; set; } public string Text { get; set; } public string Value { get; set; } public Sel

网页制作基础:单选框和复选框的应用

单选框|复选框|网页 在用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,在HTML的<input>标记中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中的选项用户可以任意选择多项,甚至全选.请看下面的例子: 下面给出这个例子的源代码,结合代码来讲各参数的设置: <form name="form1" > 你是否喜欢旅游?请选择:<br> <input type="radio"

VC++ 6.0使用复选框和单选钮

单选钮用来表示一系列的互斥选项,这些互斥项常常被分成若干个组,每组仅允许用户选择一个选项:复选框与单选按钮相象,不同之处是复选框代表多重选择,用户可以选择一个或多个选项. 对话框编辑器中各组控件的对齐 按下Ctrl键并单击要对齐的各个控件,同时选中.最后选中的控件是对齐的基准,仔细观察,它周围的8个小方框是实心的,而其它被选控件周围的小方框是空心的. 在Layout菜单中选择Make Same Size的Both,可以统一控件尺寸,所选控件尺寸与基准控件相同.在Layout菜单中选择Align的

使用AngularJS处理单选框和复选框的简单方法

这篇文章主要介绍了使用AngularJS处理单选框和复选框的方法,在AngularJS表单的基础之上编写起来非常简单,需要的朋友可以参考下     AngularJS对表单的处理相当简单.在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理. 使用复选框的的例子有很多,同时我们对它们的处理方式也有很多.这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法. 创建Angular表单 在这篇文章里,我们需要两个文件:index.html

谷歌Chrome浏览器中单选框和复选框不显示怎么办

  谷歌Chrome浏览器中单选框和复选框不显示怎么办?最近不知怎么地,学研端的Chrome浏览器中的单选框和复选框经常不显示.给上网带来很大的不方便.虽然可以拷贝网址到firefox或者搜狗浏 览器中看,或者直接换浏览器,但总觉得还是用chrome习惯.更让学研端舍不得的是chrome简约的界面和强大的插件库.所以尝试了一个办法终于解决 了单选框和复选框无法正常显示的问题. 应该有多种解决办法的,学研端使用的是修改计算机的属性.具体地,是:依次进入:"我的电脑"→"属性&q