`
tesia
  • 浏览: 33461 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

Ext.form.CheckboxGroup和Ext.form.RadioGroup组件示例

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext.form checkBoxGroup 和 ReadioGroup组件示例</title>
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
       
<script type="text/javascript">
         Ext.onReady(function(){
     new Ext.form.FormPanel({
title:'checkBoxGroup and ReadioGroup',
bodyStyle:'padding:5 5 5',//表单边距
frame:true,
height:100,
width:270,
renderTo:'form',
defaults:{
labelSeparator:':',
labelWidth:50,//标签宽度
width:200, //字段宽度
labelAlign:'left'
},
items:[ {
xtype:'radiogroup',
fieldLabel:'性别',
columns:2,
items:[{boxLabel:'男',name:'sex',inputValue:'male'},
  {boxLabel:'女',name:'sex',inputValue:'female'}]
},
     {
xtype:'checkboxgroup',
fieldLabel:'爱好',
columns:3,
items:[{boxLabel:'游泳',name:'swim'},
{boxLabel:'唱歌',name:'sing'},
{boxLabel:'游戏',name:'game'}]
}
]
});
        });
</script>       
    </head>
    <body>
    <div id="form"></div>
    </body>
</html>
分享到:
评论

相关推荐

    EXT.form组件

    2. `checkbox`:`Ext.form.Checkbox`是用于创建复选框的组件,用户可以选择或取消选择多个选项。 3. `combo`:`Ext.form.ComboBox`是下拉列表框组件,允许用户在预设的选项中进行选择,同时可以提供搜索功能以便...

    Ext组件描述,各个组件含义

    - **功能描述**:Component 是所有 Ext 组件的基础类,它定义了所有 Ext 组件都共有的基本属性和方法。 - **主要用途**:作为所有其他组件的基类。 **1.5 Container (Ext.Container)** - **xtype**: `container` -...

    ext checkboxgroup 回填数据解决

    重写 代码如下: //解决checkboxgroup回填数据问题 Ext.override(Ext.form.BasicForm,{ findField : function(id){ var field = this.items.get(id); if(!field){ this.items.each(function(f){ if(f.isXType(...

    Ext checkBoxGroup的用法和取值

    在这个示例中,我们创建了一个`Ext.form.Panel`,其中包含一个`checkBoxGroup`组件。`checkBoxGroup`有三个列(`columns: 3`),并定义了三个复选框,每个都有不同的`inputValue`,这在处理用户选择时非常有用。 接...

    Ext.form.FieldSet的用法.pdf

    `Ext.form.FieldSet` 是 `ExtJS` 框架中的一个组件,它主要用于组织和分组表单中的字段。FieldSet 提供了一种在界面上以可折叠或展开的方式展示一组相关输入字段的方式,有助于增强用户体验和界面的可读性。以下是对...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.8 Ext.form.CheckboxGroup和Ext.form.RadioGroup 4.1.9 Ext.form.field.Trigger触发字段 4.1.10 Ext.form.field.Spinner微调字段 4.1.11 Ext.form.field.Picker拾取器字段 4.1.12 Ext.form.field.ComboBox...

    Ext.form.FieldSet的用法.docx

    Ext.form.FieldSet是Ext JS库中的一个组件,用于组织和分组表单字段。它提供了一种方便的方式来呈现和管理一组相关的输入控件,并且可以通过配置项进行自定义以适应不同的设计需求。以下是对FieldSet的一些关键配置...

    EXT核心API详解

    45、Ext.form.Field类 …………………… 41 46、Ext.form.Checkbox类 …………… 42 47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50...

    Extjs3.0 checkboxGroup 动态添加item实现思路

    虽然它继承了Ext.form.Field,但是却类似于容器。 CheckboxGroup配置中的items处理生成一个对应的panel,该处理过程只有一次,所以很难对CheckboxGroup进行动态添加。如需要数据动态创建,试着创建整个CheckboxGroup...

    ExtJS-3.4.0系列目录

    - `Ext.form.CheckboxGroup` 和 `Ext.form.RadioGroup`:用于组合复选框和单选框。 - `Ext.form.field.Trigger`:触发字段,常用于下拉搜索框。 - `Ext.form.field.Spinner`:用于数字的微调。 - `Ext.form....

    ExtJs_xtype一览

    - `checkboxgroup`:`Ext.form.CheckboxGroup`,自2.2版本起,用于组织多个多选框的组件。 - `displayfield`:`Ext.form.DisplayField`,只读显示,不参与验证和提交的文本字段。 - `radiogroup`:`Ext.form....

    Ext表单组件之checkbox

    本篇文章将深入探讨Ext表单组件中的checkbox,以及如何利用源码和相关工具进行定制和优化。 1. **复选框的基本概念** 复选框在用户界面中常用于让用户从多个选项中选择一个或多个。在Ext JS中,复选框是`Ext.form....

    extjs 可编辑的表格树 Ext.tree.ColumnTree Ext.tree.ColumnTreeEditor

    extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....

    Ext_Net_CheckboxGroup 勾选、全选、反选和限制勾选

    Ext_Net_CheckboxGroup 勾选、全选、反选和限制勾选

    ExtJS入门教程(超级详细)

    45、Ext.form.Field类 …………………… 41 46、Ext.form.Checkbox类 …………… 42 47、Ext.form.Radio类 ………………… 43 48、Ext.form.HtmlEditor类 …………… 43 49、Ext.form.TextField类 …………… 44 50...

    ExtJs组件类的对应表

    16. **`checkboxgroup`** - `Ext.form.CheckboxGroup`,自2.2版本起引入,用于创建一组相关的多选框。 以上列举的组件是ExtJs框架中常用的部分,通过这些组件的灵活组合与配置,开发者可以构建出复杂且高度定制化的...

    extjs帮助文档pdf版

    - `Ext.data.GroupingStore.group(field)`: 对数据进行分组。 - `Ext.data.GroupingStore.ungroup()`: 解除数据分组。 #### 37. Ext.data.SimpleStore 类 (P.34) - **概述**:简单的存储类,适用于小数据集。 - *...

    EXT3.2 多选下拉框

    多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...

    EXT from培训教材

    3. **复选框**:使用`Ext.form.Checkbox`创建,用于选择是/否选项。例如: ```javascript new Ext.form.Checkbox({ fieldLabel: 'Active', name: 'active' }); ``` `name`属性用于标识字段,`fieldLabel`用于显示...

Global site tag (gtag.js) - Google Analytics